webscoket生命周期及心跳机制

最新推荐文章于 2024-10-17 16:06:22 发布

Holly31

最新推荐文章于 2024-10-17 16:06:22 发布

阅读量414

点赞数

文章标签：前端 websocket 网络协议

本文链接：https://blog.csdn.net/holly31/article/details/130681387

版权

该文详细阐述了WebSocket的生命周期，包括打开、消息、错误和关闭事件。同时，介绍了心跳机制，客户端定时发送心跳消息以检测连接状态，并在未收到响应时执行断线重连策略。此外，文中提供了断线重连的实现代码，以及如何在连接打开时启动心跳检测。

摘要由CSDN通过智能技术生成

webscoket生命周期:打开事件--消息事件--错误事件--关闭事件

var ws = new WebSocket('wss://echo.websocket.org')
ws.onopen = function (ev) {
	console.log('connection open...')
	ws.send('hello server!')
}

ws.onmessage = function (e) {
	console.log('Received ' + e.data)
}

ws.onerror = function () {
    console.log('Connection onerror !')
};

ws.onclose = function (ev) {
	console.log('Connection closed!')
}

2.心跳机制

心跳机制：客户端每隔一段时间向服务端发送一个特有的心跳消息，每次服务端收到消息后只需将消息返回，此时，若二者还保持连接，则客户端就会收到消息，若没收到，则说明连接断开，此时，客户端就要主动重连，完成一个周期

断线重连：若某时间段内客户端发送了消息，而服务端未返回，则认定为断线；这个时候会触发到websocket中的onclose事件，需要重新连接服务

    var ws;//websocket实例
    var lockReconnect = false;//避免重复连接
    var wsUrl = 'ws:xxx.1.1.1';
    
    function createWebSocket(url) {
        try {
            ws = new WebSocket(url);
            initEventHandle();
        } catch (e) {
            reconnect(url);
        }     
    }

    function initEventHandle() {
        ws.onclose = function () {
            reconnect(wsUrl);
        };
        ws.onerror = function () {
            reconnect(wsUrl);
        };
        ws.onopen = function () {
            //心跳检测重置
            heartCheck.reset().start();
        };
        ws.onmessage = function (event) {
            //如果获取到消息，心跳检测重置
            //拿到任何消息都说明当前连接是正常的
            heartCheck.reset().start();
        }
    }
    //重连
    function reconnect(url) {
        if(lockReconnect) return;
        lockReconnect = true;
        //没连接上会一直重连，设置延迟避免请求过多
        setTimeout(function () {
            createWebSocket(url);
            lockReconnect = false;
        }, 2000);
    }

    
    //心跳检测
    var heartCheck = {
        timeout: 60000,//60秒
        timeoutObj: null,
        reset: function(){
            clearTimeout(this.timeoutObj);
            return this;
        },
        start: function(){
            this.timeoutObj = setTimeout(function(){
                //这里发送一个心跳，后端收到后，返回一个心跳消息，
                //onmessage拿到返回的心跳就说明连接正常
                ws.send("HeartBeat");
            }, this.timeout)
        }
    }

    createWebSocket(wsUrl);