【www.js8331.com】js_脚本之家,在线状态检查实验

背景

大熊君学习html5多级之——Online && Offline(在线状态检验),html5——online

一,开篇深入分析

Hi,大家好,给我们拜个老年!大熊君又和膏腴贵游照面了,(*^__^*卡塔尔(قطر‎嘻嘻……,那三回九转串文章首假若读书Html5有关的知识点,以念书API知识点为输入,按部就班的引进实例,让我们一步一步的体味”h5″能够做如何,以致在骨子里项目中什么去合理的应用达到使用自如,完美理解O(∩_∩)O~,好了,废话非常的少说,直接进入明天的核心,

onlineoffline 事件用来监测浏览器处于在线或离线状态。HTML5建议的离线存款和储蓄,web应用程序能够在不三回九转互连网的事态下满意顾客的一对供给,比方在线记事本。当未有连接网络,也正是offline的时候,大家得以把客商的数量保存在本地,当顾客连接到互连网的时候,也正是online,我们得以把数据发送到服务器。

 

二,栗子表明

一天性质,多个事件

(1),属性:window.navigator.onLine

navigator.onLine 属性表示方今是不是在线。借使为 true, 表示在线;要是为
false, 表示离线。当网络状态爆发变化时,navigator.onLine
的值也随着转移。开荒者能够通过读取它的值获取互连网状态。

  

if (navigator.onLine) {
  alert('online');
} else {
  alert('offline');
}

  

 (2),多少个事件

 

  window.addEventListener('online', function(){});

 

  window.addEventListener('offline',  function(){});

  当开采离线应用时,通过 navigator.onLine
获取互联网状态常常是远远不足的。开荒者还索要在互连网状态爆发变化时马上得到照看,因而HTML5 还提供了 online/offline 事件。当在线 /
离线状态切换时,online/offline 事件将触发在 body 成分上,并且沿着
document.body,document 和 window
的种种冒泡。由此,开辟者能够透过监听它们的 online/offline
事件来获悉互连网状态。

下边给叁个本人写过的完整例子,如下代码:

 

(function(win){
 function BBNetwork(callback){
  this.navigator = win.navigator ;
  this.callback = callback ;
  this._init() ;
 } ;
 var bbNetworkProto = BBNetwork.prototype ;
 bbNetworkProto._init = function(){
  var that = this ;
  win.addEventListener("online",function(){
   that._fnNetworkHandler() ;
  },true) ;
  win.addEventListener("offline",function(){
   that._fnNetworkHandler() ;
  },true) ;
 } ;
 bbNetworkProto._fnNetworkHandler = function(){
  this.callback && this.callback(this.navigator.onLine ? "online" : "offline") ;
 } ;
 bbNetworkProto.isOnline = function(){
  return this.navigator.onLine ;
 } ;
 win.BBNetwork = BBNetwork ;
})(window) ;
$(function(){
 var el = $("#h5Native") ;
 var bbNetwork = new BBNetwork(function(status){
  var tipMsg = "" ;
  if("online" != status){
   el.html("目前处于离线状态~~~~(>_<)~~~~ ").show() ;
  }
  else{
   el.hide() ;
  }
 }) ;
 if(!bbNetwork.isOnline()){
  el.html("目前处于离线状态~~~~(>_<)~~~~ ").show() ;
 }
}) ;

 

  运转效果(首先断开网络www.js8331.com 1

  www.js8331.com 2

 

 

 

支撑景况:

  桌面应用

  www.js8331.com 3

 

  移动应用

  www.js8331.com 4

 

 

三,实例分享

(1),html

 

1 <body onload="loaded()">
2   <div id="status"><p id="state"/></div>
3   <div id="log"/>
4 </body>

 

(2),css

 

1 #status { height:200px; text-align:center; }
2 #status.online { background:green; }
3 #status.offline { background:red; }
4 #log { background:yellow; border:2px solid black; white-space:pre; max-height:200px; overflow:auto; }

 

(3),js

 

 1 function updateOnlineStatus(msg) {
 2   var status = document.getElementById("status");
 3   var condition = navigator.onLine ? "ONLINE" : "OFFLINE";
 4   status.setAttribute("class", condition);
 5   var state = document.getElementById("state");
 6   state.innerHTML = condition;
 7   var log = document.getElementById("log");
 8   log.appendChild(document.createTextNode("Event: " + msg + "; status=" + condition + "n"));
 9 }
10 function loaded() {
11   updateOnlineStatus("load");
12   document.body.addEventListener("offline", function () { updateOnlineStatus("offline") }, false);
13   document.body.addEventListener("online", function () { updateOnlineStatus("online") }, false);
14 }

 

运作结果:

  www.js8331.com 5

 

 

(四),最终总计

  (1),明白Online AND Offline
Api的运用办法以至现实实例中动用的目标是为着缓和哪些难点。

  (2),掌握那句话(当开拓离线应用时,通过 navigator.onLine
获取网络状态日常是相当不足的。开垦者还亟需在互联网状态发生变化时立即获得文告,由此HTML5 还提供了 online/offline 事件。当在线 /
离线状态切换时,online/offline 事件将触及在 body 成分上,何况沿着
document.body,document 和 window
的相继冒泡。因而,开采者能够由此监听它们的 online/offline
事件来得知网络状态。)。

  (3),熟谙使用上述API,不断推行与重构文章中的栗子。

 

 

        嘿嘿,本篇甘休,未完待续,希望和权族多多交换够交换,协同提升。。。。。。呼呼呼……(*^__^*卡塔尔(قطر‎  ,
假设您感到有获得,点个推荐(⊙o⊙卡塔尔(قطر‎哦

(*^__^*) 嘻嘻嘻嘻嘻……

Offline(在线状态检查实验),html5——online 一,开篇分析Hi,大家好,给大家拜个老年!大熊君又和大户人家见面了…

日前在用Electron开垦一款应用,在那之中有关联到检查测验因特网是还是不是断开的须要。Electron基于Chromium和Node.js,让您能够选拔HTML、CSS和JavaScript营造利用。所以Electron提供nodejs、浏览器两套运维景况。

小编最早思谋到的方案HTML5提供的online/offline网络连接事件。

window.addEventListenerwindow.addEventListener

敲定极大失所望,那三个互联网连接事件,只是检查评定本地互连网连接情形。

既是浏览器没有提供检查实验因特网是否断开的接口,笔者不能不在nodejs寻求答案。

调研

聊起nodejs,小编最初想到是去npm货仓寻找现存的库。找到了四款检验因特网状态的库internet-available、is-online

internet-available

其一库检查实验因特网连接情状原理,是检查实验dns连接景况。

此间大家自然有个疑问,使用nodejs原生模块dns不是更简短吗?

你说的对的,nodejs确实提供这么的艺术,不过dns原生模块并不曾提供超时检查测试。internet-available能够安装超时参数,暗许是5000ms(信任dns-socket库实现dns超时,有意思味能够商量其源码,这里不做张开)。

internet-available使用举个例子:

var internetAvailable = require;internetAvailable{ console.log;}).catch{ console.log;

借使想出席检验次数和每趟检验超时时间,代码如下:

var internetAvailable = require;internetAvailable({ timeout: 4000, retries: 10,}).then{ console.log;}).catch{ console.log;

internet-available暗许质量评定的DNS域名是google.com,借使想自定义域名,代码如下:

var internetAvailable = require;internetAvailable({ domainName: "xxxxx.com", port: 53, host: '8.8.8.8' // 默认,国内请改成114.114.114.114}).then => { console.log;}).catch => { console.log;

备考:8.8.8.8是Google公司提供的免费DNS服务器,该地点是全球通用,相对来讲,更合乎国外以致会见国外网址的顾客接纳,国内更符合用114.114.114.114。

is-online

is-online与internet-available检测方法同样,独一区别是is-online可以在nodejs和浏览器遭遇同临时候运营。在浏览器景况下,通过navigator.onLine重返网络连接状态,但与HTML5
online、offline事件相通,只可以检查测量试验本地连接。

is-online使用比如

const isOnline = require; isOnline().then(online => { if{ console.log; }else{ console.log("Houston we have a problem"); }});

此库也提供超时设置,且能够设置Internet契约版本,那是叁个平时没有必要设置的尖端选项,但它对于非常断言IPv6连接特别常有用,代码如下:

var isOnline = require; isOnline({ timeout: 5000, version: "v4" // v4 or v6}).then(online => { if{ console.log; }else{ console.log;

总结

除开上述四个库,还应该有别的方法能够检查评定因特网断开吗?小编近期想到的还足以透过发起http
head诉求是还是不是成功响应剖断;通过ping
目的host也许domain是或不是衔接检查实验推断。假设有越来越好的办法,接待研究~

好了,以上正是那篇小说的全体内容了,希望本文的故事情节对大家的读书大概干活有着一定的参谋学习价值,谢谢大家对剧本之家的支撑。

发表评论

电子邮件地址不会被公开。 必填项已用*标注