vue3+ts+pinia整合websocket

文章目录

    • [一. 目标](#一. 目标)
    • [二. 前置环境](#二. 前置环境)
    • [三. websocket通用模板](#三. websocket通用模板)

一. 目标

先有实时数据需要展示. 由于设备量极大且要对设备参数实时记录展示.axios空轮询不太适合.

选择websocket长连接通讯.

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


二. 前置环境

安装pinia

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

复制代码
npm install pinia    

三. websocket通用模板

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

typescript 复制代码
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)
        }
        
    }

})
相关推荐
lang2015092825 分钟前
Reactor ConnectableFlux支持多订阅者
java·网络
在下Z.40 分钟前
利用TCP协议,创建一个多人聊天室
网络·网络协议·tcp/ip
pipip.2 小时前
UDP————套接字socket
linux·网络·c++·网络协议·udp
Félix2512 小时前
计算机网络笔记(不全)
网络·计算机网络
阳洞洞3 小时前
https和http有什么区别
网络协议·http·https
朱包林5 小时前
day45-nginx复杂跳转与https
linux·运维·服务器·网络·云计算
孞㐑¥6 小时前
Linux之Socket 编程 UDP
linux·服务器·c++·经验分享·笔记·网络协议·udp
you秀7 小时前
HTTPS通信流程:SSL/TLS握手全解析
网络协议·https·ssl
某公司摸鱼前端7 小时前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app
2501_915921439 小时前
iOS IPA 混淆实测分析:从逆向视角验证加固效果与防护流程
websocket·网络协议·tcp/ip·http·网络安全·https·udp