websocket断连机制

实现websocket断联机制

  const socket = ref(null);
  const heartbeatTimer = ref(null);
  const reconnectTimer = ref(null);
  const reconnectInterval = 5000; // 5秒重连一次
  const isManuallyClosed = ref(false);
  // 建立WebSocket连接
  async function connectWebSocket() {
    try {
      const wsUrl = import.meta.env.VITE_APP_WS_URL;

      socket.value = new WebSocket(wsUrl);

      socket.value.onopen = () => {
        console.log('WebSocket连接成功');
        isManuallyClosed.value = false;
        socket.value?.send(JSON.stringify({ cmd: '', body: {} }));

        // 心跳机制
        heartbeatTimer.value = setInterval(() => {
          socket.value?.send(JSON.stringify({ cmd: '', body: {} }));
        }, 30000);
      };

      socket.value.onerror = (error) => {
        console.error('WebSocket错误:', error);
      };

      socket.value.onclose = (event) => {
        console.log('WebSocket连接关闭:', event);
        cleanupSocket();
        if (!isManuallyClosed.value) scheduleReconnect();
      };

      socket.value.onmessage = (event) => {
        try {
          const data = JSON.parse(event.data);
          console.log('接收到WebSocket消息:', data);

          tableData.value = data.body.map((item) => {
            const label = parkingDict.value.find((dict) => dict.valueCode == item.status);
            return { ...item, status: label?.valueName || item.status };
          });
        } catch (e) {
          console.error('消息解析失败:', e);
        }
      };
    } catch (e) {
      console.error('获取WebSocket地址失败:', e);
      scheduleReconnect();
    }
  }

  // 清理WebSocket资源
  function cleanupSocket() {
    if (heartbeatTimer.value) clearInterval(heartbeatTimer.value);
    if (socket.value) socket.value.close();
    socket.value = null;
  }

  // 重连逻辑
  function scheduleReconnect() {
    console.log(`WebSocket将在${reconnectInterval / 1000}s后重连...`);
    reconnectTimer.value = setTimeout(() => {
      connectWebSocket();
    }, reconnectInterval);
  }

  // 生命周期钩子
  onMounted(() => {
    connectWebSocket();
  });

  onUnmounted(() => {
    isManuallyClosed.value = true;
    cleanupSocket();
    if (reconnectTimer.value) clearTimeout(reconnectTimer.value);
  });