javascript - 设置 React 组件以监听 socket.io

Question

我希望我的 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 客户端代码，一切正常。

但这感觉太俗气了。我讨厌依赖全局窗口 namespace 来查找 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();
  }
  ...
}