网站设计的创新点,深圳网站建设服务公,做业务在那几个网站上找客户端,wordpress自定义注册页面模板文章目录 一. 目标二. 前置环境三. websocket通用模板 一. 目标
先有实时数据需要展示. 由于设备量极大且要对设备参数实时记录展示.axios空轮询不太适合. 选择websocket长连接通讯.
使用pinia原因是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 结尾。(比如 useUserStoreuseCartStoreuseProductStore)
// 第一个参数是你的应用中 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:7531const 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)}}})
