移动设备崩溃或锁屏时WebSocket会发生什么，能否从浏览器端检测该状态

问题1：移动设备崩溃、锁屏时已建立WebSocket连接的变化 #

• 锁屏场景：移动设备锁屏后，系统通常会在数秒到数分钟内冻结后台应用/浏览器进程，停止网络栈的数据包收发。此时WebSocket连接不会主动触发close事件，处于半开连接状态：服务端收不到客户端的心跳包，会在自身超时阈值到达后主动断开连接；客户端在设备解锁、进程恢复前，完全感知不到连接已异常，直到进程恢复后尝试收发数据才会触发error或close事件。
• 设备崩溃场景：设备突然断电、系统宕机时没有机会发送TCP FIN包，WebSocket连接直接进入半开状态。两端都只能通过超时机制检测到连接失效，客户端直到重启浏览器、重新加载页面之前都不会产生任何相关事件。

注意：不同厂商的设备电量优化策略不同，部分激进的定制系统会在锁屏后立刻切断非白名单应用的网络连接，WebSocket断开速度会比原生系统更快。

问题2：浏览器端检测移动设备锁屏/崩溃状态的可行性 #

• 锁屏状态检测有部分可用的原生API：可以通过监听visibilitychange事件判断页面可见性，当页面被锁屏切到后台时，document.hidden属性会变为true，这个特性在所有移动端主流浏览器都兼容。但要注意这个事件只能检测页面不可见，无法100%确定是锁屏导致，也可能是用户切到了其他APP。
• 设备崩溃状态没有直接的浏览器API可以检测：崩溃发生时JS执行环境直接销毁，没有任何回调事件可以触发。行业通用的替代方案是用心跳+本地存储标记的方案：
  1. 客户端定期发送心跳包到服务端，同时在localStorage里写入最新的心跳时间戳
  2. 页面下次加载时读取上次的心跳时间戳，如果和当前时间差远大于心跳间隔，即可判定上次运行时发生了崩溃
• 额外补充：WebSocket的onclose、onerror事件只能在JS进程正常运行时触发，不能作为锁屏、崩溃的判定依据，半开连接状态下这两个事件都不会触发。

代码示例：visibilitychange监听实现基础锁屏检测 #

document.addEventListener('visibilitychange', () => {
  if (document.hidden) {
    console.log('页面已进入后台，可能触发了锁屏');
    // 可在此处记录状态，或提前给服务端发送暂存请求
  } else {
    console.log('页面回到前台，可检查WebSocket连接状态');
    // 检测到连接失效则触发重连逻辑
  }
});

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