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 相关文章推荐
动态加载iframe
Jun 16 Javascript
javascript 触发事件列表 比较不错
Sep 03 Javascript
JavaScript根据数据生成百分比图和柱状图的实例代码
Jul 14 Javascript
js和html5实现手机端刮刮卡抽奖效果完美兼容android/IOS
Nov 18 Javascript
AngularJS入门教程之双向绑定详解
Aug 18 Javascript
jQuery回调方法使用示例
Jun 26 jQuery
jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法
Dec 05 jQuery
开发一个Parcel-vue脚手架工具(详细步骤)
Sep 22 Javascript
vue.js引入外部CSS样式和外部JS文件的方法
Jan 06 Javascript
vue实现短信验证码输入框
Apr 17 Javascript
详解Vue之计算属性
Jun 20 Javascript
原生js滑动轮播封装
Jul 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
SONY SRF-40W电路分析
2021/03/02 无线电
pw的一个放后门的方法分析
2007/10/08 PHP
discuz加密解密函数使用方法和中文注释
2014/01/21 PHP
浅谈PHP5.6 与 PHP7.0 区别
2019/10/09 PHP
利用javascript实现一些常用软件的下载导航
2009/08/03 Javascript
向大师们学习Javascript(视频与PPT)
2009/12/27 Javascript
js中设置元素class的三种方法小结
2011/08/28 Javascript
jQuery操作 input type=checkbox的实现代码
2012/06/14 Javascript
JavaScript通过RegExp实现客户端验证处理程序
2013/05/07 Javascript
jquery对单选框,多选框,文本框等常见操作小结
2014/01/08 Javascript
简单的js图片轮换代码(js图片轮播)
2014/05/06 Javascript
nodejs URL模块操作URL相关方法介绍
2015/03/03 NodeJs
利用JQuery写一个简单的异步分页插件
2016/03/07 Javascript
jQuery焦点图轮播效果实现方法
2016/12/19 Javascript
解决bootstrap下拉菜单点击立即隐藏bug的方法
2017/06/13 Javascript
jQuery.form.js的使用详解
2017/06/14 jQuery
基于JS实现仿京东搜索栏随滑动透明度渐变效果
2017/07/10 Javascript
详解win7 cmd执行vue不是内部命令的解决方法
2017/07/27 Javascript
AngularJS 中ui-view传参的实例详解
2017/08/25 Javascript
微信小程序 页面滑动事件的实例详解
2017/10/12 Javascript
浅析Angular19 自定义表单控件
2018/01/31 Javascript
JavaScript格式化json和xml的方法示例
2019/01/22 Javascript
[49:42]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#2Secret VS EG第一局
2016/03/04 DOTA
python基础教程之lambda表达式使用方法
2014/02/12 Python
python kmeans聚类简单介绍和实现代码
2018/02/23 Python
Python实用技巧之列表、字典、集合中根据条件筛选数据详解
2018/07/11 Python
树莓派使用python-librtmp实现rtmp推流h264的方法
2019/07/22 Python
python 3.8.3 安装配置图文教程
2020/05/21 Python
PyCharm vs VSCode,作为python开发者,你更倾向哪种IDE呢?
2020/08/17 Python
pycharm 使用anaconda为默认环境的操作
2021/02/05 Python
如何在Cookie里面保存Unicode和国际化字符
2013/05/25 面试题
计算机专业职业规划
2014/02/28 职场文书
企业宣传口号
2014/06/12 职场文书
调任通知
2015/04/21 职场文书
交通安全宣传标语(100条)
2019/08/22 职场文书
pytorch fine-tune 预训练的模型操作
2021/06/03 Python