前端網絡監控與斷網重鏈

業務背景

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

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