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请求，不再重连，创建一个变量，控制是否重连。

 

来源：https://www.cnblogs.com/una1804/p/9116890.html