ts + websocket封装

1,使用方式

// 开始链接websocket
const ws = websocket({url: '/websocket',onmessage: e => {// 获取websocket信息console.log(e)}
})// 关闭websocket
ws.close()

2,源码如下

// 定义定时器
type TimeoutHandle = ReturnType<typeof setTimeout>// 定义回调函数
interface Fn<T = any, R = T> {(...arg: T[]): R
}// 定义参数
interface IOptions {// 链接url: string// tokentoken?: string// 发送心跳间隔时间heart_time?: number//检查链接状态时间check_time?: number//断线后重连间隔时间lock_time?: number// 成功回调onmessage: Fn<any, any>// 失败回调onerror?: Fn<any, any>// 打开回调onopen?: Fn<any, any>// 关闭回调onclose?: Fn<any, any>
}// 方法
const websocket = (options: IOptions) => {class Ws {// socket实例public ws: WebSocket | undefined// 默认基础地址private readonly baseUrl: string = import.meta.env.VITE_WS_BASE_API as string// socket 地址private readonly url: string | undefined// socket请求成功数据返回回调函数private readonly onmessage: Fn<any, any>// socket请求失败返回回调函数private readonly onerror?: Fn<any, any>// socket打开回调private readonly onopen?: Fn<any, any>// socket关闭回调private readonly onclose?: Fn<any, any>// tokenprivate readonly token: string | undefined = tokenCookies.get()// 心跳时间private readonly heart_time: number = 3000// 检查连接状态时间private readonly check_time: number = 3000// 重连时间private readonly lock_time: number = 4000// 心跳定时器private h_timer: TimeoutHandle | undefined// 检查连接状态定时器private c_timer: TimeoutHandle | undefined// 重连定时器private l_timer: TimeoutHandle | undefined// 重连锁private isLock: boolean = falseconstructor(options: IOptions) {const { url, token, heart_time, check_time, lock_time } = optionsconst { onmessage, onerror, onopen, onclose } = optionsif (!url || !onmessage) {const message = !url ? '链接url' : '回调函数onmessage'throw new Error(`socket${message}不能为空`)}// 链接urlthis.url = this.baseUrl + url// 数据返回回调函数this.onmessage = onmessage// 失败回调if (!!onerror) {this.onerror = onerror}// 打开回调if (!!onopen) {this.onopen = onopen}// 关闭回调if (!!onclose) {this.onclose = onclose}// tokenthis.token = token || tokenCookies.get()// 心跳时间this.heart_time = heart_time || 3000// 检查连接状态时间this.check_time = check_time || 3000// 重连时间this.lock_time = lock_time || 4000// 初始化this.wsInit()}// 初始化socketpublic wsInit(): void {if (!this.url || !this.token) {return}// 拼接tokenconst url = this.url + '?token=' + this.tokenconst ws = new WebSocket(url)// 打开处理ws.onopen = e => {// 心跳this.heartCheck()// 打开回调if (!!this.onopen) {this.onopen(e)}}// 关闭处理ws.onclose = e => {// 重连if (!!this.token) {this.reconnect()}// 关闭回调if (!!this.onclose) {this.onclose(e)}}// 错误处理ws.onerror = e => {// 重连if (!!this.token) {this.reconnect()}// 回调if (!!this.onerror) {this.onerror(e)}}// 消息接收ws.onmessage = e => {// 心跳this.heartCheck()// 回调this.onmessage(e)}// 赋值this.ws = ws}// 心跳private heartCheck(): void {// 清除心跳、检查连接接定时器this.clearTimeout()// 心跳定时器this.h_timer = setTimeout(() => {// 发送ping;(this.ws as WebSocket).send('type:ping')// 检查连接状态定时器,确认连接状态this.c_timer = setTimeout(() => {// 连接失败,进行关闭if ((this.ws as WebSocket).readyState !== 1) {this.close()}}, this.check_time)}, this.heart_time)}// 重连private reconnect(): void {if (this.isLock) {return}this.isLock = truethis.l_timer && clearTimeout(this.l_timer)// 重连定时器this.l_timer = setTimeout(() => {this.wsInit()this.isLock = false}, this.lock_time)}// 清除心跳、检查连接状态定时器private clearTimeout(): void {this.h_timer && clearTimeout(this.h_timer)this.c_timer && clearTimeout(this.c_timer)}// 销毁关闭public close(): void {// 关闭WebSocket;(this.ws as WebSocket).close()// 清除心跳、检查连接接定时器this.clearTimeout()}}return new Ws(options)
}
export default websocket

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/643983.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C语言第七弹---循环语句

✨个人主页&#xff1a; 熬夜学编程的小林 &#x1f497;系列专栏&#xff1a; 【C语言详解】 【数据结构详解】 循环语句 1、while循环1.1、if和while的对比1.2、while语句的执行流程1.3、while循环的实践1.4、练习 2、for循环2.1、语法形式2.2、for循环的执行流程2.3、for循…

vue实现点击复制

3. 使用vue-clipboard2库 安装 npm install --save vue-clipboard2 main.js 中引入 <template> <div> <el-button type"primary" v-clipboard:copy"message2" v-clipboard:success"onCopy" v-cl…

沃通服务器密码机(WTHSM)

概述 沃通服务器密码机&#xff08;WTHSM&#xff09;由沃通CA自主设计开发&#xff0c;严格遵照国密局颁布技术规范&#xff0c;获得国密局颁发《商用密码产品认证证书》&#xff0c;是一款多安全功能、高稳定性、可扩展和快速部署的软硬件集成化安全设备&#xff0c;为应用提…

mybatis-plus代码生成器(文章最后给出了官方参考文档)

目 录 1、引入依赖 2、demo示例 3、总结 1、引入依赖 此时引入了mybatis-plus的相关依赖和mysql数据库依赖 <properties><mybatis-plus.version>3.0.5</mybatis-plus.version><velocity.version>2.0</velocity.version><mysql.version&g…

【.net/.net core】使用form-data方式发起post请求

使用场景&#xff1a;一般为在发起请求时&#xff0c;需要带着文件对象&#xff0c;即File类型参数。 public async void PostByFormData() {//创建一个MultipartFormDataContent对象&#xff0c;构建multipart/form-data请求体MultipartFormDataContent pushMemberParams n…

【手撕C语言 第八集】函数栈帧的创建与销毁

文章目录 一、什么是函数栈帧&#xff1f;二、函数栈帧能解决什么问题呢&#xff1f;&#xff08;1&#xff09;局部变量是如何创建的&#xff1f;&#xff08;2&#xff09;为什么局部变量不初始化内容是随机的&#xff1f;&#xff08;3&#xff09;函数调用时参数是如何传递…

MySQL修炼手册15:备份与恢复:保障数据安全的重要手段

目录 写在开头1 数据备份的重要性1.1 数据备份与恢复的基本概念1.1.1 数据备份的定义1.1.2 数据恢复的定义1.1.3 恢复点和恢复时间 1.2 不同备份方式的比较1.2.1 按备份内容和方式划分1.2.2 按备份的数据量和方式划分1.2.3 备份方式的选择 2 使用mysqldump进行备份2.1 mysqldum…

电磁兼容设计要点

电磁兼容的问题往往发生于高频状态下&#xff0c;个别情况除外&#xff08;Dips电压暂降与中断&#xff09;除外。高频思维&#xff0c;总而言之&#xff0c;就是器件的特性、电路的特性&#xff0c;在高频情况下和常规中低频状态下是不一样的&#xff0c;如果仍然按照普通的控…

Go 定时器:如何避免潜在的内存泄漏陷阱

这篇文章将探讨的是 Go 中如何高效使用 timer&#xff0c;特别是与select 一起使用时&#xff0c;如何防止潜在的内存泄漏问题。 引出问题 先看一个例子&#xff0c;我们在 Go 中的 select 使用定时器&#xff0c;实现为消息监听加上超时能力。 核心代码&#xff0c;如下所示…

暴雨信息:更大限度激发数字消费潜力

内需是中国经济发展的基本动力&#xff0c;也是满足人民日益增长的美好生活需要的必然要求。作为扩大内需的主动力和畅通国内大循环的关键环节&#xff0c;消费既是生产的最终目的和动力&#xff0c;也是人民对美好生活需要的直接体现。着力扩大国内需求&#xff0c;要把恢复和…

已解决Error:AttributeError: module ‘numpy‘ has no attribute ‘bool‘.

文章目录 引言报错分析解决方案1&#xff1a;降低NumPy版本解决方案2&#xff1a;更改NumPy源码 结尾 引言 在Python编程的世界里&#xff0c;NumPy无疑是一个不可或缺的库。它不仅在处理大规模数值计算中发挥着核心作用&#xff0c;而且为众多开发者提供了强大的支持。然而&a…

无刷电机学习-方波电调 程序篇1(AM32)

一、AM32简介 AM32 固件专为 ARM 处理器设计&#xff0c;用于控制无刷电机 (BLDC)。该固件旨在安全、快速、平滑、快速启动和线性油门。它适用于多种车辆类型和飞行控制器。 AM32具有以下特点&#xff1a; 可通过 betaflight 直通、单线串行或 arduino 升级固件伺服 PWM、Dsh…

Spring RabbitMQ那些事(3-消息可靠传输和订阅)

目录 一、序言二、生产者确保消息发送成功1、为什么需要Publisher Confirms2、哪些消息会被确认处理成功 三、消费者保证消息被处理四、Spring RabbitMQ支持代码示例1、 application.yml2、RabbigtMQ配置3、可靠生产者配置4、可靠消费者配置5、测试用例 一、序言 在有些业务场…

外包干了3年,跑路了。。。

&#x1f345; 视频学习&#xff1a;文末有免费的配套视频可观看 &#x1f345; 关注公众号【互联网杂货铺】&#xff0c;回复 1 &#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 故事的开始 最近这几天有点忧伤&#xff0c;因为带我的师傅要跑…

Vue3 Suspense 优雅地处理异步组件加载

✨ 专栏介绍 在当今Web开发领域中&#xff0c;构建交互性强、可复用且易于维护的用户界面是至关重要的。而Vue.js作为一款现代化且流行的JavaScript框架&#xff0c;正是为了满足这些需求而诞生。它采用了MVVM架构模式&#xff0c;并通过数据驱动和组件化的方式&#xff0c;使…

力扣 | 73. 矩阵置零

public class Problem_73_MatrixToZero {public void setZeros(int[][] matrix) {int m matrix.length;int n matrix[0].length;boolean flagRow false;boolean flagCol false;//先记录第一行本身是否包含0for (int i 0; i < n; i) {if (matrix[0][i] 0) flagRow tru…

使用Burp Collaborator验证无回显的RCE漏洞

使用Burp Collaborator验证无回显的RCE漏洞 1.概述2.Collaborator演示3.通过DNS查找外带命令执行结果1.概述 当应用程序容易受到命令注入攻击,但命令是异步执行时,就会发生异步操作系统命令注入漏洞。这意味着它对应用程序的响应没有明显影响 Burp Collaborator 可以帮助您…

Jenkins如何重置build number?

Jenkins如何重置build number&#xff1f; Jenkins调试过程中, 难免会产生很多无用的编译号&#xff0c;但需要清除无用build数据的时候&#xff0c;可以使用Script Consle来达到目的. 解决方案 直接说答案。 在脚本中填写如下语句&#xff1a; def jobName "xxx-Build&…

leetcode—— 腐烂的橘子

腐烂的橘子 在给定的 m x n 网格 grid 中&#xff0c;每个单元格可以有以下三个值之一&#xff1a; 值 0 代表空单元格&#xff1b;值 1 代表新鲜橘子&#xff1b;值 2 代表腐烂的橘子。 每分钟&#xff0c;腐烂的橘子 周围 4 个方向上相邻 的新鲜橘子都会腐烂。 返回 直到…

【Linux C | 进程】Linux 进程间通信的10种方式(1)

&#x1f601;博客主页&#x1f601;&#xff1a;&#x1f680;https://blog.csdn.net/wkd_007&#x1f680; &#x1f911;博客内容&#x1f911;&#xff1a;&#x1f36d;嵌入式开发、Linux、C语言、C、数据结构、音视频&#x1f36d; &#x1f923;本文内容&#x1f923;&a…