乐趣区

关于javascript:用JavaScript检测用户是否在线

微信搜寻【大迁世界】, 我会第一工夫和你分享前端行业趋势,学习路径等等。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录,有一线大厂面试残缺考点、材料以及我的系列文章。

有时候,咱们须要晓得以后网络的状态来做一些事件,以晋升用户体验,这节课,咱们来看一下,如何应用 JavaScript 来检测用户是否在线。

检测连贯状态

咱们能够利用 navigator.onLine API 来检测连贯状态,它返回一个布尔值来示意用户是否在线。

留神:请留神各浏览器的实现形式不同,因而后果可能不同。

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

这种形式,咱们不晓得加载后网络状态是否发生变化,这并不现实。

咱们能够订阅 offlineonline 事件,来监听这些具体的变动:

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/pen/PoaQjqr

编辑中可能存在的 bug 没法实时晓得,预先为了解决这些 bug, 花了大量的工夫进行 log 调试,这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。

原文:https://dev.to/dailydevtips1/detecting-if-the-user-is-online-with-javascript-58ne

交换

有幻想,有干货,微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录,有一线大厂面试残缺考点、材料以及我的系列文章。

退出移动版