一、需求场景概述
有时需要监听网络状态变化,从而通知用户注意,或根据网络状态程序内部做某些逻辑处理。许多国民级别的软件,也常常见到,在网络掉线或网络状态较差,会提示用户网络掉线注意修复或退出高清视频切换清晰度的场景,那么这样的需求,在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
1.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>