Vue3 + Ts + Vite项目 websoket封装使用

2024-09-04 11:04

本文主要是介绍Vue3 + Ts + Vite项目 websoket封装使用,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

文章目录

    • 一、安装
    • 二、封装
    • 三、请求地址配置
        • 3.1 将接口地址放到 public
        • 3.2 引入 ipconfig.js 文件
        • 3.3 全局类型声明
    • 四、页面使用
        • 4.1 引用
        • 4.2 注册
    • 五、说明


一、安装

npm

npm install websocket --save-dev

pnpm

pnpm install websocket --save-dev

二、封装

在 /src/utils 文件夹下创建 websocket.ts 文件,并放入如下代码

import { onUnmounted } from 'vue'//设置
interface SocketOptions {//心跳间隔heartbeatInterval?: number//超时重传reconnectInterval?: number//最大重传次数maxReconnectAttempts?: number
}class Socket {//路径url: stringws: WebSocket | null = nullopts: SocketOptions//重传次数reconnectAttempts: number = 0listeners: { [key: string]: Function[] } = {}//心跳间隔heartbeatInterval: number | null = null//构造函数constructor(url: string, opts: SocketOptions = {}) {this.url = urlthis.opts = {//心跳间隔heartbeatInterval: 30000,//超时重传reconnectInterval: 5000,//最大重传次数maxReconnectAttempts: 5,...opts}this.init()}//初始化init() {this.ws = new WebSocket(this.url)this.ws.onopen = this.onOpen.bind(this)this.ws.onmessage = this.onMessage.bind(this)this.ws.onerror = this.onError.bind(this)this.ws.onclose = this.onClose.bind(this)}//打开onOpen(event: Event) {console.log('WebSocket opened:', event)this.reconnectAttempts = 0this.startHeartbeat()this.emit('open', event)}//收到的WebSocket消息onMessage(event: MessageEvent) {// console.log('WebSocket message received:', event.data);this.emit('message', event.data)}//错误onError(event: Event) {console.error('WebSocket error:', event)this.emit('error', event)}//重连逻辑中,在连接失败后自动重新连接onClose(event: CloseEvent) {console.log('WebSocket closed:', event)this.stopHeartbeat()this.emit('close', event)//重连逻辑中,在连接失败后自动重新连接,但会限制重连的次数和每次重连之间的间隔时间if (this.opts.maxReconnectAttempts !== 0 && this.reconnectAttempts < this.opts.maxReconnectAttempts!) {setTimeout(() => {// console.log("我有错误了1111111111111111111111111111111111111");this.reconnectAttempts++this.init()}, this.opts.reconnectInterval)}}//开始心跳检测startHeartbeat() {if (!this.opts.heartbeatInterval) returnthis.heartbeatInterval = window.setInterval(() => {if (this.ws?.readyState === WebSocket.OPEN) {this.ws.send('ping')}}, this.opts.heartbeatInterval)}//停止心跳检测stopHeartbeat() {if (this.heartbeatInterval) {clearInterval(this.heartbeatInterval)this.heartbeatInterval = null}}//发送消息send(data: string) {if (this.ws?.readyState === WebSocket.OPEN) {this.ws.send(data)} else {console.error('WebSocket is not open. Cannot send:', data)}}//事件监听器注册功能的实现on(event: string, callback: Function) {if (!this.listeners[event]) {this.listeners[event] = []}this.listeners[event].push(callback)}//从事件监听器中移除off(event: string) {if (this.listeners[event]) {delete this.listeners[event]}}//在事件监听器中触发一个指定的事件emit(event: string, data: any) {this.listeners[event]?.forEach(callback => callback(data))}
}export function useSocket(url: string, opts?: SocketOptions) {const socket = new Socket(url, opts)onUnmounted(() => {socket.off('open')socket.off('message')socket.off('error')socket.off('close')socket.ws?.close() // 关闭WebSocket连接})return {socket,send: socket.send.bind(socket),on: socket.on.bind(socket),off: socket.off.bind(socket)}
}

三、请求地址配置

3.1 将接口地址放到 public

在这里插入图片描述

3.2 引入 ipconfig.js 文件

在这里插入图片描述

3.3 全局类型声明
declare global {/*** Window 的类型提示*/interface Window {__APP_INFO__: __APP_INFO__global_config: { wsURL: string }}
}

在这里插入图片描述


四、页面使用

4.1 引用
import { useSocket } from '@/utils/websocket'
4.2 注册
// 注意:此处 useSocket() 中用的就是我们配置的全局地址
// 开发结束,打包给后端,后端同时可以自行修改 ipconfig.js 文件中 websokect 地址,这样部署上线之后 websokect 也能正常运行
const { socket, on } = useSocket((window as any).global_config.wsURL)on('close', () => console.log('Socket closed!'))
//webSocket连接上服务器时
on('open', (event: any) => {console.log('webSocket连接上服务器时', event)
})
socket.on('message', (data: any) => {if (data) {// TODO: 此处拿到后端推送过来的数据,进行你后续的数据渲染逻辑console.log(JSON.parse(data))}
})

五、说明

在这里插入图片描述

这篇关于Vue3 + Ts + Vite项目 websoket封装使用的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1135837

相关文章

解决Maven项目idea找不到本地仓库jar包问题以及使用mvn install:install-file

《解决Maven项目idea找不到本地仓库jar包问题以及使用mvninstall:install-file》:本文主要介绍解决Maven项目idea找不到本地仓库jar包问题以及使用mvnin... 目录Maven项目idea找不到本地仓库jar包以及使用mvn install:install-file基

Python使用getopt处理命令行参数示例解析(最佳实践)

《Python使用getopt处理命令行参数示例解析(最佳实践)》getopt模块是Python标准库中一个简单但强大的命令行参数处理工具,它特别适合那些需要快速实现基本命令行参数解析的场景,或者需要... 目录为什么需要处理命令行参数?getopt模块基础实际应用示例与其他参数处理方式的比较常见问http

C 语言中enum枚举的定义和使用小结

《C语言中enum枚举的定义和使用小结》在C语言里,enum(枚举)是一种用户自定义的数据类型,它能够让你创建一组具名的整数常量,下面我会从定义、使用、特性等方面详细介绍enum,感兴趣的朋友一起看... 目录1、引言2、基本定义3、定义枚举变量4、自定义枚举常量的值5、枚举与switch语句结合使用6、枚

使用Python从PPT文档中提取图片和图片信息(如坐标、宽度和高度等)

《使用Python从PPT文档中提取图片和图片信息(如坐标、宽度和高度等)》PPT是一种高效的信息展示工具,广泛应用于教育、商务和设计等多个领域,PPT文档中常常包含丰富的图片内容,这些图片不仅提升了... 目录一、引言二、环境与工具三、python 提取PPT背景图片3.1 提取幻灯片背景图片3.2 提取

springboot项目如何开启https服务

《springboot项目如何开启https服务》:本文主要介绍springboot项目如何开启https服务方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录springboot项目开启https服务1. 生成SSL证书密钥库使用keytool生成自签名证书将

使用Python实现图像LBP特征提取的操作方法

《使用Python实现图像LBP特征提取的操作方法》LBP特征叫做局部二值模式,常用于纹理特征提取,并在纹理分类中具有较强的区分能力,本文给大家介绍了如何使用Python实现图像LBP特征提取的操作方... 目录一、LBP特征介绍二、LBP特征描述三、一些改进版本的LBP1.圆形LBP算子2.旋转不变的LB

Maven的使用和配置国内源的保姆级教程

《Maven的使用和配置国内源的保姆级教程》Maven是⼀个项目管理工具,基于POM(ProjectObjectModel,项目对象模型)的概念,Maven可以通过一小段描述信息来管理项目的构建,报告... 目录1. 什么是Maven?2.创建⼀个Maven项目3.Maven 核心功能4.使用Maven H

Python中__init__方法使用的深度解析

《Python中__init__方法使用的深度解析》在Python的面向对象编程(OOP)体系中,__init__方法如同建造房屋时的奠基仪式——它定义了对象诞生时的初始状态,下面我们就来深入了解下_... 目录一、__init__的基因图谱二、初始化过程的魔法时刻继承链中的初始化顺序self参数的奥秘默认

SpringBoot使用GZIP压缩反回数据问题

《SpringBoot使用GZIP压缩反回数据问题》:本文主要介绍SpringBoot使用GZIP压缩反回数据问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录SpringBoot使用GZIP压缩反回数据1、初识gzip2、gzip是什么,可以干什么?3、Spr

HTML5中的Microdata与历史记录管理详解

《HTML5中的Microdata与历史记录管理详解》Microdata作为HTML5新增的一个特性,它允许开发者在HTML文档中添加更多的语义信息,以便于搜索引擎和浏览器更好地理解页面内容,本文将探... 目录html5中的Mijscrodata与历史记录管理背景简介html5中的Microdata使用M