Question

我在我的react组件中使用socket.io-client。大多数教程都建议这样做：

import openSocket from 'socket.io-client';
const socket = openSocket('http://localhost:8000');

这很好用（我可以在我的函数/生命周期挂钩中使用socket.on和socket.emit）。

但是以这种方式声明openSocket会导致连接请求（每25秒），即使未安装组件也是如此。这会给我一个错误（当我在控制台中使用npm start而没有后端时）ERR_CONNECTION_REFUSED。

我通过这样做找到了中途解决方案

componentWillUnmount(){
  socket.disconnect();
}

这个问题是，仅当我挂载该组件时，该组件才能工作，并且在卸载该组件后，如果我只是重新抬起另一条路由（例如主页），则连接仍在运行。

问题：处理此问题的最佳方法是什么？我应该在哪里申报

const socket = openSocket('http://localhost:8000');

谢谢，为我的英语深表歉意。

Answer 1

我认为您希望在实际需要时创建连接。因此，也许什么时候该组件将被挂载。并在不再需要它后立即进行处理。

哪个组件？我认为这将是取决于该连接的最顶层组件。

也许请this阅读一下，看看从容器组件进行连接是否有意义

Answer 2

这样做的时候

import io from 'socket.io-client';
const socket = openSocket('http://localhost:8000');

代码在加载组件时运行，这通常意味着页面已加载。只能在安装了主要组件（或相关组件）后使用componentDidMount()打开插座，然后在卸载后使用componentWillUnmount()断开/关闭。

第二，不应将默认导入称为openSocket。默认导入是一个函数，可以让您创建一个套接字连接，但不打开它。创建套接字后，在中单独打开连接。您应该改为这样：

从“ socket.io-client”导入io

总结以上内容，您可以尝试执行以下操作：

import io from 'socket.io-client'; // The default import should be called io.

class App extends React.Component {
  constructor(props) {
    super(props);
    this.socket = io('http://localhost:8000');
  }

  componentDidMount() {
    this.socket.open();
    this.socket.emit('load_settings');
    this.socket.on('settings_loaded', (data) => {
      // we get settings data and can do something with it
      this.setState({
        settings: data,
      })
    });
  }

  componentWillUnmount() {
    this.socket.close();
  }

  render() {
    ...
  }
}

反应组件socket.io不必要的连接

2 个答案: