使用react-router-dom路由跳转时Socket.io未发送断开通知如何实现

这个问题的本质是react-router-dom的客户端路由跳转属于单页应用内的上下文切换，不会触发页面刷新，Socket.io底层的TCP连接不会自动断开，因此后端不会收到默认的disconnect事件。可以通过以下两种组合方案实现可靠的上报：

• 前端主动上报（优先实现，实时性最高）
  可以根据项目的路由使用方式选其中一种实现：
  1. 封装路由跳转逻辑，跳转前触发上报
     如果你项目使用的是react-router-dom v6+的useNavigate进行跳转，可以直接封装自定义钩子统一处理：

  import { useNavigate as useOriginalNavigate } from 'react-router-dom';
  
  const useNavigate = () => {
    const originalNavigate = useOriginalNavigate();
    const socket = yourSocketInstance; // 替换为你的项目内Socket实例获取逻辑
    return (to, options) => {
      // 跳转前先发送自定义断开/离开事件
      socket.emit('client_manual_leave', {
        current_path: window.location.pathname,
        target_path: to
      });
      // 如果跳转后不需要保持Socket连接，可以加下行主动断开
      // socket.disconnect();
      originalNavigate(to, options);
    }
  };
  export default useNavigate;
  

  2. 监听路由变化/页面组件卸载触发上报
     如果项目路由跳转逻辑分散不好统一封装，可以在根组件监听路由变化触发：

  import { useEffect } from 'react';
  import { useLocation } from 'react-router-dom';
  
  function App() {
    const location = useLocation();
    const socket = yourSocketInstance;
    useEffect(() => {
      // 路由切换旧页面卸载时触发清理逻辑
      return () => {
        socket.emit('client_leave_page', {
          leave_path: location.pathname
        });
      };
    }, [location.pathname]);
    // 其余App业务逻辑
  }
  

• 后端心跳检测兜底（必加，兼容异常场景）
  为了避免前端异常退出（比如直接杀进程、网络突然中断）导致的状态不一致，后端可以配置Socket.io的心跳参数，超时后自动触发断开逻辑：

  // 后端Node.js示例
  const { Server } = require("socket.io");
  const io = new Server(httpServer, {
    pingInterval: 10000, // 每10秒向前端发送心跳包
    pingTimeout: 5000 // 5秒未收到前端心跳回复即判定断开
  });
  

注意：如果路由跳转后仍然需要保持Socket连接，只需要发送自定义业务事件即可，不要调用disconnect方法，避免额外的重连开销。

内容的提问来源于stack exchange，提问作者MultiThunderXXL