如何检测用户关闭浏览器的行为 实现协同文档多人编辑状态判断

方案1：心跳机制（全场景兼容，无用户侵入） #

这是目前业界实现这类需求最通用的稳定方案，完全不需要依赖页面退出监听：

• 前端每隔15~30秒向后端发送一次心跳请求，携带当前用户ID、正在编辑的文档ID
• 后端为每个文档的活跃编辑者设置过期时间（建议设置为心跳间隔的2倍，比如60秒），每次收到对应用户的心跳就刷新过期时间
• 当用户会话过期后，后端自动将该用户从对应文档的活跃编辑列表中移除
  这种方案可以覆盖所有异常退出场景：用户直接关浏览器、断网、进程强制杀死都能正常处理，全程不会给用户弹出任何提示。

方案2：优化后的页面退出事件监听 #

onbeforeunload目前已经兼容所有主流浏览器（Chrome、Firefox、Safari、Edge全版本支持），只要调整回调逻辑就不会打扰用户：

• 不要在onbeforeunload回调中返回任何值，也不要设置event.returnValue，浏览器就不会弹出关闭确认框
• 回调中使用navigator.sendBeacon()发送退出上报请求，这个API是W3C专门为页面卸载阶段设计的，浏览器会优先保证请求发送完成，不会阻塞页面关闭
  参考实现代码：

useEffect(() => {
  // 页面卸载时上报退出编辑状态
  const handleBeforeUnload = () => {
    const reportData = new FormData();
    reportData.append('userId', 当前登录用户ID);
    reportData.append('documentId', 当前编辑的文档ID);
    navigator.sendBeacon('/api/report-edit-exit', reportData);
  };

  window.addEventListener('beforeunload', handleBeforeUnload);
  return () => window.removeEventListener('beforeunload', handleBeforeUnload);
}, [当前编辑的文档ID])

方案3：基于GCP生态的低代码实现 #

你可以直接使用GCP旗下Firebase的原生能力，不需要自己开发心跳和会话管理逻辑：

• 使用Firebase Realtime Database或者Cloud Firestore的存在系统（Presence System），原生支持检测客户端连接状态
• 用户打开文档时，在数据库/activeEditors/[目标文档ID]/[用户ID]节点写入活跃标记，同时绑定onDisconnect()回调，指定客户端连接断开（任何原因导致的退出）时自动删除该标记
• 你只需要监听/activeEditors/[目标文档ID]节点的子节点数量，就能实时获取当前编辑该文档的用户数，还可以搭配Cloud Functions实现活跃用户变化时的自定义业务逻辑
  这种方案的开发量最小，成熟度高，适合快速上线需求。

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