反应组件插座.不必要的连接

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

进行时

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

代码在加载组件时运行，这通常意味着页面已加载。只有当主组件(或相关组件(已安装时，才应使用componentDidMount()打开套接字，然后在组件卸载时，使用componentWillUnmount()断开/关闭套接字。

其次，默认导入不应该被称为openSocket。默认导入是一个函数，用于创建套接字连接，但不打开它。在创建套接字后，打开连接是一个单独的调用。你应该这样称呼它：

从"socket.io客户端"导入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() {
...
}
}

Answer 2

我认为您更愿意在实际需要时创建连接。所以，也许组件将要安装或已经安装。在你不再需要它之后立即处理它。

哪个组件？我认为这将是最顶级的组件，它依赖于这种连接。

也许读一读，看看从容器组件连接是否有意义

Answer 3

另一种方法是使用React功能组件和useEffect挂钩，以确保您只在需要时进行连接，如socket.io文档中所述：https://socket.io/how-to/use-with-react