如何通过Socket.io在用户关闭标签页时发送REMOVE_SOCKETS事件

问题1：关闭标签页时REMOVE_SOCKETS事件未触发服务器监听器 #

你当前的useEffect清理函数在路由切换等组件卸载场景下能正常执行，但关闭标签页/浏览器时，浏览器会快速终止页面进程，异步的socket.emit可能来不及完成发送，这就是服务器没收到事件的核心原因。

解决方案：改用beforeunload事件保障发送可靠性 #

可以通过监听浏览器的beforeunload事件（页面卸载前触发），结合同步处理或navigator.sendBeacon（浏览器会在后台完成发送，不受页面卸载影响）来确保事件送达。

调整后的客户端代码示例：

useEffect(() => {
  const handleBeforeUnload = async (e) => {
    // 可选：阻止默认的关闭提示弹窗
    e.preventDefault();
    e.returnValue = '';
    
    // 方案1：用socket的确认回调确保事件发送完成
    if (socket) {
      await new Promise(resolve => {
        socket.emit('REMOVE_SOCKETS', {
          url: window.location.href,
          uid: '你的用户UID'
        }, resolve);
      });
      socket.disconnect();
    }

    // 方案2：若socket仍不可靠，改用sendBeacon直接发HTTP请求（更稳定）
    // const payload = JSON.stringify({ url: window.location.href, uid: '你的用户UID' });
    // navigator.sendBeacon('/api/remove-sockets', payload);
  };

  window.addEventListener('beforeunload', handleBeforeUnload);

  return () => {
    // 路由切换等组件常规卸载场景，正常发送事件
    if (socket) {
      socket.emit('REMOVE_SOCKETS', {
        url: window.location.href,
        uid: '你的用户UID'
      });
      socket.disconnect();
    }
    window.removeEventListener('beforeunload', handleBeforeUnload);
  };
}, [socket]);

服务器端对应处理（若用sendBeacon方案）：

如果选择sendBeacon，需要在Express中单独写POST接口接收：

app.post('/api/remove-sockets', (req, res) => {
  const { url, uid } = req.body;
  // 执行你的业务逻辑
  res.status(204).send(); // sendBeacon无需返回内容，返回204即可
});

问题2：区分标签页关闭与刷新 #

可以利用「刷新时会触发load事件，关闭时不会」的特性，结合标记变量实现区分：

useEffect(() => {
  let isRefresh = false;

  // 页面加载时标记为刷新操作
  const handlePageLoad = () => {
    isRefresh = true;
  };

  const handleBeforeUnload = (e) => {
    if (!isRefresh) {
      // 仅在关闭标签页时发送事件
      if (socket) {
        socket.emit('REMOVE_SOCKETS', {
          url: window.location.href,
          uid: '你的用户UID'
        });
      }
    }
    // 重置标记，避免后续触发异常
    isRefresh = false;
  };

  window.addEventListener('load', handlePageLoad);
  window.addEventListener('beforeunload', handleBeforeUnload);

  return () => {
    window.removeEventListener('load', handlePageLoad);
    window.removeEventListener('beforeunload', handleBeforeUnload);
  };
}, [socket]);

另外，你之前添加的debugger在关闭标签页时不生效，是因为浏览器关闭标签页时不会停留执行调试代码。可以开启Chrome控制台的Preserve log功能（控制台右上角），用console.log替代debugger，这样刷新或关闭时日志不会被清空，方便排查问题。

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