vue2 ruoyi websocket轮询

---

前言

websocket，实现与后端通讯，使用心跳机制，断联自动恢复。

---

一、websocket和心跳是什么？

1. WebSocket
   WebSocket 是一种网络通信协议，允许客户端和服务器之间进行全双工通信（即双方可以同时发送和接收数据）。它通过一次 HTTP 握手建立连接，之后保持长连接，适合实时性要求高的场景。

2. 心跳机制（Heartbeat）
   心跳机制是一种用于检测连接是否存活的机制。客户端和服务器通过定期发送小型数据包（称为“心跳包”）来确认对方是否在线。
   实现方式：
   客户端和服务器约定一个时间间隔（如 30 秒）。
   客户端定期向服务器发送心跳包（通常是一个小型数据包，如 ping）。
   服务器收到心跳包后回复一个响应包（如 pong）。
   如果一方在指定时间内未收到心跳包或响应包，则认为连接已断开。

二、使用步骤

1.

代码如下（示例）：

  created() {
    const self = this; // 在这里保存组件实例的引用
    this.join();
    clearInterval(this.setIntervalId);
    this.setIntervalId=setInterval(()=>{
      // 使用 setTimeout 来创建延迟
        this.heartbeatTest();
    },3000)
  },

		//开始链结
   join() {
      const wsuri = this.url;//url地址wss://127.0.0.1:1234/websocket/message
      const self = this;
      this.ws = new WebSocket(wsuri);
      this.ws.onopen = function (event) {
        self.text_state = self.text_state + "已经打开连接!" + "\n";
        clearTimeout(this.heartSetTimeOutId)
      };
      this.ws.onmessage = function (event) {
        self.waitingResponse = true;
        self.text_content = event.data;
        self.message = event.data;
        if (self.text_content == "ok"){
          self.sendHandle("停机维护")
        }
      };
      this.ws.onclose = (event) => {
        // 处理连接关闭事件，例如重新连接或执行其他操作
        if (this.reConnectNum < 10){
       this.heartSetTimeOutId = setTimeout(() => {
          this.join();
          this.reConnectNum++;
        }, 20000); // 根据需要调整延迟的持续时间（以毫秒为单位）
        }
      };
      this.ws.onerror = (error) => {
        console.error('WebSocket error: ', error);
        // 处理WebSocket错误事件
      };
    },

    exit() {
      if (this.ws) {
        clearInterval(this.setIntervalId);
        this.ws = null;
      }
    },
    heartbeatTest(){
      if (this.ws.readyState !== WebSocket.CLOSED){
        this.sendMessage = "heartCheck";
        this.ws.send(this.sendMessage);
      }
    },
    close() {
      const self = this;
      if (this.ws && this.ws.OPEN){
        this.ws.onclose = function (event) {
          self.text_state = self.text_state + "已经关闭连接!" + "\n";
        };
      }

    },

2.监听变化

  watch:{
    text_content:{
        deep:true,
      handler(n,o){
            if (n.indexOf('opera') >-1){
              let json = JSON.parse(n);
              this.noticeShowFlag = json.maintainStatus;
              this.noticeShowMsg = "";
              if (this.noticeShowFlag){
                this.noticeShowMsg = json.expirseTime+"操作！！";
              }
            }
      }
    }
  },

3.关闭

  beforeDestroy() {
    //页面销毁时关闭长连接
    this.close();
    this.exit();
  },

总结

提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。