错误：websocket.js:84 WebSocket 连接到 'ws://localhost:5000/socket.io/?EIO=4&transport=websocket' 失败：答案

【问题标题】：error: websocket.js:84 WebSocket connection to 'ws://localhost:5000/socket.io/?EIO=4&transport=websocket' failed:错误：websocket.js:84 WebSocket 连接到 'ws://localhost:5000/socket.io/?EIO=4&transport=websocket' 失败：
【发布时间】：2021-09-16 18:02:42
【问题描述】：

我正在使用 reactJs、node 和 socket.io 构建一个实时聊天应用程序。但我收到 websocket 连接失败的错误。这是我在控制台中遇到的错误websocket.js:84 WebSocket connection to 'ws://localhost:5000/socket.io/?EIO=4&transport=websocket' failed:

这是客户端端代码

   
let socket;

const Chat = ({ location }) => {
  
  useEffect(() => {
    const { name, room } = queryString.parse(location.search);
    socket = io(ENDPOINT, { transports: ['websocket'] })
    setName(name);
    setRoom(room);

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

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

      socket.off();
    }
  
  }, [ENDPOINT, location.search])

  useEffect(() => {
    socket.on('message', (message) => {
      setMessages([...messages, message]);
    })
  }, [messages]);


  const sendMessage = (event) => {
    event.preventDefaut();
    if (message) {
      socket.emit('sendMessage', message, () => setMessage(''));
    }
  }
  console.log(message, messages);
  return (
    <div className="outerContainer">
      <div className="container" >
        <input value={message} onChange={(event) => setMessage(event.target.value)} onKeyPress={event => event.key === 'Enter' ? sendMessage(event) : null} />
      </div>
    </div>
  )
}

export default Chat;

这是服务器端代码

const { addUsers, removeUser, getUser, getUsersInRoom } = require('./users')

const PORT = process.env.PORT || 5000

const router = require('./router');

const app = express();

const server = http.createServer(app);
const io = socketio(server);

io.on('connection', (socket) => {
  socket.on('join', ({ name, room }, callback) => {

    const { error, user } = addUsers({ id: socket.id, name, room });

    if (error) return callback(error);

    socket.emit('message', { user: 'admin', text: `${user.name} , welcome to 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 have left");
  })
})

我试图解决这个问题，但在官方文档中找不到任何东西。如何解决这个问题？

【问题讨论】：

你是怎么解决的？

标签： javascript node.js reactjs websocket

【解决方案1】：

服务器端。在 index.js 文件中 使用 check(?) (user?.room)

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

【讨论】：

【解决方案2】：

我认为在请求中添加标头可能会解决问题。我在 socket.io 文档中阅读了它。我希望这会对您的问题有所帮助。让我知道事情的后续。示例：

socket = io(ENDPOINT, {  
        cors: {
        origin: "http://localhost:5000",
        credentials: true
      },transports : ['websocket'] });

【讨论】：