带有 React 的 Socket.io，服务器到客户端发出调用未收到答案

【问题标题】：Socket.io with React, server-to-client emit call not being received带有 React 的 Socket.io，服务器到客户端发出调用未收到
【发布时间】：2020-12-09 01:59:26
【问题描述】：

我正在将 React 与 Socket.io 一起使用，并尝试让我的组件实时更新，因此一个用户可以创建一个新事件，它会立即显示给所有用户。我之前在 React 之外做过这个，看起来很简单，但我无法让它工作。

期望行为：当用户添加新事件时，服务器将新事件发送给客户端，客户端将新事件设置到 redux 存储中。

实际行为：服务器发出事件，但客户端从未接收到它。在网络选项卡中，两个 websocket 连接的状态为“待定”。

这是我的代码：

服务器：

io.on('connection', (socket) => {

  socket.on('createEvent', async (event, acknowledge) => {

    let err;
    let result;

    // add event to DB
    result = await db.createEvent(event);
    if(!result) err = "An error occured during event creation.";
    acknowledge(err, result);

    console.log('result', result);

    if (result) {
        socket.emit('eventCreated', result);
        console.log('emitted eventCreated');
    }
  });
});

客户：

componentDidMount () {
   this.getEventsFromDB();

   //listen for new events
   socket.on ('eventCreated', (event) => {
     console.log('hello,', event);
     this.props.dispatch(addEvent({ event }));
   });
 };

【问题讨论】：

标签： reactjs socket.io

【解决方案1】：

我找到了答案——我在我使用 websockets 的客户端的每个文件的开头使用了const socket = io()。所以每个页面都有自己独立的套接字，它工作得很好，直到我需要两个不同的页面来访问同一个套接字。

我通过在我的主文件中使用路由器实例化一个套接字并将其作为道具或通过 Redux 传递给每个组件来修复它。

【讨论】：