一. 目标
先有实时数据需要展示. 由于设备量极大且要对设备参数实时记录展示.axios空轮询不太适合.
选择websocket长连接通讯.
使用pinia原因是pinia具备共享数据性质.可以作为消息队列缓存数据,降低渲染压力.同时方便多个页面或组件获取websocket数据
二. 前置环境
安装pinia
注册pinia不再详细叙述,自行看官方文档.文章来源:https://www.toymoban.com/news/detail-676481.html
npm install pinia
三. websocket通用模板
笔者自行整合网络资源,写了一套较为通用的通信模板. 包含 消息队列缓存, 心跳检测, 断线重连.读者可以自行阅读以下代码调整到业务所需.同时也请大家捉虫,笔者会及时修改.文章来源地址https://www.toymoban.com/news/detail-676481.html
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: {
// 这里是你的 getters
SET_SOCKET: (state: any, socket: any) => {
state.socket = socket;
},
SET_SOCKET_MESSAGE: (state: any, socketMessage: any) => {
state.socketMessage = socketMessage;
}
},
actions: {
// 这里是你的 actions
connectWebSocket() {
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 {
if(this.messageQueue.length > 2<<16) {
this.messageQueue = []
}
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)
}
}
})
到了这里,关于vue3+ts+pinia整合websocket的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!