Question

我目前正在研究一个项目，并且正在使用React和Sockets.io。我有几个容器（准确地说是5个），每个容器都在接收事件并将事件发送到在App的componentDidMount生命周期挂钩中发生的单个套接字连接。我的问题是：这种方法正确吗？我应该在其他地方从插座上连接和断开连接吗？还是在每个容器内部连接和断开连接（也许使用挂钩）？

Answer 1

我正在一个类似的项目中工作，就我而言，我想在登录后启动套接字连接，然后根据所安装的组件接收事件。

我找到的最简单的方法是，从所需组件的构造函数中启动套接字客户端连接，然后导出此变量。因此，无论何时要使用套接字，都可以导入套接字并将监听器事件置于打开状态。

let socket;

class ConnectionClass extends React.Component {

  constructor(){
    super();
    socket = io();
  }
  render(){}  
}

export { socket };

我执行此操作的方法是在安装组件时将socket.on打开。然后，在卸载组件时关闭侦听器。

import { socket } from './ConnectionClass';

class EventClass extends React.Component {

  componentDidMount(){
    socket.on('event', function (data) {  
      alert(JSON.stringify(data, null, 4));
    });
  }

  componentWillUnmount(){
    socket.off('event');
  }
  render(){}
}

参考：https://medium.freecodecamp.org/how-to-create-a-realtime-app-using-socket-io-react-node-mongodb-a10c4a1ab676

您可以使用Redux state或React Context通过其他方式进行操作。

将React与Socket Client连接的正确方法

1 个答案: