浏览器关闭时是否会执行WebSocket的onclose事件？如何检测客户端强制断开？

问题1：浏览器关闭窗口/标签页时是否一定能执行onclose事件？ #

不能100%保证执行。
浏览器关闭/刷新标签页、窗口时，会优先销毁当前页面的执行上下文，异步任务、WebSocket回调都可能在执行前就被直接终止，尤其遇到浏览器进程强制结束、设备断电、页面崩溃、浏览器开启往返缓存（bfcache）冻结页面等场景，onclose回调甚至完全不会触发，你代码里的普通异步axios.post请求也大概率会被中断，无法成功发送到服务端。

问题2：如何可靠检测客户端强制断开的情况？ #

需要前端优化上报逻辑+服务端主动检测结合，才能覆盖所有场景：

前端优化（提升上报成功率） #

• 用navigator.sendBeacon()替代普通异步请求：这个API是浏览器专门为页面卸载场景设计的，会把请求加入浏览器的后台发送队列，即使页面已经销毁也会尽可能完成发送，可靠性远高于普通XHR/fetch。
  修改后的示例代码如下：

// 1. WebSocket关闭时上报
wsConnection.onclose = function(event) {
  const data = new Blob([JSON.stringify({ reason: 'abnormal' })], { type: 'application/json' });
  navigator.sendBeacon('/state', data);
};

// 2. 监听页面卸载事件兜底上报
window.addEventListener('beforeunload', () => {
  const data = new Blob([JSON.stringify({ reason: 'page_unload' })], { type: 'application/json' });
  navigator.sendBeacon('/state', data);
  // 主动关闭WebSocket连接
  wsConnection.close(1000, 'user_closed_page');
});

服务端检测（最终兜底方案） #

前端所有上报逻辑都存在失败的可能性，服务端必须做主动检测才能保证准确性：

• 实现WebSocket心跳机制：服务端定期（比如10秒一次）给客户端发送心跳包，设置超时阈值（比如30秒），如果连续2~3次心跳都没有收到客户端的pong响应，直接判定客户端已经异常断开，清理对应连接资源、更新状态即可。
• 绑定会话与连接关系：将WebSocket连接和用户的会话ID绑定，同一个用户建立新的WebSocket连接时，主动断开旧的同名连接，避免僵尸连接长期占用资源。

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