利用JavaScript實現(xiàn)檢測用戶是否在線功能

更新時間：2022年12月26日 08:34:29 作者：海擁?

這篇文章主要為大家詳細介紹了如何利用JavaScript實現(xiàn)檢測用戶是否在線功能，文中的示例代碼講解詳細，感興趣的小伙伴可以跟隨小編一起學習一下

檢測連接狀態(tài)

我們可以利用navigator.onLineAPI 來檢測連接狀態(tài)。

這將返回一個布爾值來指示用戶是否在線。

注意：請注意瀏覽器的實現(xiàn)方式不同，因此結果可能會有所不同。

這在初始加載時效果很好，所以我們可以做這樣的事情。

window.addEventListener('load', () => {
  const status = navigator.onLine;
});

但是我們不知道加載后網(wǎng)絡狀態(tài)是否發(fā)生變化，這是不理想的。

我們可以訂閱離線和在線事件來監(jiān)聽這些特定的變化。

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

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

演示

讓我們設置一個快速演示來演示這一點。

我們將在屏幕中央使用一個基本的文本元素，但你當然可以按照你喜歡的任何方式設置樣式和實現(xiàn)它。

注意：我正在使用 SCSS 來設置樣式

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

我們在默認為連接狀態(tài)的前提下構建它。

讓我們添加一些基本樣式。

.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;
  }
}

默認情況下，這只會顯示在線消息。

讓我們添加一個條件，如果狀態(tài)元素有一個離線類，我們切換兩個 div。

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

現(xiàn)在，如果我們將離線類添加到狀態(tài) div，我們應該會看到離線消息。

那么我們?nèi)绾胃鶕?jù)網(wǎng)絡狀態(tài)切換這些呢？

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);
});

是的，這段代碼可以解決問題！

我們在第一次加載時對其進行了初始化，并創(chuàng)建了一個新函數(shù)來檢查導航器狀態(tài)。

然后我們添加事件監(jiān)聽器來監(jiān)聽變化，這樣我們就可以根據(jù)它們采取行動。

在更改時，它可以添加或刪除類名。

如果我們嘗試一下，它看起來像這樣。