インターネットに接続されていませんか?! フロントエンドモニターのネットワークステータスはどのように変化しますか?

1. 需要シナリオの概要

場合によっては、ネットワークの状態の変化を監視して、ユーザーに注意を払うように通知したり、ネットワークの状態に応じてプログラム内でロジック処理を実行したりすることが必要になることがあります。国家レベルのソフトウェアも多く見られ、ネットワークが切断されたり、ネットワークの状態が悪い場合、ユーザーはネットワーク切断を修復するか、高解像度ビデオを終了してシーンの定義を切り替えるように求められます。要求は、Web のフロントエンドのナビゲーターを通じて実現できます。.onLine と navigator.connection を組み合わせて、オンラインイベントとオフラインイベントを監視します。

2. 実装思考分析

1. オンライン (ネットワーク接続) にして監視します。addEventListener は、ネットワーク接続時にトリガーされるオンラインイベントをリッスンします。このとき、navigator.onLine を通じてネットワークのオンラインステータスを表示し、navigator.connection を通じてネットワーク速度などのネットワークステータス情報を取得できます。

2. オフライン（切断）監視。addEventListener は、ネットワーク接続が切断されたときにトリガーされるオフラインイベントをリッスンします。このとき、navigator.onLine を通じてネットワークのオンラインステータスを表示し、navigator.connection を通じてネットワーク速度などのネットワークステータス情報を取得できます。

3. ネットワーク状態の変化が検出されると、ユーザーにプロンプトを表示したり、必要に応じて特別な処理を実行したりできます。

3. 関連する技術ポイントの紹介

1. オンラインの基本的な使い方

オンライン = window.navigator.onLine;

online はブール値の true または false です。

ネットワークステータスの変化をリッスンするには、addEventListener を使用してイベント window.online および window.offline をリッスンします。

次の例に示すように:

window.addEventListener('オフライン', function(e) { console.log('オフライン'); });

window.addEventListener('online', function(e) { console.log('online'); });

2. 接続の基本的な使い方

connectionInfo = navigator.connection

.downlink (ネットワークのダウンリンク速度) を含む、ネットワーク接続ステータス NetworkInformation オブジェクトを返します。

activeType (ネットワークタイプ) onchange (値はネットワークステータスの変化を表します) rtt (推定ラウンドトリップ時間)

saveData (データ保存モードのオープン/リクエスト)

3. 注意事項:

navigator.online と navigator.connection のブラウザ互換性は以下の通りですが、connection の互換性が低いことが分かり、実際の開発では注意が必要です。

4. 完全なデモ

1. デモレンダリング

2. 完全なデモコード

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