如何通过socket.io检测处理客户端断网导致的连接丢失问题

完全可以通过Socket.IO实现你要的断连自动切换本地数据的能力，客户端自身断网时disconnect事件会正常触发，不需要额外套用通用的互联网离线检测方案。

原理说明 #

• Socket.IO 底层自带心跳保活（ping/pong）机制，客户端和服务端会按固定间隔互发心跳包，只要出现以下任意情况，客户端都会触发disconnect事件：
  • 客户端设备主动断网（切飞行模式、关闭WiFi/移动数据）
  • 网络链路中断，连续多次心跳包未收到服务端响应
  • 服务端主动断开连接、服务端进程宕机
• 你之前考虑的浏览器原生online/offline事件、navigator.onLine方案并不适配你的场景：这类API只能检测设备是否接入局域网，无法判断是否能正常连通你的业务服务端——比如设备连着无法访问外网的路由器、宽带欠费但WiFi信号正常时，浏览器会判定为「在线」，但实际上你已经拿不到服务端推送的数据了。

可直接复用的实现代码 #

// 初始化Socket.IO连接
const socket = io('替换为你的服务端实际地址', {
  // 可根据业务对断网检测的灵敏度调整参数，默认值为20秒超时、25秒发一次心跳
  pingTimeout: 10000, // 心跳包超过10秒没收到响应就判定断连
  pingInterval: 5000 // 每5秒发一次心跳包
})

// 全局状态标记：是否使用本地数据源
let isUseLocalData = false

// 连接成功后切回服务端数据源
socket.on('connect', () => {
  isUseLocalData = false
  // 这里写你切回服务端数据更新页面状态的逻辑
})

// 断连时自动切换到本地数据源
socket.on('disconnect', (disconnectReason) => {
  isUseLocalData = true
  // 这里写你用本地数据更新页面状态的逻辑
  // 注意：Socket.IO默认自带自动重连逻辑，网络恢复后会自动触发connect事件，不需要手动写重连代码
})

开发注意事项 #

• 调整心跳参数时不要把阈值设得过低，弱网环境下（比如移动端信号差）容易出现误判，频繁在服务端数据和本地数据之间切换影响体验
• 本地开发测试断网场景时，不要直接拔电脑网线/关WiFi测试：localhost是本地回环地址，哪怕断网本地前后端的连接也不会断开，要模拟真实断网请打开浏览器开发者工具，切到「网络」面板，选择「离线」限流模式，效果和真实用户端断网完全一致
• 如果你的业务不需要自动重连，可以在初始化socket时加autoConnect: false配置手动控制连接逻辑，默认场景下保持自动重连即可。

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