vue socket心跳监测

最新推荐文章于 2024-07-24 11:15:41 发布

werch

最新推荐文章于 2024-07-24 11:15:41 发布

阅读量556

点赞数 1

文章标签： WebSocket 连接心跳检测重连机制 JavaScript

本文链接：https://blog.csdn.net/weixin_42666092/article/details/125969888

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    export default {
        data() {
            return {
                websock: null,//建立的连接
                lockReconnect: false,//是否真正建立连接
                timeout: 28*1000,//30秒一次心跳
                timeoutObj: null,//心跳心跳倒计时
                serverTimeoutObj: null,//心跳倒计时
                timeoutnum: null,//断开 重连倒计时
            };
        },
        created() {
            //页面刚进入时开启长连接
            this.initWebSocket();
        },
        destroyed: function() {
            //页面销毁时关闭长连接
            this.websocketclose();
        },
        methods: {
            initWebSocket(){//建立连接
                //初始化weosocket
                //const wsuri = "ws://sms.填写您的地址.com/websocket/" + this.charId; //ws地址
               const wsuri = "" 
               //建立连接
                this.websock = new WebSocket(wsuri);
                //连接成功
                this.websock.onopen = this.websocketonopen;
                //连接错误
                this.websock.onerror = this.websocketonerror;
                //接收信息
                this.websock.onmessage = this.websocketonmessage;
                //连接关闭
                this.websock.onclose = this.websocketclose;
            },
            reconnect() {//重新连接
                var that = this;
                if(that.lockReconnect) {
                    return;
                };
                that.lockReconnect = true;
                //没连接上会一直重连，设置延迟避免请求过多
                that.timeoutnum && clearTimeout(that.timeoutnum);
                that.timeoutnum = setTimeout(function () {
                    //新连接
                    that.initWebSocket();
                    that.lockReconnect = false;
                },5000);
            },
            reset(){//重置心跳
                var that = this;
                //清除时间
                clearTimeout(that.timeoutObj);
                clearTimeout(that.serverTimeoutObj);
                //重启心跳
                that.start();
            },
            start(){//开启心跳
                var self = this;
                self.timeoutObj && clearTimeout(self.timeoutObj);
                self.serverTimeoutObj && clearTimeout(self.serverTimeoutObj);
                self.timeoutObj = setTimeout(function(){
                    //这里发送一个心跳，后端收到后，返回一个心跳消息，
                    if (self.websock.readyState == 1) {//如果连接正常
                        self.websock.send("heartCheck");
                    }else{//否则重连
                        self.reconnect();
                    }
                    self.serverTimeoutObj = setTimeout(function() {
                        //超时关闭
                        self.websock.close();
                    }, self.timeout);
    
                }, self.timeout)
            },
            
            websocketonopen() {//连接成功事件
              
                //提示成功
                s.success("连接成功",3)
                //开启心跳
                this.start();
            },
            
            websocketonerror(e) {//连接失败事件
                //错误
                console.log("WebSocket连接发生错误");
                //错误提示
                s.error("Websocket error, Check you internet!")
                //重连
                this.reconnect();
            },
            websocketclose(e) {//连接关闭事件
                //关闭
                console.log("connection closed (" + e.code + ")");
                //提示关闭
                s.error("连接已关闭",3);
                //重连
                this.reconnect();
            },
            websocketonmessage(event) {//接收服务器推送的信息
                //打印收到服务器的内容
                console.log(event.data);
                //收到服务器信息，心跳重置
                this.reset();
            },
            websocketsend(msg) {//向服务器发送信息
                //数据发送
                this.websock.send(msg);
            },
        }
    };
    
    </script>
    
</html>