设置 React 组件以监听 socket.io答案

【问题标题】：Set up React component to listen to socket.io设置 React 组件以监听 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 函数。

标签： javascript express reactjs socket.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 })
  });
}

【讨论】：