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

Posted 2023-04-18

【中文标题】socket io客户端和服务器之间的连接问题

【英文标题】：Connection problems between socket io client and server

【发布时间】：2021-06-27 12:27:14

【问题描述】：

我正在尝试使用 react 和 express 与 socket.io 设置聊天应用程序，但是在尝试使用 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(() => 
        constname , 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);

提前致谢

【问题讨论】：

可能是升级您的 Firefox 版本可以为您完成这项工作。 firefox 有bug，请注意。

【参考方案1】：

我认为您需要按以下格式添加 CORS。试试这个 sn-p：

const io = socketio(server,
  cors: 
    origin: "*",
  ,
);

希望能在我的机器 (Chrome) 上解决这个严重错误。