navigator.onLine仅反映浏览器联网状态,不保证实际通信;需结合online/offline事件、WebSocket心跳、指数退避重连及本地缓存同步实现可靠网络状态管理。
如何用 navigator.onLine 检测基础网络状态
navigator.onLine 是最轻量的在线状态判断方式,但它只反映浏览器是否“认为”联网——比如断开 WiFi 后立即返回 false,但连着 WiFi 却因 DNS 失败或服务器宕机而无法通信时,它仍返回 true。
所以它适合做第一层快速响应,不能替代真实连接检测:
- 监听
window.addEventListener('online', handler)和'offline'事件,但注意:这些事件可能延迟触发(尤其从休眠唤醒后) - 首次进入游戏时必须主动读一次
navigator.onLine,因为页面加载时事件不会触发 - 不要仅靠它决定是否发请求——它不保证 WebSocket 或
fetch能通
WebSocket 断线时怎样捕获真实错误并提示用户
HTML5 小游戏常用 WebSocket 实时通信,但 onclose 和 onerror 触发时机与原因差异很大:
-
onclose在连接被服务端关闭、主动调用close()或底层 TCP 断开时触发,event.code可区分原因(如1006表示异常关闭) -
onerror不会携带具体错误信息,且某些浏览器(如 Safari)在连接失败初期不触发它,只静默失败 - 必须配合心跳机制:每隔 5–10 秒发一次
ping帧(或自定义{"type":"ping"}),超时未收到pong就判定为断线
示例片段:
立即学习“前端免费学习笔记(深入)”;