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之学会吝啬 精简代码
Apr 25 Javascript
基于jQuery的简单的列表导航菜单
Mar 02 Javascript
Extjs中ComboBox加载并赋初值的实现方法
Mar 22 Javascript
jquery数据验证插件(自制,简单,练手)实例代码
Oct 24 Javascript
谈谈JavaScript数组常用方法总结
Jan 24 Javascript
jQuery移除或禁用html元素点击事件常用方法小结
Feb 10 Javascript
Bootstrap页面标题Page Header的实现方法
Mar 22 Javascript
node.js平台下的mysql数据库配置及连接
Mar 31 Javascript
基于jQuery Easyui实现登陆框界面
Jul 10 jQuery
layer.open关闭父窗口 以及调用父页面的方法
Aug 17 Javascript
详解关于Vue2.0路由开启keep-alive时需要注意的地方
Sep 18 Javascript
vue项目中使用AES实现密码加密解密(ECB和CBC两种模式)
Aug 12 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
mantis安装、配置和使用中的问题小结
2014/07/14 PHP
微信公众号开发之获取位置信息php代码
2018/06/13 PHP
prototype 源码中文说明之 prototype.js
2006/09/22 Javascript
setTimeout和setInterval的浏览器兼容性分析
2007/02/27 Javascript
ExtJS 2.0实用简明教程 之获得ExtJS
2009/04/29 Javascript
浅谈javascript的数据类型检测
2010/07/10 Javascript
关于图片按比例自适应缩放的js代码
2011/10/30 Javascript
JS事件在IE与FF中的区别详细解析
2013/11/20 Javascript
使用angular写一个hello world
2015/01/23 Javascript
jQuery Ajax 全局调用封装实例代码详解
2016/06/02 Javascript
javascript数据结构之串的概念与用法分析
2017/04/12 Javascript
基于vue.js路由参数的实例讲解——简单易懂
2017/09/07 Javascript
vue.js 底部导航栏 一级路由显示 子路由不显示的解决方法
2018/03/09 Javascript
vue2.0 移动端实现下拉刷新和上拉加载更多的示例
2018/04/23 Javascript
小程序如何使用分包加载的实现方法
2019/05/22 Javascript
json数据格式常见操作示例
2019/06/13 Javascript
原生js实现弹窗消息动画
2020/11/20 Javascript
[03:02]2020完美世界城市挑战赛(秋季赛)总决赛回顾
2021/03/11 DOTA
Python实现二叉搜索树
2016/02/03 Python
python给微信好友定时推送消息的示例
2019/02/20 Python
python实现字符串完美拆分split()的方法
2019/07/16 Python
使用Python FastAPI构建Web服务的实现
2020/06/08 Python
Django如何实现密码错误报错提醒
2020/09/04 Python
python 监控服务器是否有人远程登录(详细思路+代码)
2020/12/18 Python
加拿大票务网站:Ticketmaster加拿大
2017/07/17 全球购物
香港百佳网上超级市场:PARKNSHOP.com
2020/06/10 全球购物
保密工作实施方案
2014/02/24 职场文书
小学班主任培训方案
2014/06/04 职场文书
2014年秋季开学典礼致辞
2014/08/02 职场文书
咖啡厅商业计划书
2014/09/15 职场文书
2015年销售人员工作总结
2015/04/07 职场文书
保密法制宣传月活动总结
2015/05/07 职场文书
物业保安辞职信
2015/05/12 职场文书
Python实现打乒乓小游戏
2021/09/25 Python
深入讲解Vue中父子组件通信与事件触发
2022/03/22 Vue.js
Spring Bean是如何初始化的详解
2022/03/22 Java/Android