歡迎大家來到Altaba的部落格  2017年11月27日

相信隨著H5的演進，我們越來越多接觸到websocket的使用，本身就使用此技術並不難，但是在開發中會遇到各種無法預測的原因，有瀏覽器相容問題，有後臺的意外斷開，狀態百出。

本人前端開發遇到這樣的問題：websocket部分使用了nginx服務，預設配置是60s，就是60s，如果一直沒有資料傳輸，連線會在過了這個時間之後自動關閉。

解決：nginx配置改為600s，前端在onclose 函式體加入判斷 然後重連 

基於子慕大詩人部落格閱讀學習借鑑，不才在此做了一些優化，希望大家參閱

//2017年11月27日  修改websocket連線
        var ws;//websocket例項
        var lockReconnect = false;//避免重複連線
        var wsUrl = "ws://"+'xxxxxxx';

        function createWebSocket(url) {
            try {
                if ('WebSocket' in window) {
                    ws = new WebSocket(url);
                } else if ('MozWebSocket' in window) {
                    ws = new MozWebSocket(url);
                } else {
                    url = "http://" + 'xxxxxxx';
                    ws = new SockJS(url);
                }
 


                initEventHandle();
            } catch (e) {
                reconnect(url);
            }
        }

        function initEventHandle() {
            ws.onclose = function (evnt) {
                //console.log('websocket服務關閉了');
                reconnect(wsUrl);
            };
            ws.onerror = function (evnt) {
                //console.log('websocket服務出錯了');
                reconnect(wsUrl);
            };
            ws.onopen = function (evnt) {
                //心跳檢測重置
                heartCheck.reset().start();
            };
            ws.onmessage = function (evnt) {
                //如果獲取到訊息，心跳檢測重置
                //拿到任何訊息都說明當前連線是正常的
                //console.log('websocket服務獲得資料了');

                //接受訊息後的UI變化
                doWithMsg(evnt.data);
 

                heartCheck.reset().start();
            }

            //收到訊息推送
            function doWithMsg(msg) {
                //......
            }

        }

        function reconnect(url) {
            if(lockReconnect) return;
            lockReconnect = true;
            //沒連線上會一直重連，設定延遲避免請求過多
            setTimeout(function () {
                createWebSocket(url);
                lockReconnect = false;
            }, 2000);
        }

        //心跳檢測
        var heartCheck = {
            timeout: 60000,//60秒
            timeoutObj: null,
            serverTimeoutObj: null,
            reset: function(){
                clearTimeout(this.timeoutObj);
                clearTimeout(this.serverTimeoutObj);
                return this;
            },
            start: function(){
                var self = this;
                this.timeoutObj = setTimeout(function(){
                    //這裡傳送一個心跳，後端收到後，返回一個心跳訊息，
                    //onmessage拿到返回的心跳就說明連線正常
                    ws.send("HeartBeat");
                    self.serverTimeoutObj = setTimeout(function(){//如果超過一定時間還沒重置，說明後端主動斷開了
                        ws.close();//如果onclose會執行reconnect，我們執行ws.close()就行了.如果直接執行reconnect 會觸發onclose導致重連兩次
                    }, self.timeout)
                }, this.timeout)
            }
        }

        //初始化websocket
        createWebSocket(wsUrl);
 

https://www.cnblogs.com/1wen/p/5808276.html