前端网络监控与断网重链入门攻略_网络基础教程

业务背景最近在做大屏数据可视化项目得时候,在思考项目交付和运行情况得时候,考虑到了需要在公司大屏显示器上面展示,突然想到了项目可能面临断网及其网速慢得情况下得一下展示问题,因此作为专栏进行这两个问题得讲解问题一 WebSocket 在网络终端和重新联网后自动链接**知识点: ** 理解WebSocket心跳及重连机制在使用websocket的过程中,有时候会

前端网络监控与断网重链入门攻略

业务背景

最近在做大屏数据可视化项目得时候,在思考项目交付和运行情况得时候,考虑到了需要在公司大屏显示器上面展示,突然想到了项目可能面临断网及其网速慢得情况下得一下展示问题,因此作为专栏进行这两个问题得讲解

前端网络监控与断网重链入门攻略_网络基础教程

问题一 WebSocket 在网络终端和重新联网后自动链接

**知识点: ** 理解WebSocket心跳及重连机制

在使用websocket的过程中,有时候会遇到网络断开的情况,但是在网络断开的时候服务器端并没有触发onclose的事件。这样会有:服务器会继续向客户端发送多余的链接,并且这些数据还会丢失。所以就需要一种机制来检测客户端和服务端是否处于正常的链接状态。因此就有了websocket的心跳了。还有心跳,说明还活着,没有心跳说明已经挂掉了。

  • 为什么叫心跳包呢? 它就像心跳一样每隔固定的时间发一次,来告诉服务器,我还活着。
  • 心跳机制是?

心跳机制是每隔一段时间会向服务器发送一个数据包,告诉服务器自己还活着,同时客户端会确认服务器端是否还活着,如果还活着的话,就会回传一个数据包给客户端来确定服务器端也还活着,否则的话,有可能是网络断开连接了。需要重连~

那么需要怎么去实现它呢?如下所有代码:

let ws = null,
	wsUrl = "ws://xxx/rest/api/websocket",
    lockReconnect = false,
    tt = null,
    that = this;
	function MonitorWebSocket(wsUrl){
		this.timeout = 3000;
		this.timeoutObj = null;
		this.serverTimeoutObj= null;
		
		try {
			ws = new WebSocket(wsUrl);
			this.init(wsUrl);
		} catch(e) {
			console.log('catch');
			this.reconnect(wsUrl);
		}
	}
	MonitorWebSocket.prototype.init = function (wsUrl) {
		ws.onopen = () => {
			 //心跳检测重置
			that.navigatorStatus()
			// console.log("client:打开连接-心跳检测开启");
    		this.heartCheckStart();
		};
		ws.onmessage = e => {
			// 拿到任何消息都说明当前连接是正常的
			// console.info('onmessage---->接收到消息');
			this.heartCheckStart();
			that.list = JSON.parse(e.data).data;
			that.list.todayData && that.$emit("changePointStatus",that.list.todayData)	
		};
		ws.onclose = params => {
			// console.log('链接关闭');
    		this.reconnect(wsUrl);
		};
		ws.onerror = function(e) {
			// console.log('发生异常了');
    		this.reconnect(wsUrl);
		};
	}
	MonitorWebSocket.prototype.reconnect = function(wsUrl) {
		if(lockReconnect) {
			return;
		};
		lockReconnect = true;
		//没连接上会一直重连,设置延迟避免请求过多
		tt && clearTimeout(tt);
		tt = setTimeout(function () {
			(function(){
				// console.info("重新连接")
				new MonitorWebSocket(wsUrl);
			})()
			lockReconnect = false;
		}, 5000);
	}
	MonitorWebSocket.prototype.heartCheckStart = function() {
		// console.log('心跳检测开始');
		this.timeoutObj && clearTimeout(this.timeoutObj);
		this.serverTimeoutObj && clearTimeout(this.serverTimeoutObj);
		this.timeoutObj = setTimeout(function(){
			//这里发送一个心跳,后端收到后,返回一个心跳消息,
			// console.log('启动心跳');
			ws.send("test");
			this.serverTimeoutObj = setTimeout(function() {
				ws.close();
			}, this.timeout);

		}, this.timeout)
	}
	let linkMarket = new MonitorWebSocket(wsUrl);

归纳与总结

实现心跳检测的思路是:每隔一段固定的时间,向服务器端发送一个ping数据,如果在正常的情况下,服务器会返回一个pong给客户端,如果客户端通过 onmessage事件能监听到的话,说明请求正常,这里我们使用了一个定时器,每隔3秒的情况下,如果是网络断开的情况下,在指定的时间内服务器端并没有返回心跳响应消息,因此服务器端断开了,因此这个时候我们使用ws.close关闭连接,在一段时间后(在不同的浏览器下,时间是不一样的,firefox响应更快), 可以通过 onclose事件监听到。因此在onclose事件内,我们可以调用 reconnect事件进行重连操作。

问题二 如何创建一个Javascript页面来检测用户的互联网速度并在页面上显示它?

**知识点: ** 网速测试方法得核心思想

不管通过什么方式,一般都是通过下载一个文件,然后用文件的大小除以所耗时间,就是你的本地网络速度了。

这里介绍的是一个最常被使用的,又是最简单的方法。

let speed = {
	status: 3,
},
that = this;
function Network () {
	this.speedInterval = null;
	this.networkInterval = null;
	this.reNetworkInterval = null;
	this.time = 5000;
	this.speedStauts = null;
	this.getConnectState = function() {
		return navigator.onLine ? 1 : 0;
	}
	this.getSpeedStauts = function(){
	return this.speedStauts;
	}
}
// 网络速度检测
Network.prototype.startSpeed = function (){
	window.clearInterval(this.speedInterval);
	this.speedInterval = null;
	let that = this;
	if(this.getConnectState() == 1){
		this.speedInterval = window.setInterval(function(){
			let start = new Date().getTime();
			if(that.getConnectState() == 1){
				let img = document.getElementById("networkSpeedImage");
				try{
				img.src = "http://www.baidu.com/img/baidu_jgylogo3.gif?_t=" + new Date().getTime();
				img.onload = function(){
					let end = new Date().getTime();
					let delta = end - start;
					console.info("delta====>",delta)
					if (delta > 200) {
					console.info("凑活")
					speed.status= 1;
					} else if (delta > 100) {
					speed.status = 2;
					} else {
					speed.status = 3;
					}             
					console.info("statusSpeed====>",speed.status)             
				}
				} catch {
					speed.status = 0;
					console.info("网络断开")
				}
			}else {
				speed.status = 0;
				console.info("网络断开2")
			}
		},this.time)
	}else {
		speed.status = 0;
		console.info("网络断开1")
	}
}
let netWork = new Network();

总结

通过创建img对象,设置onload监听回调,然后指定src, 一旦指定src,图片资源就会加载,完成时onload回调就会调用,我们可以根据时机分别标记start和end。

前端判断网速的方法及其优缺点

  • img加载测速:借助img对象加载测算网速。优点:没有跨域带来的问题。缺点:(1)要自己测文件大小并提供参数fileSize,(2)文件必须为图片 (3)文件大小不能灵活控制
  • Ajax测速: 通过Ajax测算网速。 优点: (1)不用提供文件大小参数,因为可以从response首部获得(2)测试的文件不一定要是图片,且数据量能灵活控制。缺点:跨域问题
  • downlink测速: 通过navigator.connection.downlink读取网速。优点:不需要任何参数。缺点:1.兼容性很有问题,2.带宽查询不是实时的,具有分钟级别的时间间隔 已上都是可以三中方法都可以实现,大家可以考虑个子得项目进行合理得选择
海计划公众号
(0)
上一篇 2020/03/20 06:50
下一篇 2020/03/20 06:50

您可能感兴趣的内容

  • 为什么要用webpack?使用教程_webpack指南教程

    现今的很多网页其实可以看做是功能丰富的应用,它们拥有着复杂的JavaScript代码和一大堆依赖包。模块化,让我们可以把复杂的程序细化为小的文件; 类似于TypeScript这种在JavaScript基础上拓展的开发语言:使我们能够实现目前版本的JavaScript不能直接使用的特性,并且之后还能转换为JavaScript文件使浏览器可以识别;Scss,le

    Web前端 2020/03/26
  • Ember.js和Vue.js对比,哪个框架更优秀?新手入门_框架入门基础知识

    JavaScript最初是为Web应用程序创建的。但是随着前端技术的发展,大多数开发人员更喜欢使用基于JavaScript的框架。它简化了你的代码以及使你能完成更多全栈工作,您几乎可以在任何框架中使用JavaScript。使用什么类型的框架决定了创建应用程序的便捷程度。因此,您必须慎重选择。在已经足够复杂的前端环境里,其中两个框架脱颖而出。我们会在本文中对E

    2020/03/23
  • IT程序猿入门百科_服务于程序员,传播编程经验!

    IT程序猿入门百科 官方网址:https://www.itcodemonkey.com/ 简介描述:服务于程序员,传播编程经验! 程序猿软件开发,服务于程序员,传播编程经验,收集编…

    2020/03/06
  • Xiuno BBS小白攻略_一款轻论坛产品

    Xiuno BBS小白攻略 官方网址:http://www.xiuno.com/ 简介描述:一款轻论坛产品 Xiuno BBS 4.0 是一款轻论坛产品 前端基于 BootStra…

    2020/03/06
  • uix-kit小白基础_偏视觉交互的前端开发工具套件

    uix-kit小白基础 官方网址:https://xizon.github.io/uix-kit/examples/ GitHub:https://github.com/xizon…

    2020/03/10
  • js查重去重性能优化心得使用说明_优化菜鸟攻略

    概述今天产品反映有个5000条数据的页面的保存按钮很慢,查看代码看到是因为点击保存按钮之后,进行了查重操作,而查重操作是用2个for循环完成了,时间复杂度是O(n^2)。没办法,只能想办法优化一下了。源码简单来说,这个页面的要求是查找一个数组中的重复项,并且返回重复项的行号。源码简化后如下: checkData(tableData) {// conso

    2020/03/31
  • 赶集网基础知识_专业的分类信息网

    赶集网基础知识 官方网址:http://www.ganji.com/zhaopin/ 简介描述:专业的分类信息网 赶集网招聘网频道,每天更新大量的近期人才招聘信息,是针对大众职位的…

    2020/03/06
  • MyDesy使用攻略_台湾灵感创意视觉资讯收集网

    MyDesy使用攻略 官方网址:https://www.mydesy.com/ 简介描述:台湾灵感创意视觉资讯收集网 MyDesy淘靈感是由两个字(My + Desy)所组成,强调…

    2020/03/10
  • 领贤简历小白教程_专业精美简历模板,满足各种不同行业的求职需求

    领贤简历小白教程 官方网址:http://www.capabcv.com/ 简介描述:专业精美简历模板,满足各种不同行业的求职需求 领贤简历是一个专业的在线简历制作工具,有了好简历…

    2020/03/11
  • parcel快速,零配置的打包工具,据说Parcel比webpack快多倍基础知识教程_Parcel小白知识

    Parcel的特性快速打包:Parcel 使用工作进程启用多核编译,并具有文件系统缓存,即使在重新启动后也可快速重新构建。
    打包所有资源:Parcel 支持JS,CSS,HTML,文件资源等等 – 不需要安装任何插件。
    自动转换:在需要时,代码使用 Babel,PostCSS 和 PostHTML 自动转换 – 即使是 node_modules。
    零配

    2020/04/06
  • JavaScript:生成重复的字符串(字符串乘法)入门教程_js指南教程

    看到一个题目要求写一个函数times,输出str重复num次的字符串。比如str:bac num:3输出:abcabcabc除了利用循环还有几种方法,我学习研究之后记下以下三种方法:1. 递归,结合三元表达式更简洁。2. 数组的 join() 方法。3. ES6的 repeat() 方法。ES6目前没有全部兼容。以下为三种方式代码: 三元表达式+

    2020/04/03
  • 程序员涨工资加薪技巧小白攻略IT工程师到底该如何提加薪?_IT指南教程

    作为一名IT工程师,我们工作中最关注的就是自己能力的提升,待遇的提升。你的待遇是否令自己满意,你是否提出过涨工资?如果你从来没有或很少提出过涨工资,那么不用急,因为你并不孤单。经研究表明:89%的人认为他应该加薪,而这些人中,只有54%的人提出过加薪,13% 的人宁愿重新去找工作,33%的人还在默默的付出。工资待遇影响着我们的生活质量,是我们最关心的事。那么

    2020/04/03
  • vue-router路由元信息及keep-alive组件级缓存使用说明_缓存新手入门

    路由元信息?(黑人问号脸???)是不是这么官方的解释很多人都会一脸懵?那么我们说meta,是不是很多人恍然大悟,因为在项目中用到或者看到过呢?是的,路由元信息就是我们定义路由时配置的meta字段;那么这个meta的作用是什么呢?首先看一个场景:通常我们在开发网站或者移动应用的时候,我们通常会有网页权限验证的需求(别说你没有,你肯定有),这种需求一般是指需要登

    2020/03/24
  • Angular有哪些特点?教程视频_特点指南攻略

    Angular是一个开源框架,一个互联网应用程序框架,一个强大的前端框架,用于开发动态Web应用程序。那么Angular有哪些特点?Angular的特点1、数据的双向绑定这可能是其最激动人心的特性吧,view层的数据和model层的数据是双向绑定的,其中之一发生更改,另一方会随之变化,这不用你写任何代码!2、代码模块化,每个模块的代码独立拥有自己的作用域,m

    2020/03/20
  • vue源码中的检测方法小白知识_源码入门基础

    // 判断是否为undefined或nullconst isDef = (v) => {return v !== undefined && v !== null
    }// 判断是否为Promise 函数const isPromise = (val) => {return (val !== undefine &&typeof val.then === ‘func

    2020/03/24
  • 获取网页乱码小白指南_乱码入门教程

    1.是用curl抓取的数据是用类似gzip压缩后的数据导致的乱码。乱码:curl www.1ting.com |more乱码:curl -H “Accept-Encoding: gzip”www.1ting.com | more不乱码:curl -H “Accept-Encoding: gzip”www.1ting.com | gunzip | more不乱

    2020/04/03