JavaScript Websockets页面卸载时触发断开连接问题（Flask游戏场景）

问题修复与可行方案 #

1. 先解决unload事件提前触发的问题

你遇到的unload在页面加载时就执行的情况，90%是开发环境导致的：

• 如果你用了前端框架（Vue/React等）的热重载功能，代码变更触发的页面局部重绘/重载会触发unload事件，生产环境构建后这个问题会自动消失
• 检查你的事件绑定代码是否放在了DOM未完全挂载的位置，确保绑定逻辑只在页面初始化完成后执行一次

2. 无需修改现有beforeunload确认逻辑，直接优化unload阶段的通知可靠性

你当前的unload事件里用socket.emit发通知大概率会失败：页面卸载阶段浏览器会主动终止所有未完成的异步TCP请求，socket消息还没发出去连接就被切断了。可以改用浏览器专为卸载阶段请求设计的navigator.sendBeacon接口，它的请求会被浏览器放在后台优先级队列，即使页面关闭也能保证完成：

window.addEventListener("unload", function () {
  // 往你的服务端断连接口发个小请求，携带用户id即可
  navigator.sendBeacon("/api/user/offline", JSON.stringify({
    user_id: currentUserId
  }));
  // 同时尝试调用socket断连，能发出去最好，发不出去还有beacon兜底
  if (socket) socket.disconnect();
});

beforeunload的确认弹窗不会影响unload的触发逻辑：只有用户点击「确认离开」才会触发unload，点「取消」留在页面的话不会执行上面的逻辑，完全符合你的需求。

3. 服务端加心跳检测做最终兜底

不管前端通知逻辑写的多完善，都存在客户端崩溃、网络突然断开、浏览器强制杀死等场景没法触发卸载事件，所以必须在服务端加心跳检测：

• 服务端每隔5s给所有在线socket客户端发ping包
• 如果连续2次没收到客户端的pong响应，直接判定用户离线，从大厅列表移除
• Flask-SocketIO本身自带ping_interval、ping_timeout配置，直接启用即可：

# 服务端初始化SocketIO时加配置即可
socketio = SocketIO(app, ping_interval=5000, ping_timeout=10000)

配置后如果客户端10s内没响应，服务端会自动触发disconnect事件，你在这个事件的回调里处理用户移除逻辑就行，不用依赖前端主动发通知。

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