vue3+ts+pinia整合websocket

这篇具有很好参考价值的文章主要介绍了vue3+ts+pinia整合websocket。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。


一. 目标

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

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


二. 前置环境

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

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模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vite4+Typescript+Vue3+Pinia 从零搭建(2) - ts配置

    项目代码同步至码云 weiz-vue3-template 关于tsconfig的配置字段可查看其他文档,如 typeScript tsconfig配置详解 文件修改如下: 修改文件如下: 新建文件夹 types ,用来存放类型定义。比如新建 index.d.ts : 后续也可以新增其他文件,比如 global.d.ts 存放全局定义, router.d.ts 存放路由定

    2024年02月05日
    浏览(87)
  • 使用vue3 + TS + Pinia + Vant4 + vite搭建商城H5项目框架

    本文主要将如何利用搭建一个初始化的商城H5项目框架。初始化阶段使用的技术栈有:vue3.2、vue-router、 TS 、 Pinia 、 Vant4、Less、vite                         node -v 检测是否有安装node.js,未安装请先去官网安装node.js         终端输入: npm init vite         自定

    2024年02月12日
    浏览(65)
  • ai问答:vue3+pinia+WebSocket 封装断线重连(实战)

    把 Socket 实例 挂载到全局 为方便梳理,请忽略 typescript ,一切尽在注释中 Socket封装(断线重连) 这个 WebSocket 类封装了 WebSocket 的连接、重连、发送数据等方法。 在 connect 方法中,它会连接 WebSocket ,并绑定相关事件监听。 在 onclose 事件中,它会调用 reconnect 方法进行重连。 recon

    2024年02月03日
    浏览(55)
  • vite + vue3 + vue-router4 + ts + element plus + pinia + axios构建项目

    最后是完整的vite.config.ts、main.ts配置 1、先用vite创建一个项目 2、安装element plus vite.config.ts配置组件按需导入,图标自动导入   main.ts配置 页面文件使用 3、安装axios main.ts 4、安装pinia /stores/index.ts /stores/counter.ts main.ts 页面使用 5、安装router4 /router/index main.ts   6、vite.config.ts常

    2023年04月25日
    浏览(55)
  • Vue3 Vite4 ElementPlus TS模板(含Vue-Router4+Pinia4)

    手动安装配置Vue3 ElementPlus模板比较繁琐,网上寻找一些模板不太符合自己预期,因此花点精力搭建一个符合自己需求的架子 采用最新的组件,版本如下: vite 4.3.9 vite-plugin-mock 2.9.8 vue 3.3.4 pinia 2.1.3 vue-router 4.2.2 element-plus 2.3.6 满足自己以下功能: Vite工具热启动速度快,修改后

    2024年02月08日
    浏览(54)
  • 从0开始搭建一个vue3+vite+ts+pinia+element-plus的项目

    前言:vue3+ts+vite大家已经都开始用了,最近也在学习,基本上是零基础开始ts的学习,很多语法知识是边写边查,没有系统的学习ts。此处展示从零开始,搭建的一个框架,方便拿来即用! 其中框架选择vue,语言选择typeScript 项目启动成功以后如下所示: 为了方便日常工作中

    2024年02月06日
    浏览(65)
  • vue3 + TS + elementplus + pinia实现后台管理系统左侧菜单联动实现 tab根据路由切换联动内容

    效果图:  home.vue页面代码 left.vue页面代码 tab.vue页面代码 pinia里面的代码 安装 使用插件  在main.ts中注册 路由代码 我把代码放git上了,有需要的自行拉取 https://gitee.com/Flechazo7/vue3.git

    2024年02月09日
    浏览(50)
  • 前端新手Vue3+Vite+Ts+Pinia+Sass项目指北系列文章 —— 第一章 技术栈简介 (开篇)

    旨在帮助初学者掌握使用现代前端技术栈构建应用的基础知识和技能。在这个系列中,我们将深入探讨如何结合Vue.js、Vite、TypeScript、Pinia和Sass这些强大的工具和框架来开发现代化的前端应用。 通过这个系列,我们将从零开始构建一个完整的前端项目,覆盖项目初始化、组件

    2024年02月05日
    浏览(53)
  • uni-app+vue3+ts+pinia报错【“hasInjectionContext“ is not exported by “node_modules/.store/pinia@2.1.7/n】

    【完整报错】\\\"hasInjectionContext\\\" is not exported by \\\"node_modules/.store/pinia@2.1.7/node_modules/vue-demi/lib/index.mjs\\\", imported by \\\"node_modules/.store/pinia@2.1.7/node_modules/pinia/dist/pinia.mjs\\\". 【报错原因】版本不匹配 查看package.json下pinia和vue版本 【版本参考界面】https://github.com/vuejs/pinia/blob/v2/packages/pini

    2024年04月11日
    浏览(46)
  • 前端新手Vue3+Vite+Ts+Pinia+Sass项目指北系列文章 —— 第十一章 基础界面开发 (组件封装和使用)

    Vue 是前端开发中非常常见的一种框架,它的易用性和灵活性使得它成为了很多开发者的首选。而在 Vue2 版本中,组件的开发也变得非常简单,但随着 Vue3 版本的发布,组件开发有了更多的特性和优化,为我们的业务开发带来了更多便利。本文将介绍如何使用 Vue3 开发业务组件

    2024年02月19日
    浏览(89)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包