vue3实现websocket连接

2025.03.23今天我学习了用vue3实现websocket长连接，代码如下：

<template>
  <div>
    <h1>WebSocket Example</h1>
    <p>Current Message: {{ message }}</p>
  </div>
</template>

<script>
import { ref, onMounted, onBeforeUnmount } from "vue";

export default {
  setup() {
    const message = ref(""); // 用于展示从 WebSocket 获取的消息
    let ws = null; // WebSocket 实例
    let reconnectTimeout = null; // 重连超时控制
    const heartbeatInterval = 30000; // 设置心跳包发送时间间隔（30秒）

    // 建立 WebSocket 连接
    const connectWebSocket = () => {
      ws = new WebSocket("wss://example.com/socket"); // 替换为实际的 WebSocket 服务 URL

      ws.onopen = () => {
        console.log("WebSocket 连接已建立");
      };

      ws.onmessage = (event) => {
        message.value = event.data; // 接收到服务器推送的消息
      };

      ws.onerror = (error) => {
        console.error("WebSocket 发生错误", error);
      };

      ws.onclose = (event) => {
        console.log("WebSocket 连接已关闭", event.code);
        handleReconnect(); // WebSocket 连接关闭时尝试重连
      };
    };

    // 处理 WebSocket 连接断开后的重连
    const handleReconnect = () => {
      // 如果已经在重连，避免重复重连
      if (reconnectTimeout) {
        return;
      }

      reconnectTimeout = setTimeout(() => {
        console.log("正在尝试重新连接 WebSocket...");
        connectWebSocket();
        reconnectTimeout = null; // 重连后清除重连超时
      }, 5000); // 5 秒后重连
    };

    // 发送心跳包
    const sendHeartbeat = () => {
      if (ws && ws.readyState === WebSocket.OPEN) {
        console.log("发送心跳包");
        ws.send(JSON.stringify({ type: "heartbeat" })); // 自定义心跳包的格式
      }
    };

    // 检查 WebSocket 连接状态
    const checkConnectionStatus = () => {
      if (ws.readyState === WebSocket.OPEN) {
        console.log("WebSocket 连接正常");
      } else if (ws.readyState === WebSocket.CONNECTING) {
        console.log("WebSocket 正在连接...");
      } else if (ws.readyState === WebSocket.CLOSING) {
        console.log("WebSocket 连接正在关闭...");
      } else if (ws.readyState === WebSocket.CLOSED) {
        console.log("WebSocket 连接已关闭，准备重连");
        handleReconnect();
      }
    };

    onMounted(() => {
      connectWebSocket(); // 组件加载时连接 WebSocket

      // 每隔 30 秒发送一次心跳包
      setInterval(sendHeartbeat, heartbeatInterval);

      // 每隔 5 秒检查一次 WebSocket 状态
      setInterval(checkConnectionStatus, 5000);
    });

    onBeforeUnmount(() => {
      if (ws) {
        ws.close(); // 组件销毁时关闭 WebSocket 连接
      }
    });

    return {
      message,
    };
  },
};
</script>