vue中websocket心跳机制

我就是我 2023-10-01 19:32 14阅读 0赞

## vue中websocke心跳机制 ##

**工作当中所遇到的问题以及解决方式**

**起初本人的设计方式为：**

**前后端两端进行websocket通信**
    1：前端基础的连接以及消息发送和接收
    2：后端基础的消息接收和发送

**过程中问题暴露：**  
*建立连接之后，10分钟内没有消息间的通信；websocket会自动断开连接*  
![在这里插入图片描述][f427aadd8d8645be9b27d2837161e165.png]

**解决方式：**

1、前端加入心跳包机制
    2、后端接收心跳包之后不进行任何消息的接收

**直接附上代码：**

/**
     * 注：此代码为提供思路代码,根据具体情况进行调整
     */
    
    data () {
        
          return {
        
            ws: null,//建立的连接
            lockReconnect: false,//是否真正建立连接
            timeout: 28*1000,//30秒一次心跳
            timeoutObj: null,//心跳心跳倒计时
            serverTimeoutObj: null,//心跳倒计时
            timeoutnum: null,//断开 重连倒计时
          }
        },
        created() {
        
          this.initWebpack();
        }, 
        methods: {
        
          initWebpack(){
        
            this.ws = new WebSocket(process.env.SOCKET_OTC);
            this.ws.onopen = this.onopen;
            this.ws.onmessage = this.onmessage;
            this.ws.onclose = this.onclose;
            this.ws.onerror = this.onerror;
          },
          reconnect() {
        //重新连接
            var that = this;
            if(that.lockReconnect) {
        
              return;
            };
            that.lockReconnect = true;
            //没连接上会一直重连，设置延迟避免请求过多
            that.timeoutnum && clearTimeout(that.timeoutnum);
            that.timeoutnum = setTimeout(function () {
        
              //新连接
              that.initWebpack();
              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.ws.readyState == 1) {
        //如果连接正常
                self.ws.send("heartCheck");
              }else{
        //否则重连
                self.reconnect();
              }
              self.serverTimeoutObj = setTimeout(function() {
        
                //超时关闭
                self.ws.close();
              }, self.timeout);
     
            }, self.timeout)
          }, 
    　　　　onopen() {
        
            var msg = JSON.stringify({
        cmd: 'enter_chatting', token:this.COOKIE.getCookie("token")});
            this.ws.send(msg);
            console.log("open");
            this.getNoReadRecords();
            //开启心跳
            this.start();
          },
          onmessage(e) {
        
            this.mydata = JSON.parse(e.data);
            if(this.mydata.fromID == this.states.customerId){
        
              this.mydata.chatType = 2;
            }else{
        
              this.mydata.chatType = 1;
            }
            var content =this.getContentTypes(this.mydata.content,this.mydata.chatType);
            this.records.push(this.mydata);
            //收到服务器信息，心跳重置
            this.reset();
          },
          onclose(e) {
        
            console.log("连接关闭");
            console.log('websocket 断开: ' + e.code + ' ' + e.reason + ' ' + e.wasClean);
            var msg = JSON.stringify({
        cmd: 'out_chatting', token:this.COOKIE.getCookie("token")});
            this.ws.send(msg);
            //重连
            this.reconnect();
          },
          onerror(e) {
        
            console.log("出现错误");
            //重连
            this.reconnect();
          }
    }

## 相关文章 ##

[JAVA中webSockt一对一聊天][JAVA_webSockt]

[f427aadd8d8645be9b27d2837161e165.png]: https://img-blog.csdnimg.cn/f427aadd8d8645be9b27d2837161e165.png
[JAVA_webSockt]: https://blog.csdn.net/GoodburghCottage/article/details/123072668