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 相关文章推荐
JavaScript的Function详细
Nov 14 Javascript
使用jQuery.Validate进行客户端验证(初级篇) 不使用微软验证控件的理由
Jun 28 Javascript
JavaScript编程开发中的五个实用小技巧
Jul 22 Javascript
JQuery FlexiGrid的asp.net完美解决方案 dotNetFlexGrid-.Net原生的异步表格控件
Sep 12 Javascript
基本jquery的控制tabs打开的数量的代码
Oct 17 Javascript
Node.js文件操作详解
Aug 16 Javascript
JS实现生成会变大变小的圆环实例
Aug 05 Javascript
浅析jQuery事件之on()方法绑定多个选择器,多个事件
Apr 27 Javascript
第一次动手实现bootstrap table分页效果
Sep 22 Javascript
angular使用post、get向后台传参的问题实例
May 27 Javascript
js实现可以点击收缩或张开的悬浮窗
Sep 18 Javascript
Vue2.0搭建脚手架
Mar 13 Vue.js
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语法基础
2016/01/01 PHP
Smarty模板语法详解
2019/07/20 PHP
下载站控制介绍字数显示的脚本 显示全部 隐藏介绍等功能
2009/09/19 Javascript
javascript 处理事件绑定的一些兼容写法
2009/12/24 Javascript
javascript学习笔记(十四) window对象使用介绍
2012/06/20 Javascript
javascript中的onkeyup和onkeydown区别介绍
2013/04/28 Javascript
了解了这些才能开始发挥jQuery的威力
2013/10/10 Javascript
js转义字符介绍
2013/11/05 Javascript
jquery ajax jsonp跨域调用实例代码
2013/12/11 Javascript
JavaScript四种调用模式和this示例介绍
2014/01/02 Javascript
JavaScript中判断变量是数组、函数或是对象类型的方法
2015/02/25 Javascript
Clipboard.js 无需Flash的JavaScript复制粘贴库
2015/10/02 Javascript
Vue.js仿Metronic高级表格(一)静态设计
2017/04/17 Javascript
jquery 通过ajax请求获取后台数据显示在表格上的方法
2018/08/08 jQuery
jQuery中实现text()的方法
2019/04/04 jQuery
JavaScript实现HSL拾色器
2020/05/21 Javascript
JQuery基于FormData异步提交数据文件
2020/09/01 jQuery
[32:07]完美世界DOTA2联赛PWL S3 LBZS vs Rebirth 第一场 12.16
2020/12/17 DOTA
C#返回当前系统所有可用驱动器符号的方法
2015/04/18 Python
详解Python的单元测试
2015/04/28 Python
Python3生成手写体数字方法
2018/01/30 Python
python调用matlab的m自定义函数方法
2019/02/18 Python
Python 合并拼接字符串的方法
2020/07/28 Python
css3的过滤效果简单实例
2016/08/03 HTML / CSS
英国最大的线上保健品零售商之一:Vitamin Planet
2016/12/01 全球购物
车间调度岗位职责
2013/11/30 职场文书
先进个人获奖感言
2014/01/24 职场文书
小学国庆节活动方案
2014/02/11 职场文书
《要下雨了》教学反思
2014/02/17 职场文书
重点工程汇报材料
2014/08/27 职场文书
2014年重阳节活动策划方案书
2014/09/16 职场文书
专职安全员岗位职责
2015/04/11 职场文书
初中毕业生感言
2015/07/31 职场文书
浅谈MySQL user权限表
2021/06/18 MySQL
WCG2010 星际争霸决赛 Flash vs Goojila 1 星际经典比赛回顾
2022/04/01 星际争霸
js 实现验证码输入框示例详解
2022/09/23 Javascript