用JavaScript檢測使用者是否線上

前端小智發表於2023-01-10
JavaScript
微信搜尋 【大遷世界】, 我會第一時間和你分享前端行業趨勢，學習途徑等等。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收錄，有一線大廠面試完整考點、資料以及我的系列文章。

有時候，我們需要知道當前網路的狀態來做一些事情，以提升使用者體驗，這節課，我們來看一下，如何使用 JavaScript 來檢測使用者是否線上。

檢測連線狀態

我們可以利用navigator.onLine API來檢測連線狀態，它返回一個布林值來表示使用者是否線上。

注意：請注意各瀏覽器的實現方式不同，因此結果可能不同。
window.addEventListener('load', () => {
  const status = navigator.onLine;
});

這種方式，我們不知道載入後網路狀態是否發生變化，這並不理想。

我們可以訂閱 offline 和 online 事件，來監聽這些具體的變化：

window.addEventListener('offline', (e) => {
  console.log('offline');
});

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

事例

我們透過一個背景色的變化來演示當前的網路狀態：

<div class="status">
  <div class="offline-msg">You're offline ?</div>
  <div class="online-msg">You're connected ?</div>
</div>

對應的 css:

.status {
  background: #efefef;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  div {
    padding: 1rem 2rem;
    font-size: 3rem;
    border-radius: 1rem;
    color: white;
    font-family: Roboto, 'Helvetica Neue', Arial, sans-serif;
  }
  .online-msg {
    background: green;
    display: block;
  }
  .offline-msg {
    background: red;
    display: none;
  }
}

預設情況下，顯示線上資訊。然後我們新增一個條件，如果狀態元素有一個 offline 類，我們就切換這兩個div。

.status {
  &.offline {
    .online-msg {
      display: none;
    }
    .offline-msg {
      display: block;
    }
  }
}

那麼，我們如何根據網路狀態來切換呢：

const status = document.querySelector('.status');
window.addEventListener('load', () => {
  const handleNetworkChange = () => {
    if (navigator.onLine) {
      status.classList.remove('offline');
    } else {
      status.classList.add('offline');
    }
  };

  window.addEventListener('online', handleNetworkChange);
  window.addEventListener('offline', handleNetworkChange);
});

程式碼很簡單，這裡就不過多的介紹了。

事例地址：https://codepen.io/rebelchris...

編輯中可能存在的bug沒法實時知道，事後為了解決這些bug,花了大量的時間進行log 除錯，這邊順便給大家推薦一個好用的BUG監控工具 Fundebug。

原文：https://dev.to/dailydevtips1/...

交流

有夢想，有乾貨，微信搜尋 【大遷世界】 關注這個在凌晨還在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收錄，有一線大廠面試完整考點、資料以及我的系列文章。

相關文章