关于前端:用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 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。