navigator.onLine 注意
这种方式只支持Web环境
NetWork API:http://wicg.github.io/netinfo/
navigator.onLine只会在机器未连接到局域网或路由器时返回false,其他情况下均返回true。
也就是说,机器连接上路由器后,即使这个路由器没联通网络,navigator.onLine仍然返回true。
判断网络连接的网络状态
1 2 3 4 5 if (navigator.onLine) { alert('online' ) } else { alert('offline' ); }
想要监听浏览器的联网状态, 使用window.onOnline和window.onOffline事件:
1 2 window .addEventListener("offline" , function (e ) {alert("offline" );})window .addEventListener("online" , function (e ) {alert("online" );})
更为安全的做法:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 var el = document .body; if (el.addEventListener) { window .addEventListener("online" , function ( ) { alert("online" );}, true ); window .addEventListener("offline" , function ( ) { alert("offline" );}, true ); } else if (el.attachEvent) { window .attachEvent("ononline" , function ( ) { alert("online" );}); window .attachEvent("onoffline" , function ( ) { alert("offline" );}); } else { window .ononline = function ( ) { alert("online" );}; window .onoffline = function ( ) { alert("offline" );}; }
注意,检测ononline事件,要绑定在window对象上
attachEvent——兼容:IE7、IE8;不兼容firefox、chrome、IE9、IE10、IE11、safari、opera
addEventListener——兼容:firefox、chrome、IE、safari、opera;不兼容IE7、IE8
is-online(Web推荐) 注意
这种方式同时支持NodeJS和Web环境
安装依赖
1 npm install is-online --save
工具类
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 const isOnline = require ('is-online' );let network_good = true ;function network_check_timer_fun ( ) { console .info("network check start" ) setInterval(() => { network_check(); }, 6000 ) } function network_check ( ) { isOnline({ timeout: 6000 , version: "v4" }).then(online => { if (online) { if (!network_good) { network_good = true ; console .info("network good" ); if (homeWin && !homeWin.isDestroyed()) { homeWin.webContents.send('network_check' , network_good); } } } else { console .info("network bad" ) network_good = false ; if (homeWin && !homeWin.isDestroyed()) { homeWin.webContents.send('network_check' , network_good); } } }); } network_check_timer_fun();
internet-available(NodeJS推荐) 注意
这种方式只支持NodeJS环境
相比于is-online,这个可以自定义DNS服务器的地址,这样不会因为使用国外的地址而导致网络状态判断不正确。
这个库检测因特网连接状态原理,是检测dns连接状态。
这里大家肯定有个疑问,使用nodejs原生模块dns不是更简洁吗?
你说的没错,nodejs确实提供这样的方法,但是dns原生模块并没有提供超时检测。internet-available可以设置超时参数,默认是5000ms
安装依赖
1 npm install internet-available --save
示例代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 const internetAvailable = require ("internet-available" );let network_good = true ;function network_check ( ) { internetAvailable({ domainName: "www.baidu.com" , port: 53 , host: '223.5.5.5' , retries: 10 , timeout: 8000 , }).then(() => { if (!network_good) { network_good = true ; console .info("network good" ); if (homeWin && !homeWin.isDestroyed()) { homeWin.webContents.send('network_check' , network_good); } } }).catch(() => { console .info("network bad" ) network_good = false ; if (homeWin && !homeWin.isDestroyed()) { homeWin.webContents.send('network_check' , network_good); } }); } function network_check_timer_fun ( ) { console .info("network check start" ) setInterval(() => { network_check(); }, 10000 ) } network_check_timer_fun();
注意
端口53不是网址的端口是DNS服务的端口,DNS 协议运行在 UDP 协议之上,使用 端口号53 。
超时时间和重试次数
1 2 3 4 5 6 7 8 9 10 11 12 13 var internetAvailable = require ("internet-available" );internetAvailable({ timeout: 5000 , retries: 5 }).then(() => { console .log("Internet available" ); }).catch(() => { console .log("No internet" ); });
默认值在源码中可以看到
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 var socket = dns({ timeout: (settings.timeout || 5000 ), retries: (settings.retries || 5 ) }); socket.query( { questions: [{ type: 'A' , name: (settings.domainName || "google.com" ) }] }, (settings.port || 53 ), (settings.host || '8.8.8.8' ) );
默认
超时时间:5秒
重试次数:5
域名:google.com
端口:53
DNS:8.8.8.8