亲,你断网啦?!前端如何监听网络状态变化

6,771 阅读2分钟

亲,你断网啦?!前端如何监听网络状态变化

一、需求场景概述

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

image.png

image.png

四、完整Demo

1.Demo效果图

image.png

image.png

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>