websocket的重连

在做图片的传输时，会经常的断开和卡顿，下面重连的方法解决了经常断开的问题

// 图像预览 websocket
var ws;
var lockReconnect = false;//避免重复连接

// 是否是客户端返回消息时调用, 如果不是 那么值为true 那么就不会执行重连
var flag;

// 图片 设置一个全局的图片src，将websocket获取的图片保存到这个字段里，如果websocket断开或者不传图了，会使用上一张的图片，这样页面不会出现空白
var img = "";

function createWebSocket(url) {
    flag = true;
    try {
        ws = new WebSocket(url);
        initEventHandle();
    } catch (e) {
        reconnect(url);
    }     
}

function initEventHandle() {
    ws.onclose = function (event) {if(flag) reconnect(wsUrl);            
    };
    ws.onerror = function (event) {
        if(flag) reconnect(wsUrl);       
    };
    ws.onopen = function () {
        //心跳检测重置
        heartCheck.reset().start();
    };
    ws.onmessage = function (event) {
        //如果获取到消息，心跳检测重置
        //拿到任何消息都说明当前连接是正常的
        heartCheck.reset().start();
        var data = JSON.parse(event.data);if(data.image !== "") img = data.image;if(img == ""){
            $('#image').attr('src', './images/480x270.png') ;
        }else {
            $('#image').attr('src', 'data:image/png;base64,' + img) ;
        }        
    }
}

function reconnect(url) {
    var repeat = 5;  // 限制执行次数为5次 为避免客户端一直重连
    var timer;
    if(ws.readyState == 3){
        if(lockReconnect) return;
        lockReconnect = true;
        //没连接上会一直重连，设置延迟避免请求过多
        //setTimeout(function () {
        //    createWebSocket(url);
        //    lockReconnect = false;
        //}, 500);

        timer = setInterval(function () {
            if (repeat == 0) {
                clearInterval(timer);
                flag = false;
                $('#image').attr('src', './images/480x270.png');
                ws.send('{\"token\":\"\", \"code\": \"0\"}');
                ws.onclose();
                ws.close();
            } else {
                repeat--;
                createWebSocket(url);
                lockReconnect = false;
            }
        }, 500);
    }
}

    
//心跳检测
var heartCheck = {
    timeout: 1000,//1秒
    timeoutObj: null,
    serverTimeoutObj: null,
    reset: function(){
        clearTimeout(this.timeoutObj);
        clearTimeout(this.serverTimeoutObj);
        return this;
    },
    start: function(){
        var self = this;
        this.timeoutObj = setTimeout(function(){
            //这里发送一个心跳，后端收到后，返回一个心跳消息，
            //onmessage拿到返回的心跳就说明连接正常
            // 0=结束，1=开始
            if (ws.readyState !== 3) {
                ws.send('{\"token\":\"\", \"code\": \"1\"}');
            }
            self.serverTimeoutObj = setTimeout(function(){//如果超过一定时间还没重置，说明后端主动断开了
                ws.onclose();
                ws.close();//如果onclose会执行reconnect，我们执行ws.close()就行了.如果直接执行reconnect 会触发onclose导致重连两次
            }, self.timeout)
        }, this.timeout)
    }
}

一直在传图的时候，普通的websocket写法会经常断开，图片显示不出来，页面不流畅，

先保存websocket传来的base64字段，断开的时候，会显示传来的上一张图片，页面不会出现空白，

在websocket错误或者关闭的时候，再进行重连。

可能会出现一直重连失败的情况，设置重连次数，超过后，页面恢复初始化。

在请求资源得到相应的时候，要关闭websocket请求，不再重连，创建一个变量，控制是否重连。