美文网首页vue
关于vue使用websocket 并且使用心跳机制

关于vue使用websocket 并且使用心跳机制

作者: Morbid_D | 来源:发表于2022-11-21 15:57 被阅读0次

    data(){

        return{

        websock: null, //建立的连接

                lockReconnect: false, //是否真正建立连接

                timeout: 20 * 1000, //20秒一次心跳

                timeoutObj: null, //心跳心跳倒计时

                serverTimeoutObj: null, //心跳倒计时

                timeoutnum: null //断开 重连倒计时

    }

     }

    mounted(){

            this.initWebSocket();

    }

    destroyed() {

              //页面销毁时关闭长连接

              this.websocketclose();

            },

    initWebSocket() {

              //建立连接

              //初始化weosocket

              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("heartbeat");

                } else {

                  //否则重连

                  self.reconnect();

                }

                self.serverTimeoutObj = setTimeout(function() {

                  //超时关闭

                  self.websock.close();

                }, self.timeout);

              }, self.timeout);

            },

            websocketonopen() {

              //连接成功事件

              this.websocketsend('发送数据');

              //提示成功

              // console.log("连接成功", 3);

              //开启心跳

              this.start();

            },

            websocketonerror(e) {

              //连接失败事件

              //错误

              console.log("WebSocket连接发生错误");

              //重连

              this.reconnect();

            },

            websocketclose(e) {

              //连接关闭事件

              //提示关闭

              // console.log("连接已关闭");

              //重连

              this.reconnect();

            },

            websocketonmessage(event) {

              //接收服务器推送的信息

              //打印收到服务器的内容

              console.log("收到服务器信息",event.data);

              let datas = JSON.parse(event.data)

              //收到服务器信息,心跳重置

              this.reset();

            },

            websocketsend(msg) {

              //向服务器发送信息

              this.websock.send(msg);

            },

    相关文章

      网友评论

        本文标题:关于vue使用websocket 并且使用心跳机制

        本文链接:https://www.haomeiwen.com/subject/zrrzartx.html