Question

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

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

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

这是我的代码：

服务器：

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 }));
   });
 };

非常感谢任何帮助！

Answer 1

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

我通过在我的主文件中使用我的路由器实例化一个套接字并将其作为prop或者redux传递给每个组件来修复它。希望这有助于其他人！

Socket.io与React，服务器到客户端发出呼叫未被接收

1 个答案: