当前位置：首页 > news >正文

vue3使用webSocket

news 2025/6/29 17:52:54

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')
})