reactjs React组件socket.io不必要的连接

gg58donl 于 2023-04-20 发布在 React

关注(0)|答案(3)|浏览(132)

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

这样做的问题是，它只在我挂载和卸载组件后工作，如果我只是upen另一个路由器，如主页，例如，连接仍然运行。
问题：最好的处理方法是什么？我应该在哪里申报
const socket = openSocket('http://localhost:8000');
谢谢，对不起我的英语。

reactjs

来源：https://stackoverflow.com/questions/53459912/react-component-socket-io-unnecessary-connection

3条答案

按热度按时间

z31licg01#

等你找到了

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

代码在组件加载时运行，这通常意味着页面已加载。您应该仅在主组件（或相关组件）已安装时打开套接字，使用componentDidMount()，然后在组件卸载时断开/关闭，使用componentWillUnmount()。
其次，默认的import不应该被称为openSocket。默认的import是一个让你创建一个socket连接但不打开它的函数。打开连接是一个单独的调用 * 在 * 你创建socket之后。你应该这样称呼它：
从“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() {
    ...
  }
}

赞(0）回复(0）举报 2023-04-20

sczxawaw2#

我认为你更喜欢在你真正需要的时候创建连接。所以，也许是在组件将要或已经挂载的时候。然后在你不再需要它的时候处理它。
哪个组件？我想应该是依赖于那个连接的最顶层的组件。
也许可以给予this，看看从容器组件连接是否有意义

赞(0）回复(0）举报 2023-04-20

zxlwwiss3#

另一种方法是使用React函数组件和useEffect钩子，以确保您仅在需要时连接，如www.example.com文档中所述socket.io：https://socket.io/how-to/use-with-react

赞(0）回复(0）举报 2023-04-20