Merge remote-tracking branch 'origin/master'

fuliqi

2024-04-24 1a0b6c69df8bafa8d9c612a5ea04a34be712001c

 src/views/index.vue

@@ -8,6 +8,7 @@
<script>
import DataView from './home/data-view/index.vue';
import DataWrapper from './home/data-wrapper/index.vue';
import { getToken } from '@/utils/auth'

export default {
  name: "Index",
@@ -20,6 +21,59 @@

    };
  },
  methods: {
    senMsg(msg) {
      // 发送文本消息
      this.$websocket.send(msg);
    },
    // 发送心跳消息
    sendHeartbeat() {
      if (this.$websocket.readyState === WebSocket.OPEN) {
        // 发送心跳消息，可以是任意格式的字符串，用于表示心跳
        this.senMsg('ping');
      }
    },
    // 开始心跳定时器
    startHeartbeat() {
      this.heartbeatInterval = setInterval(() => {
        this.sendHeartbeat();
      }, 10000); // 每 10 秒发送一次心跳
    },
    // 停止心跳定时器
    stopHeartbeat() {
      clearInterval(this.heartbeatInterval);
    },
    initWebsocket() {
      this.$websocket = new WebSocket(process.env.VUE_APP_WEB_SOCKET_URL)
      // 监听 WebSocket 连接成功事件
      this.$websocket.onopen = event => {
        console.log('WebSocket 连接成功', event);
        let msg = {
          "token": getToken()
        }
        // 发送身份认证
        this.senMsg(JSON.stringify(msg))
        // 设置心跳定时器，定期发送心跳消息
        this.startHeartbeat();
      };

      // 监听 WebSocket 接收消息事件
      this.$websocket.onmessage = event => {
        const message = event.data;
        console.log('接收到消息:', message);
      };

      // 监听 WebSocket 连接关闭事件
      this.$websocket.onclose = event => {
        console.log('WebSocket 连接关闭', event);
        // 清除心跳定时器
        this.stopHeartbeat();
      };
    },
  },
  mounted() {
    this.initWebsocket();
  }
};
</script>