使用 JavaScript 探测网络状态

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

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

naviagtor.onLine

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

navigator.onLine caniuse figures

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

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

网络心跳检测

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

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 环境中使用。

navigator.connection

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’

这是非常不错的功能， 但是 :crying_cat_face: 目前只有 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()

判断当前网络是否连接。

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

start() 以及 stop()

启动或者暂停心跳服务。

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