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 相关文章推荐
firefo xml 读写实现js代码
Jun 11 Javascript
parseInt parseFloat js字符串转换数字
Aug 01 Javascript
jquery提升性能最佳实践小结
Dec 06 Javascript
JQuery插件fancybox无法在弹出层使用左右键的解决办法
Dec 25 Javascript
json的使用小结
Jun 08 Javascript
js 实现数值的千分位及保存小数方法(推荐)
Aug 01 Javascript
bootstrapValidator 重新启用提交按钮的方法
Feb 20 Javascript
EasyUI的TreeGrid的过滤功能的解决思路
Aug 08 Javascript
详解http访问解析流程原理
Oct 18 Javascript
jQuery第一次运行页面默认触发点击事件的实例
Jan 10 jQuery
JavaScript中arguments和this对象用法分析
Aug 08 Javascript
fetch 如何实现请求数据
Dec 20 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 addslashes 函数详细分析说明
2009/06/23 PHP
浅析PHP文件下载原理
2014/12/25 PHP
PHP排序算法之基数排序(Radix Sort)实例详解
2018/04/21 PHP
php使用fullcalendar日历插件详解
2019/03/06 PHP
3分钟写出来的Jquery版checkbox全选反选功能
2013/10/23 Javascript
Jquery实现由下向上展开效果的例子
2014/12/08 Javascript
nodejs中的fiber(纤程)库详解
2015/03/24 NodeJs
Javascript设计模式理论与编程实战之简单工厂模式
2015/11/03 Javascript
javascript数组克隆简单实现方法
2015/12/16 Javascript
属于你的jQuery提示框(Tip)插件
2016/01/20 Javascript
JS中判断字符串中出现次数最多的字符及出现的次数的简单实例
2016/06/03 Javascript
[原创]javascript typeof id==='string'?document.getElementById(id):id解释
2016/11/02 Javascript
使用JavaScript触发过渡效果的方法
2017/01/19 Javascript
jQuery插件Echarts实现的双轴图效果示例【附demo源码下载】
2017/03/04 Javascript
Vue响应式原理详解
2017/04/18 Javascript
Bootstrap table学习笔记(2) 前后端分页模糊查询
2017/05/18 Javascript
微信小程序实现点击返回顶层的方法
2017/07/12 Javascript
JavaScript中立即执行函数实例详解
2017/11/04 Javascript
详解vue axios二次封装
2018/07/22 Javascript
原生JS实现动态加载js文件并在加载成功后执行回调函数的方法
2020/12/30 Javascript
vue如何进行动画的封装
2018/09/26 Javascript
nodejs实现范围请求的实现代码
2018/10/12 NodeJs
python操作MySQL 模拟简单银行转账操作
2017/09/27 Python
python在线编译器的简单原理及简单实现代码
2018/02/02 Python
django 实现电子支付功能的示例代码
2018/07/25 Python
利用Python如何实现一个小说网站雏形
2018/11/23 Python
详解Python正则表达式re模块
2019/03/19 Python
Django 导出项目依赖库到 requirements.txt过程解析
2019/08/23 Python
激光脱毛、蓝光和护肤:Tria Beauty
2019/03/28 全球购物
UDP协议功能
2013/01/06 面试题
五年后的职业生涯规划
2014/03/04 职场文书
活动总结的格式
2014/05/07 职场文书
城市创卫标语
2014/06/17 职场文书
目标责任书格式范文
2015/05/11 职场文书
感恩教师主题班会
2015/08/12 职场文书
Nginx搭建rtmp直播服务器实现代码
2021/03/31 Servers