websocket断开重连解决方案，基于子慕大诗人博客修改 健壮强化版

欢迎大家来到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