使用 JavaScript 检测用户是否在线

有时您可能希望增强您的应用程序以通知用户他们可能已丢失互联网连接。

用户可能正在访问您的网站并收到缓存版本，因此通常看起来他们的网络仍然正常。
然而，他们却断网了，导致任何新内容都无法加载。

这时向他们显示一些消息以让他们知道应该检查他们的连接会很有帮助。

检测连接状态

我们可以利用navigator.onLineAPI 来检测连接状态。
这将返回一个布尔值来指示用户是否在线。

注意：请注意，浏览器的实现方式不同，因此结果可能会有所不同。

这在初始加载时会非常有效，所以我们可以做这样的事情。



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

但我们不会知道加载后网络状态是否发生变化，这并不理想。

我们可以订阅线下和线上活动来了解这些具体的变化。



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

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

演示

让我们快速创建一个 demo 来演示一下。
我们将在屏幕中央使用一个基本的文本元素，当然，您可以按照自己喜欢的方式设置样式并实现它。

注意：我使用 SCSS 来设计这个



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

我们以默认为连接状态为前提来构建它。

让我们添加一些基本样式。



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

默认情况下，这将只显示在线消息。
让我们添加一个条件：如果 status 元素带有 Offline 类，则切换这两个 div。



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

现在，如果我们将离线类添加到状态 div，我们应该会看到离线消息。

那么我们如何根据网络状态切换这些呢？



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

是的，这段代码成功了！
我们在第一次加载时初始化了它，并创建了一个新函数来检查导航器的状态。

然后，我们添加事件监听器来监听这些变化，以便我们能够根据这些变化采取行动。
当发生变化时，它可以添加或删除类名。

如果我们尝试一下，它看起来像这样。

或者在这个CodePen上尝试一下。

感谢您的阅读，让我们联系起来！

感谢您阅读我的博客。欢迎订阅我的电子邮件简报，并在Facebook或Twitter上与我联系。

文章来源：https://dev.to/dailydevtips1/detecting-if-the-user-is-online-with-javascript-58ne