vue3+ts+pinia整合websocket

一. 目标

先有实时数据需要展示. 由于设备量极大且要对设备参数实时记录展示.axios空轮询不太适合.
选择websocket长连接通讯.

使用pinia原因是pinia具备共享数据性质.可以作为消息队列缓存数据,降低渲染压力.同时方便多个页面或组件获取websocket数据

二. 前置环境

安装pinia
注册pinia不再详细叙述,自行看官方文档.

npm install pinia    

三. websocket通用模板

笔者自行整合网络资源,写了一套较为通用的通信模板. 包含 消息队列缓存, 心跳检测, 断线重连.读者可以自行阅读以下代码调整到业务所需.同时也请大家捉虫,笔者会及时修改.

import {defineStore} from "pinia";
import {ref} from "vue";// 你可以对 `defineStore()` 的返回值进行任意命名，但最好使用 store 的名字，同时以 `use` 开头且以 `Store` 结尾。(比如 `useUserStore`，`useCartStore`，`useProductStore`)
// 第一个参数是你的应用中 Store 的唯一 ID。
export const useWebSocketStore = defineStore('resource', {// 其他配置...state: () => ({// 这里是你的状态socket: null,messageQueue: [],readyState: 0,socketMessage:'1'}),getters: {// 这里是你的 gettersSET_SOCKET: (state: any, socket: any) => {state.socket = socket;},SET_SOCKET_MESSAGE: (state: any, socketMessage: any) => {state.socketMessage = socketMessage;}},actions: {// 这里是你的 actionsconnectWebSocket() {const PING_INTERVAL = 5000; // 心跳间隔，单位为毫秒const heartbeatMessage = {type:0, msg:"ping"}; // 心跳消息const heartbeatMessage2 =  {type:0, msg:"pong", data:['在线设备']}; // 心跳消息const HOST_ADDRESS = 'ws://127.0.0.1:7531'const socket = ref(new WebSocket(HOST_ADDRESS))let checkTask = null// 监听连接事件socket.value.onopen = () => {// 启动心跳检测 确保连接存活 客户端每隔5秒向服务端发送一次心跳消息console.log(heartbeatMessage)checkTask = setInterval(() => {socket.value.send(JSON.stringify(heartbeatMessage))}, PING_INTERVAL)}// 监听消息事件socket.value.onmessage = (event) => {console.log(event.data,"event2")const message = JSON.parse(event.data)if (message.type == WebSocket.CONNECTING) {socket.value.send(JSON.stringify(heartbeatMessage2))return} else {console.log('WebSocket消息: ', message)this.SET_SOCKET_MESSAGE(message)}}// 监听关闭事件 断线重连socket.value.onclose = () => {if(this.socket.readyState === WebSocket.CLOSED) {this.messageQueue.forEach((message) => {this.sendMessage(message)});this.messageQueue = []}// 清除心跳计时器checkTask && clearInterval(checkTask)// 断线重连setTimeout(() => {this.connectWebSocket()},3000)}// 连接错误socket.value.onerror = (event) => {console.log('WebSocket error:', event)}},// 发送消息方法sendMessage(message: string) {this.socket.send(message)}}})