websocket的重連

在做圖片的傳輸時，會經常的斷開和卡頓，下面重連的方法解決了經常斷開的問題

 

// 圖像預覽 websocket
var ws;

// 是否有ajax的返回消息時調用, 如果有返回值 -> 值為true, 執行重連， 否則 -> 為 false，就不會執行重連
var flag;

// 圖片
var img = "";

function createWebSocket(url) {
    flag = true;
    try {
　　　　 // 如果websocket不存在的時候 實例化websocket，並且調用websocket的函數
        if (ws == null || typeof ws !== WebSocket) {
            ws = new WebSocket(url);
            initEventHandle();
        } else {
            reconnect(url);
        }
    } catch (e) {
        $('#image').attr('src', './images/480x270.png');
    }
}

// 判斷是否有圖像傳回來
var hasImage = false;

function initEventHandle() {
    ws.onclose = function (event) {
        if (flag) {
            reconnect(wsUrl);
        } else { }
    };
    ws.onerror = function (event) {
        if (flag) {
            reconnect(wsUrl);
        } else { }
    };
    ws.onopen = function () {
        //心跳檢測重置
        heartCheck.reset().start();
    };
    ws.onmessage = function (event) {
        //如果獲取到消息，心跳檢測重置
        //拿到任何消息都說明當前連接是正常的
        var data = JSON.parse(event.data);var serverTimer;
　　　　 // 如果沒有image字段，沒有圖像傳回來，開始定時器，這時 hasImage是false，不會進到websocket關閉的函數，
　　　　　　 如果沒有接到字段，hasImage值為true，一秒鍾之后，計時器會進入到onclose事件，
　　　　　　 其間如果接收到字段，hasImage值為false，計時器也將不會執行onclose事件
        if (!data.image) {
            serverTimer = setTimeout(function () { //如果超過一定時間還沒重置，說明后端主動斷開了
                if (hasImage) {
                    if ( !(ws.readyState == 2 || ws.readyState == 3) ) {
                        ws.onclose();
                        ws.close();
                    }
                    $('#image').attr('src', './images/480x270.png');
                }
            }, 1000)
            hasImage = true;
        } else {
　　　　　// 有image字段傳回來，清空定時器，hasImage變量為false
            hasImage = false;
            clearTimeout(serverTimer);
        }       
　　　　 // 有image圖像，保存到img變量，如果沒有圖片傳回來，可以顯示上一張圖片，避免頁面出現空白
        if (data.image) img = data.image;
if (img == "") $('#image').attr('src', './images/480x270.png');
        　　$('#image').attr('src', 'data:image/png;base64,' + img);
           
　　　　　// 將數據置空
        data = null;
    }
}

function reconnect(url) {
    //沒連接上會一直重連，設置延遲避免請求過多
    var timer = setTimeout(function () {
        if (ws.readyState == 2 || ws.readyState == 3) {
            ws.onopen();
        } else if (ws.readyState == 1) {
            clearTimeout(timer);
        }
    }, 500);

}


//心跳檢測
var heartCheck = {
    timeout: 1000,//1秒
    timeoutObj: null,
    serverTimeoutObj: null,
    reset: function () {
        clearTimeout(this.timeoutObj);
        return this;
    },
    start: function () {
        var self = this;
        this.timeoutObj = setTimeout(function () {
            //這里發送一個心跳，后端收到后，返回一個心跳消息，
            //onmessage拿到返回的心跳就說明連接正常
            ws.send('{\"token\":\"\", \"code\": \"1\"}');
        }, this.timeout)
    }
}

 

一直在傳圖的時候，普通的websocket寫法會經常斷開，圖片顯示不出來，頁面不流暢，

先保存websocket傳來的base64字段，斷開的時候，會顯示傳來的上一張圖片，頁面不會出現空白，

在websocket錯誤或者關閉的時候，再進行重連。

可能會出現一直重連失敗的情況，設置重連次數，超過后，頁面恢復初始化。

在請求資源得到相應的時候，要關閉websocket請求，不再重連，創建一個變量，控制是否重連。