设置 React 组件以监听 socket.io

Posted 2023-02-22

【中文标题】设置 React 组件以监听 socket.io

【英文标题】：Set up React component to listen to socket.io

【发布时间】：2017-01-04 08:25:58

【问题描述】：

我希望我的 React 组件能够监听来自 socket.io 的事件。如果我的 html 文件包括：

<script src="socket.io/socket.io.js"></script>

然后组件的constructor()有：

this.socket = io(); // eslint-disable-line no-undef

HTML 文件从我的 Express 服务器中检索到正确的 socket.io 客户端代码，一切正常。

但这感觉太俗气了。我讨厌依赖全局窗口名称空间来查找 io() 函数。让 React 组件通过 socket.io 连接到服务器的最佳实践是什么？谢谢。

【问题讨论】：

不能在props中传递io函数吗？然后在componentDidMount

期间连接

这将有助于测试，因为您可以传入您控制的模拟 io 函数。

【参考方案1】：

我会在所需的事件回调上创建componentWillMount 和setState 上的套接字。

【参考方案2】：

如果您使用的是 Webpack 或 Browserify 之类的打包工具，则可以使用 socket.io-client。

例如：

const io = require('socket.io-client');

class MyComponent extends React.Component 
  constructor(...args) 
    super(...args);
    this.socket = io();
  
  ...

【讨论】：

是的，这很好用！ @martriay 建议使用生命周期方法 (componentWillMount) 可以更精细地控制套接字何时连接/断开连接。谢谢！

【参考方案3】：

感谢分享。我使用了 componentWillMount 方法。我还添加了连接检测：

componentWillMount() 
  const socket = io(uri)

  socket.on('update', (data) => 
    this.setState( data, connected: true )
  );

  socket.on('disconnect', () => 
    this.setState( connected: false )
  );

  socket.on('reconnect', () => 
    this.setState( connected: true )
  );