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

我会带着你远行 2023-10-11 21:24 4阅读 0赞

### 一、需求场景概述 ###

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

![format_png][]

![format_png 1][]

### 四、完整Demo ###

**1.Demo效果图**

![format_png 2][]

![format_png 3][]

**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>

[format_png]: https://img-blog.csdnimg.cn/img_convert/55b2a803f6324aa1d1b22763c7605b5c.webp?x-oss-process=image/format,png
[format_png 1]: https://img-blog.csdnimg.cn/img_convert/bbebb419c060a2c9da8bd4bb76c138a3.webp?x-oss-process=image/format,png
[format_png 2]: https://img-blog.csdnimg.cn/img_convert/3364620d494b2aa5a8bb3ba1e75569fc.webp?x-oss-process=image/format,png
[format_png 3]: https://img-blog.csdnimg.cn/img_convert/a2f6ed63c34e9204499bee9f8adb348f.webp?x-oss-process=image/format,png