vue3使用webSocket

1.安装插件

npm i @vueuse/core@10.11.1

2.引入使用

import { useWebSocket } from "@vueuse/core"

const { send, open, close: wsClose, status } = useWebSocket('ws://192.168.100.90:53021/inms-application/alarm', {
  onMessage: (ws, { data }) => {
    console.log("websocket链接", data,)
    
    // 处理返回数据事件等
  },
  onDisconnected: () => {
    console.log("websocket断开链接")
    handleReconnect() // 断开后，手动再次链接ws
  },
  // 设置自动重连的功能，最多重试 3 次，每次重试之间的延迟为 5 秒。如果重连失败，将显示错误消息。
  autoReconnect: {
    retries: 3,
    delay: 5000,
    onFailed() {
      ElMessage.error("websocket链接失败")
    }
  },
  // 配置心跳机制，每 10 秒发送一次 "ping" 消息，如果在 1 秒内没有收到响应，则认为连接失效。
  heartbeat: {
    message: "ping",
    interval: 10000,
    pongTimeout: 1000
  }
})

// 自定义的监听断开连接后尝试重连并发送数据
const handleReconnect = () => {
  const reconnectInterval = setInterval(() => {
    if (status.value === 1) { // 1 表示 WebSocket 连接已成功打开
      console.log("WebSocket 已重新连接")
      send(JSON.stringify({ userId: userStore?.userInfo?.id })) // 重连成功后发送初始数据给后端
      clearInterval(reconnectInterval)  // 重连成功后清除重连尝试
    } else {
      console.log("正在尝试重新连接 WebSocket...")
      open()  // 尝试手动重新打开 WebSocket 连接
    }
  }, 5000)  // 每隔5秒尝试重新连接并发送数据
}


onMounted(() => {
  send('初始连接ws')
})

3.在线测试

测试websocket连接

4.WebSocket 调试

WebSocket 调试神器