设置 React 组件来监听 socket.io

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