Javascript实现网络监测的方法


Posted in Javascript onJuly 31, 2015

本文实例讲述了Javascript实现网络监测的方法。分享给大家供大家参考。具体实现方法如下:

该代码可监测网络是否连接及网速的快慢状态。

(function(){
var network = function(){
 var monitor = this;
 /**
  * @param {Funcation} speedInterval
  */
 var speedInterval = null;
 /**
  * @param {Function} networkInterval
  */
 var networkInterval = null;
 /**
  * @param {Function} reNetworkInterval
  */
 var reNetworkInterval = null;
 var time = 5000;
 /**
  * 获取网络连接状态
  */
 var getConnectState = function(){
  return navigator.onLine ? 1 : 0;
 }; 
 /**
  * 网络中断
  */
 var disconnect = function(){
  // TODO ... 
  console.log("网速中断");
  window.clearInterval(reNetworkInterval);
  reNetworkInterval = null;
  endSpeed();
  endNetwork();
  window.setTimeout(function(){
   reNetworkInterval = window.setInterval(function(){
    if (getConnectState() == 1) {
     window.clearInterval(reNetworkInterval);
     reNetworkInterval = null;
     startSpeed();
     startNetwork();
    } else {
     window.clearInterval(reNetworkInterval);
     reNetworkInterval = null;
     disconnect();
    }
   }, time);
  }, 2 * time);
 };
 /**
  * 网络速度
  */
 var speed = {
   /**
    * 网速过慢
    */
   bad : function(){
    // TODO ... 
    console.log("网速过慢");
    window.setTimeout(function(){
     if(getConnectState() == 1) {
      window.clearInterval(networkInterval);
      networkInterval = null;
      startSpeed();
     } else {
      disconnect();
     }
    }, 2 * time);
   },
   /**
    * 网速中等
    */
   medium : function(){
    // TODO ... 
    console.log("网速中等");
   },
   /**
    * 网速极佳
    */
   great : function(){
    // TODO ... 
    console.log("网速极佳");
   }
 };
 /**
  * 开启速度监测
  * @private
  */
 var startSpeed = function(){
  window.clearInterval(speedInterval);
  speedInterval = null;
  if(getConnectState() == 1) {
   speedInterval = window.setInterval(function(){
    var start = new Date().getTime();
    if (getConnectState() == 1) {
     var img = document.getElementById("networkSpeedImage");
     if (!!!img) {
      img = document.createElement("IMG");
      img.id = "networkSpeedImage";
      img.style.display = "none";
      document.body.appendChild(img);
     }
     try {
      img.src = "http://www.baidu.com/img/baidu_jgylogo3.gif?_t=" + new Date().getTime();
      img.onload = function(){
       var end = new Date().getTime();
       var delta = end - start;
       if (delta > 200) {
        speed.bad();
       } else if (delta > 100) {
        speed.medium();
       } else {
        speed.great();
       }
      };
     } catch(e){
      speed.bad();
     }
    } else {
     // TODO 网络断开
     disconnect();
    }
   }, time);
  }else {
   // TODO 网络断开
   disconnect();
  }
 };
 /**
  * 停止速度监测
  * @private
  */
 var endSpeed = function(){
  window.clearInterval(speedInterval);
  speedInterval = null;
 };
 /**
  * 开启网络连接监测
  * @private
  */
 var startNetwork = function(){
  if (getConnectState() == 1) {
   networkInterval = window.setInterval(function(){
    if (getConnectState() == 0) {
     disconnect();
    }
   }, time);
  } else{
   disconnect();
  }
 };
 /**
  * 结束网络连接监测
  * @private 
  */
 var endNetwork = function(){
  window.clearInterval(networkInterval);
  networkInterval = null;
 };
 /**
  * 网络监控开始
  */
 this.start = function(){
  startNetwork();
  startSpeed();
 };
 /**
  * 停止网络监控
  */
 this.stop = function(){
  endSpeed();
  endNetwork();
 };
};
  window.network = new network();
}).call(this);
// 调用的时候,直接调用network.start();

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
一段利用WSH获取登录时间的jscript代码
May 11 Javascript
js判断选择的时间是否大于今天的代码
Aug 20 Javascript
跟我学习javascript的函数调用和构造函数调用
Nov 16 Javascript
跟我学习javascript的undefined与null
Nov 17 Javascript
JavaScript判断对象是否为数组
Dec 22 Javascript
noty ? jQuery通知插件全面解析
May 18 Javascript
vue自定义指令实现v-tap插件
Nov 03 Javascript
如何写好你的JavaScript【推荐】
Mar 02 Javascript
jQuery实现选项卡功能(两种方法)
Mar 08 Javascript
微信小程序实战之登录页面制作(5)
Mar 30 Javascript
webpack4简单入门实例
Sep 06 Javascript
微信小程序实现的动态设置导航栏标题功能示例
Jan 31 Javascript
jquery模拟alert的弹窗插件
Jul 31 #Javascript
JSON字符串转JSON对象
Jul 31 #Javascript
javascript实现简单的页面右下角提示信息框
Jul 31 #Javascript
JavaScript实现快速排序的方法
Jul 31 #Javascript
javascript常用正则表达式汇总
Jul 31 #Javascript
轻量级网页遮罩层jQuery插件用法实例
Jul 31 #Javascript
js实时获取并显示当前时间的方法
Jul 31 #Javascript
You might like
php 比较获取两个数组相同和不同元素的例子(交集和差集)
2019/10/18 PHP
php数组指针函数功能及用法示例
2020/02/11 PHP
图片上传判断及预览脚本的效果实例
2013/08/07 Javascript
jQuery UI插件自定义confirm确认框的方法
2015/03/20 Javascript
基于JS实现简单的样式切换效果代码
2015/09/04 Javascript
跟我学习javascript的严格模式
2015/11/16 Javascript
AngularJS 日期格式化详解
2015/12/23 Javascript
JS使用单链表统计英语单词出现次数
2016/06/16 Javascript
省市区三级联动jquery实现代码
2020/04/15 Javascript
JS 实现计算器详解及实例代码(一)
2017/01/08 Javascript
微信小程序的开发范式BeautyWe.js入门详解
2019/07/10 Javascript
Vue指令之 v-cloak、v-text、v-html实例详解
2019/08/08 Javascript
Nuxt使用Vuex的方法示例
2019/09/06 Javascript
js+canvas实现两张图片合并成一张图片的方法
2019/11/01 Javascript
详解JavaScript作用域 闭包
2020/07/29 Javascript
[01:19:34]2014 DOTA2国际邀请赛中国区预选赛 New Element VS Dream time
2014/05/22 DOTA
python学习笔记:字典的使用示例详解
2014/06/13 Python
python中的线程threading.Thread()使用详解
2019/12/17 Python
Python3列表List入门知识附实例
2020/02/09 Python
Python带参数的装饰器运行原理解析
2020/06/09 Python
Matplotlib.pyplot 三维绘图的实现示例
2020/07/28 Python
css3的transform造成z-index无效解决方案
2014/12/04 HTML / CSS
手机端用rem+scss做适配的详解
2017/11/15 HTML / CSS
PHP面试题集
2016/12/18 面试题
介绍一下linux的文件权限
2014/07/20 面试题
电子信息专业学生自荐信
2013/11/09 职场文书
竞争上岗实施方案
2014/03/21 职场文书
节能减排倡议书
2014/04/15 职场文书
庆六一文艺汇演活动方案
2014/08/26 职场文书
法人委托书范本格式
2014/09/15 职场文书
2014年纪检部工作总结
2014/11/12 职场文书
高三毕业评语
2014/12/31 职场文书
三傻大闹宝莱坞观后感
2015/06/03 职场文书
2019终止劳动合同协议书最新范本!
2019/07/09 职场文书
python 模块重载的五种方法
2021/04/24 Python
java解析XML详解
2021/07/09 Java/Android