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

})
相关推荐
未来之窗软件服务42 分钟前
跨平台 WebSocket 服务器的设计与实现 —— 基于.NET 8 的跨操作系统解决方案linux,macos,windows——开发工具
linux·服务器·websocket·仙盟创梦ide·东方仙盟
wmm_会飞的@鱼4 小时前
FlexSim-汽车零部件仓库布局优化与仿真
服务器·前端·网络·数据库·数学建模·汽车
-XWB-5 小时前
【安全漏洞】网络守门员:深入理解与应用iptables,守护Linux服务器安全
linux·服务器·网络
还是朝夕5 小时前
OSPF路由协议 多区域
网络
消失的旧时光-19435 小时前
Android网络框架封装 ---> Retrofit + OkHttp + 协程 + LiveData + 断点续传 + 多线程下载 + 进度框交互
android·网络·retrofit
晴天¥6 小时前
阶段1--域名服务器
运维·服务器·网络
许愿OvO6 小时前
IP--MGER综合实验报告
网络·tcp/ip·智能路由器
thginWalker6 小时前
图解网络-小林coding笔记(持续更新)
网络·笔记
小刘|7 小时前
Https以及CA证书
网络·网络协议·https
Codeking__7 小时前
链表算法综合——重排链表
网络·算法·链表