前端網路監控與斷網重鏈

業務背景

最近在做大屏資料可視化專案得時候，在思考專案交付和運行情況得時候，考慮到了需要在公司大屏顯示幕上面展示，突然想到了專案可能面臨斷網及其網速慢得情況下得一下展示問題，因此作為專欄進行這兩個問題得講解

問題一 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.帶寬查詢不是實時的,具有分鐘級別的時間間隔
  已上都是可以三中方法都可以實作，大家可以考慮個子得專案進行合理得選擇
  

標籤：JavaScript

上一篇：Uncaught TypeError: Cannot set property 'onclick' of null解決辦法

下一篇：JavaScript 進制轉換&位運算，了解一下？