前端網路監控與斷網重鏈_ZenDei技術網路在線

業務背景最近在做大屏數據可視化項目得時候，在思考項目交付和運行情況得時候，考慮到了需要在公司大屏顯示器上面展示，突然想到了項目可能面臨斷網及其網速慢得情況下得一下展示問題，因此作為專欄進行這兩個問題得講解問題一 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.帶寬查詢不是實時的,具有分鐘級別的時間間隔
已上都是可以三中方法都可以實現，大家可以考慮個子得項目進行合理得選擇