reactjs - socket io客户端和服务器之间的连接问题

问题描述

我正在尝试使用 socket.io 的 react 和 express 设置聊天应用程序，但是在尝试使用 socket.io 将客户端与服务器连接时出现此错误（我使用的是 Firefox，并且在所有其他服务器上都遇到了相同的错误浏览器）

Firefox 无法连接到位于 ws://localhost:5000/socket.io/?EIO=4&transport=websocket 的服务器。

加载页面时，与 ws://localhost:5000/socket.io/?EIO=4&transport=websocket 的连接中断。

这是我的代码：

客户端：

import React, {useState, useEffect} from 'react';
import queryString from 'query-string';
import io from "socket.io-client";


var connectionOptions =  {
  "force new connection" : true,
  "reconnectionAttempts": "Infinity", 
  "timeout" : 10000,                  
  "transports" : ["websocket"]
};

let socket;

const Chat = ({ location }) => {
    const [name, setName] = useState('');
    const [room, setRoom] = useState('');
    const [message, setMessage] = useState('');
    const [messages, setMessages] = useState([]);
    const ENDPOINT = 'http://localhost:5000/';


    useEffect(() => {
        const{name , room} = queryString.parse(location.search);

        socket = io.connect(ENDPOINT, connectionOptions);
        
        setName(name);
        setRoom(room);

        
        socket.emit('receve', {name, room}, (error) => {

          if(error) alert(error);
         
        });

        return () => {
            socket.emit('disconnect');
            socket.off();
        }

    }, [ENDPOINT, location.search]);
    
    useEffect(() => {
      socket.on('message', (message) => {
        setMessage([...messages, message]);
      })
    }, [messages]);

    const sendMessage = (e) => {
      e.preventDefault();

      if(message) {

        socket.emit('sendMessage', message, () => setMessage(''));
      }
    }

    console.log(message, messages);

    return (
      <div className="outerContaienr">
        <div className="container">
          <input 
          value={message} 
          onChange={(e) => setMessage(e.target.value)}
          onKeyPress={(e) => e.key === 'Enter' ? sendMessage(e) 'enter code here': null}  
          />
        </div>
      </div>
        
    )

}

export default Chat;

服务器端：

 const express = require('express');
const http = require('http');
const socketio = require('socket.io');
const cors = require('cors');
const {addUsers, RemoveUser, getUser, getUsersInRoom} = require('./users.js')

const PORT = process.env.PORT || 5000;

const router = require('./router');
const app = express();
const server = http.createServer(app);
const io = socketio(server);

app.use(cors());
app.use(router);

  io.on("connect_error", (err) => {
    console.log(`connect_error due to ${err.message}`);
  });

io.on('connect', socket => {
  socket.on('receve', ({ name, room }, callback) => {
    const { error, user } = addUsers({ id: socket.id, name, room });
       //console.log(user);
       if (error)
         return callback(error);

       socket.emit('message', { user: 'admin', text: `${user.name}, welcome to the room ${user.room}` });
       socket.broadcast.to(user.room).emit('message', { user: 'admin', text: `${user.name}, has joined!` });

       socket.join(user.room);

       callback();
     });

  socket.on('sendMessage', (message, callback) => {
    const user = getUser(socket.id);

    io.to(user.room).emit('message', { user: user.name, text: message});

    callback();

  });
    socket.on('disconnect', () => {
        console.log('User had left');
    })
});


server.listen(PORT);

提前致谢

标签： reactjsexpresswebsocketsocket.iochat

reactjs - socket io客户端和服务器之间的连接问题

问题描述

解决方案

推荐阅读