时间戳

首页 > 解决方案 > Socket.io 不会在我的 React 应用程序中的浏览器后退按钮上触发断开连接

javascript - Socket.io 不会在我的 React 应用程序中的浏览器后退按钮上触发断开连接

问题描述

我遇到了一个反应问题，在我的内页上按下浏览器“后退”按钮（从而返回到我的外页）不会触发套接字断开事件。刷新、关闭浏览器等触发断开事件就好了。

我正在使用 react-router-dom 像这样：

const App = () => (
  <Router>
    <Route path="/" exact component={OuterComponent} />
    <Route path="/innercomponent" component={InnerComponent} />
  </Router>
);

我试图通过在我的 InnerComponent 中触发浏览器上的套接字断开连接来解决此问题：

useEffect(() => {window.onpopstate = e => {
      socket.emit("disconnect");
      socket.off();
      console.log("socket disconnect should fire.");
    };
}

但是，尽管当我单击后退按钮时触发了 console.log，但断开连接事件并没有触发。我假设这个问题与反应路由器有关。

标签： javascriptreactjssocket.io

解决方案

这是因为您在每次渲染后运行此效果（因此关闭套接字，如果我正确理解发生了什么），您只需要在组件卸载时运行它：

useEffect(()=>{    
    return ()=>{
      socket.close();
    }
  },[])

我没有看到“socket.off()”方法，也许你使用的是旧版本的 SocketIO？至少在最新版本中，socket.close() 用于手动关闭连接。无论如何，我对其进行了测试，似乎这就是你的 useEffect 应该设置的方式。

推荐阅读