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