vue如何使用websocket

// websocket连接
let webSocketPort = url + '/ws/socket'
const dataList = ref([]); // 用于展示从 WebSocket 获取的消息
let ws = null; // WebSocket 实例
let reconnectTimeout = null; // 重连超时控制
// 建立 WebSocket 连接
const connectWebSocket = () => {
  ws = new WebSocket(webSocketPort); // 替换为实际的 WebSocket 服务 URL

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

  ws.onmessage = (event) => {
    console.log(event.data); // 接收到服务器推送的消息
    // if (!(dataList.value.some(e => e == event.data))) {
    //   if (dataList.value.findIndex(item => item.includes("连接")) >= 0 && event.data.includes("连接")) {
    //     let signIndex = dataList.value.findIndex(item => item.includes("连接"))
    //     dataList.value[signIndex] = event.data
    //   } else {
        dataList.value.push(event.data)
    //   }
    //   localStorage.setItem("dataList", JSON.stringify(dataList.value))
    //   console.log("存储", dataList.value)
    // }
  };

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

  ws.onclose = (event) => {
    console.log("WebSocket 连接已关闭", event.code);
    if (isConnect.value) {
      handleReconnect(); // WebSocket 连接关闭时尝试重连
    }
  };
};
// 处理 WebSocket 连接断开后的重连
const handleReconnect = () => {
  // 如果已经在重连，避免重复重连
  if (reconnectTimeout) {
    return;
  }
  reconnectTimeout = setTimeout(() => {
    console.log("正在尝试重新连接 WebSocket...");
    connectWebSocket();
    reconnectTimeout = null; // 重连后清除重连超时
  }, 5000); // 5 秒后重连
};

// 获取缓存数据
const deviceInfo = localStorage.getItem("deviceInfo")
if (deviceInfo) {
  deviceObj.value = JSON.parse(deviceInfo)
  loadingInstance = ElLoading.service({
    background: 'rgba(0, 0, 0, 0.7)',
    text: '正在连接设备...',
  });
  connectWebSocket(); // 组件加载时连接 WebSocket
}

// 使用 Websocket 发送消息
const send = () => {
  let obj = {
    id: 1,
  }
  loadingInstance.close();
  ws.send(JSON.stringify(obj))
}



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