ribbon image search rewind fast-forward speech-bubble pie-graph star

使用 JavaScript 探测网络状态

同步 https://medium.com/@JackPu/how-javascript-detect-the-network-status-42f3a6d85f96

在某些情况下,我们的开发者需要指导是否由于网络中断的原因导致 request 失败。 以及我们需要网络重新连接后,我们需要执行一些代码。

naviagtor.onLine 是一个非常好实用的 API. 它可以告诉开发者现在网络是连接还是断开的状态。并且它已经覆盖了绝大多数现代浏览器。

navigator.onLine caniuse figures

而在比较老的 IE8 浏览器,我们小使用 online 事件进行监听。

document.addEventListenner(‘online’, () => {  
// todo
});
document.addEventListenner(‘offline’, () => {  
// todo 
})

网络心跳检测

然后很早的时候,很多浏览器还不支持 naviagtor.onLine。开发者只能通过 XHRImage 发送心跳轮询来判断是否还处在网络连接的状态。

const pingUrl = ‘https://ipv4.icanhazip.com';

fetch(`${pingUrl}?_t=` + parseInt(Math.random() * 10000)).then((result) => {  
   // todo online
 }).catch((err) => {
 // console.log(err);
 if (err.message.indexOf(‘Failed to fetch’) !== -1 ) {
   // todo offline
 }
 })

这种方案至今可以用在不支持上面的特性或者你的代码运行在 Node.js 环境中使用。

And navigator.connection help us get some basic connection information like speed or other metrics.

而随着浏览器的不断升级,新的 API navigator.connection 让开发者可以知道更多的链接信息,比如当前速度的快慢。

const networkType = navigator.connection.effectiveType  
// return ‘3g’, ‘4g’, ‘2g’

这是非常不错的功能, 但是 😿 目前只有 Chrome 可以访问到。

navigator.connection caniuse figure

不过,我们依旧可以尝试别的方法。我们可以通过 《预估网速》 来判断当前网络速度大致快慢。

const start = Date.now();  
fetch(url, {}).then((result) => {  
 const end = Date.now();
 const bw = length / (end — start) * 8000; 
 // check the bw
})

Network-heart-service

因此自己总结了一下,发布了一个第三方模块 (network-heart-service),用于处理网络变化的情况。你可以使用它来处理网络断开或者判断当前网络的状况。

简单看下如何使用它。

$ npm install network-heart-service -save
// es6
import NetworkHeartService from 'network-heart-service';  
this.networkHeartService = new NetworkHeartService({  
 heartMode: 'auto',
 reconnect() {
   console.log(‘TODO …’)
 }
});
this.networkHeartService.start();

基本的 Config。

  • heartMode { number } 2000 用于确定心跳模式,默认为步长递增,如果指定为具体的数字的话,则会进行等时长轮询。

  • lowSpeedNetwork { function }

    当网速变慢时的回调

  • reconnect { function }

    当网络重新建立连接时候的回调

  • offline { function }

    当网络离线时候的回调。

API

  • isOnline()

    判断当前网络是否连接。

    js const isOnline = await NetworkHeartService.isOnline(); // true or false

  • start() 以及 stop()

    启动或者暂停心跳服务。

希望它可以帮到你,也欢迎大家提 issues

You Can Speak "Hi" to Me in Those Ways