Ошибка при реализации клиента Socket.IO (Node.js & ReactJS) - PullRequest
Новая
       6

Ошибка при реализации клиента Socket.IO (Node.js & ReactJS)

0 голосов
/ 17 июня 2020

Я реализую socket.io для создания чата с помощью реакции, и я уже установил соединение, но когда компонент загружен, я получаю сообщение об ошибке, которое не позволяет мне получить первые данные с сервера, если кто-то может мне помочь, я будет признателен.

ошибка: «websocket. js: 120 подключение WebSocket к 'ws: //127.0.0.1: 4000 / socket.io /? EIO = 3 & transport = websocket & sid = 9ffn8XUL0TlkEP9LAAAB' не удалось: Ошибка при подтверждении связи WebSocket: неожиданный код ответа: 400 "

/------------My backend---------------/

import express from 'express';
import socketIo from 'socket.io';
import ChatController from './resolvers/ChatController';

async function main() {

  const app = express();
  const httpServer = http.createServer(app);

  const io = socketIo(httpServer);
  
  	io.on('connection', (socket: socketIo.Socket) => {
		console.log('New client connected');

		ChatController(socket);

		socket.on('disconnect', () => {
			console.log('Client disconnected');
		});
	});

	httpServer.listen(4000, () => {
		console.log(`Server is running`);
	});

}

/---------------------ChatController-------------------------/
import socketIo from 'socket.io';

let messages = [];

const ChatController = (socket: socketIo.Socket) => {
	socket.on('sendMessage', (data: any) => {
		messages.push(data);
		socket.broadcast.emit('receivedMessage', data);
	});
};

export default ChatController;

/-----------------My client------------------/

import React, { useState, useEffect } from 'react';
import socketIOClient from 'socket.io-client';
const ENDPOINT = 'http://localhost:4000';

const socket = socketIOClient(ENDPOINT);

const ServiceChat: React.FC = () => {
  const [name, setName] = useState<string>();
  const [message, setMessage] = useState<string>();

  function handleSubmit(data: any) {
    data.preventDefault();

    const User = {
      name,
      message,
    };

     socket.emit('sendMessage', User);
  }

  return (
    <Container>
      <form onSubmit={handleSubmit} id="chat">
        <input
          type="text"
          name="username"
          onChange={(event) => setName(event.target.value)}
          placeholder="Digite seu usuário"
        />
        <div className="messages"></div>
        <input
          type="text"
          name="message"
          onChange={(event) => setMessage(event.target.value)}
          placeholder="Digite sua mensagem"
        />
        <button type="submit">Enviar</button>
      </form>
    </Container>
  );
};

export default ServiceChat;
...