Javascript实现网络监测的方法

 更新时间:2015年07月31日 11:42:11   作者:JUNQIANGWEI  
这篇文章主要介绍了Javascript实现网络监测的方法,可实现检测网络连接及网速的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下

本文实例讲述了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关键字加亮加连接

    我想在页面里把想要的关键词加亮凸出(用颜色区分出来)显示,这样让客户一眼能看到重的东西,然后在加亮的关键词上可以加上超连接.请问高手们怎么实现宋的功能.就像搜索引擎的那种..搜索关键词的时候就显示红色的.
    2008-06-06
  • 使用原生JS实现弹出层特效

    使用原生JS实现弹出层特效

    这篇文章主要介绍了使用原生JS实现弹出层特效,需要的朋友可以参考下
    2014-12-12
  • js实现上传图片及时预览

    js实现上传图片及时预览

    这篇文章主要为大家详细介绍了js实现上传图片及时预览的相关资料,具有一定的参考价值,感兴趣的朋友可以参考一下
    2016-05-05
  • JavaScript作用域与作用域链使用重点讲解

    JavaScript作用域与作用域链使用重点讲解

    当代码在一个环境中执行时,会创建变量对象的一个作用域链,作用域链的用途是保证对执行环境有权访问的所有变量和函数的有序访问,下面这篇文章主要给大家介绍了关于JavaScript作用域与作用域链的相关资料,需要的朋友可以参考下
    2022-10-10
  • webpack使用Symbol.toStringTag(Symbol.toStringTag用法)

    webpack使用Symbol.toStringTag(Symbol.toStringTag用法)

    Symbol.toStringTag是一个内置 symbol,它通常作为对象的属性键使用,对应的属性值应该为字符串类型,这个字符串用来表示该对象的自定义类型标签,这篇文章主要介绍了webpack使用Symbol.toStringTag(Symbol.toStringTag用法),需要的朋友可以参考下
    2024-02-02
  • js使用cookie实现记住用户名功能示例

    js使用cookie实现记住用户名功能示例

    这篇文章主要介绍了js使用cookie实现记住用户名功能,涉及javascript操作cookie读写及删除实现用户名的保存功能,需要的朋友可以参考下
    2019-06-06
  • JavaScript数组,JSON对象实现动态添加、修改、删除功能示例

    JavaScript数组,JSON对象实现动态添加、修改、删除功能示例

    这篇文章主要介绍了JavaScript数组,JSON对象实现动态添加、修改、删除功能,结合实例形式分析了JavaScript针对json数组的添加、删除、修改操作实现技巧,需要的朋友可以参考下
    2018-05-05
  • JavaScript面向对象之体会[总结]

    JavaScript面向对象之体会[总结]

    看过很多JavaScript书,对JavaScript的面向对象讲的都比较深入,但是并没有做到深入浅出,总结了我做的一些JavaScript程序的经验,以简洁明了的文字使大家明白JavaScript面向对象的实现。
    2008-11-11
  • js数据类型检测总结

    js数据类型检测总结

    这篇文章给大家分享了js数据类型检测的相关实例内容,有需要的朋友可以测试下。
    2018-08-08
  • img标签中onerror用法

    img标签中onerror用法

    可是这会引起再因网络原因或其他原因使图片不能正常加载的话 这样就是再次调用onerror,基于微软的一套核心的浏览器就会认为这是死循环
    2009-08-08

最新评论