WEB中监听网络断开

发表于 更新于 本文字数： 596 阅读时长 ≈ 1 分钟
本文是作者对WEB中监听网络断开的介绍，包括WEB中监听网络断开的优势、实现细节、相关资料等，这些步骤可以帮助作者提高WEB中监听网络断开的效率。

最近接到一个前端issue是关于用户网络断开和恢复带来的乱码问题，调研后发现WEB中网络变化没有监听及处理造成的，这里Mark下相关方法。

监听网络变化

通过online/offline事件监听网络变化。比如当把Wi-Fi关闭时offline事件触发，打开时online事件触发。

1
2
3
4
5
6
window.addEventListener('online', () => {
  console.log('网络在线');
});
window.addEventListener('offline', () => {
  console.log('网络中断');
});

判断网络状态

通过如下方法可以实时判断网络在线状态

1
navigator.onLine // true/false

Chrome下模拟网络断开状态

了解了监听网络变化和判断网络状态，那么如何模拟网络断开状态呢？ 好在Chrome下可以直接针对网页设置离线状态，从而不必直接修改整个设备的网络状态。

https://static.1991421.cn/2024/2024-08-13-000514.jpeg

离线时，WebSocket连接会断开？

当浏览器处于离线状态时，WebSocket连接并不会立即断开。同时当网络恢复，那么WebSocket中的数据会继续发到后端。

写在最后

了解下网络变化和判断网络状态，可以更好的处理网络断开带来的问题。