亲,你断网啦?!前端如何监听网络状态变化
一、需求场景概述
有时需要监听网络状态变化,从而通知用户注意,或根据网络状态程序内部做某些逻辑处理。许多国民级别的软件,也常常见到,在网络掉线或网络状态较差,会提示用户网络掉线注意修复或退出高清视频切换清晰度的场景,那么这样的需求,在web前端可以通过navigator.onLine和navigator.connection结合监听online、offline事件实现。
二、实现思路分析
1.上线(连网)监听。addEventListener监听online事件,网络连接上时会触发该事件,此时通过navigator.onLine可以查看网络在线状态,通过navigator.connection获取网速等网络状态信息。
2.下线(断网)监听。addEventListener监听offline事件,网络连接断开时会触发该事件,此时通过navigator.onLine可以查看网络在线状态,通过navigator.connection获取网速等网络状态信息。
3.监听到网络状态变更时,可以按需提示用户或做某些特殊处理。
三、相关技术点介绍
1.online基本使用
online = window.navigator.onLine; online是一个布尔值true或false。 要监听查看网络状态的变化,请使用 addEventListener 监听 和 上的事件window.online,window.offline 如下例所示: window.addEventListener(offline, function(e) { console.log(offline); }); window.addEventListener(online, function(e) { console.log(online); });
2.connection的基本使用
connectionInfo = navigator.connection 返回网络连接状态NetworkInformation对象,包括.downlink(网络下行速度) effectiveType(网络类型) onchange(有值代表网络状态变更) rtt(估算的往返时间) saveData(打开/请求数据保护模式)
3.注意事项:
navigator.online和navigator.connection浏览器兼容性如下,可以看到connection的兼容性较低,实际开发应当谨慎使用。
四、完整Demo
2.完整Demo代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js实现查看网络状态</title> </head> <body> <div> <h3>改变网络状态测试效果</h3> <h1 id="p1">获取网络在线状态:</h1> <h1 id="p2">获取网络具体状态:</h1> <h1 id="p3">获取网络速度:</h1> </div> <script> window.onload = function() { getNetworkConnectionChange(); getNetworkOnLineChange(); }; // connection 的兼容性较低,谨慎使用 // 通过navigator.connection获取当前网络状态,可对connection进行监听,从而及时获取网络状态的变更 function getNetworkConnectionChange() { // connection 的兼容性较低 const connection = navigator.connection || navigator.webkitConnection || navigator.mozConnection; updateText("p2", "网络状态:" + connection.effectiveType); updateText("p3", "网络下行速度:" + connection.downlink + "MB/S"); // 对connection变更监听 connection.addEventListener("change", () => { // connection.effectiveType返回的是具体的网络状态:4g/3g/2g updateText("p2", "网络状态:" + connection.effectiveType); updateText("p3", "网络下行速度:" + connection.downlink + "MB/S"); }); } // 通过navigator.online判断当前网络是否在线,对navigator进行监听,从而及时获取网络状态的变更 function getNetworkOnLineChange() { updateText("p1", "您的网络是否在线:" + window.navigator.onLine); // 对online网络在线变更监听 window.addEventListener("online", function() { updateText("p1", "您的网络是否在线:" + window.navigator.onLine); }); // 对offline断网变更监听 window.addEventListener("offline", function() { updateText("p1", "您的网络是否在线:" + window.navigator.onLine); }); } function updateText(id, msg) { document.getElementById(id).textContent = msg; console.log(msg); } </script> </body> </html>
上一篇:
Java架构师技术进阶路线图
下一篇:
VRRP的配置【学习笔记(2)】