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

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

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

檢測連接狀態(tài)

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

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

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

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

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

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

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

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

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

演示

讓我們設(shè)置一個(gè)快速演示來演示這一點(diǎn)。

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

注意：我正在使用 SCSS 來設(shè)置樣式

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

我們在默認(rèn)為連接狀態(tài)的前提下構(gòu)建它。

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

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

默認(rèn)情況下，這只會(huì)顯示在線消息。

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

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

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

那么我們?nèi)绾胃鶕?jù)網(wǎng)絡(luò)狀態(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);
});

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

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

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

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

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