Question

我希望我的React组件从socket.io中侦听事件。如果我的HTML文件包括：

，我的代码可以正常工作

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

然后组件的构造函数（）具有：

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

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

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

Answer 1

如果您正在使用像Webpack或Browserify这样的捆绑包，则可以使用socket.io-client。

例如：

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

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

Answer 2

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

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

设置React组件以侦听socket.io

3 个答案: