業務背景

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

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