websocket全局封装使用

news/2024/9/23 22:35:05/

WebSocket对象的创建
WebSocket对象的关闭
启用心跳机制,避免断连
消息推送,接收到消息后进行业务逻辑处理
重连机制,如果断连后尝试一定次数的重连,超过最大次数后仍然失败则关闭连接
调用案例如下:
const socketManager = new WebSocketManager(‘ws://example.com/socket’, receiveMessage)
socketManager.start()

javascript">export default class WebSocketManager {constructor(url = null, receiveMessageCallback = null) {this.socket = null // WebSocket 对象this.pingTimeout = null // 心跳计时器this.reconnectTimeout = 5000 // 重连间隔,单位:毫秒this.maxReconnectAttempts = 10 // 最大重连尝试次数this.reconnectAttempts = 0; // 当前重连尝试次数this.url = url // WebSocket 连接地址this.receiveMessageCallback = receiveMessageCallback // 接收消息回调函数}/*** 初始化*/async start() {if (this.url) {// 连接WebSocketthis.connectWebSocket()} else {console.error('WebSocketManager erros: 请传入连接地址')}}/*** 创建WebSocket连接*/connectWebSocket() {// 创建 WebSocket 对象this.socket = new WebSocket(this.url)// 处理连接打开事件this.socket.addEventListener('open', event => {// 心跳机制this.startHeartbeat()})// 处理接收到消息事件this.socket.addEventListener('message', event => {this.receiveMessage(event)})// 处理连接关闭事件this.socket.addEventListener('close', event => {// 清除定时器clearTimeout(this.pingTimeout)clearTimeout(this.reconnectTimeout)// 尝试重连if (this.reconnectAttempts < this.maxReconnectAttempts) {this.reconnectAttempts++this.reconnectTimeout = setTimeout(() => {this.connectWebSocket()}, this.reconnectTimeout)} else {// 重置重连次数this.reconnectAttempts = 0console.error('已达到最大重新连接尝试次数。无法重新连接。')}})// 处理 WebSocket 错误事件this.socket.addEventListener('error', event => {console.error('WebSocketManager error:', event)})}/*** 启动心跳机制*/startHeartbeat() {this.pingTimeout = setInterval(() => {// 发送心跳消息this.sendMessage('ping')}, 10000) // 每隔 10 秒发送一次心跳}/*** 发送消息* @param {String} message 消息内容*/sendMessage(message) {if (this.socket.readyState === WebSocket.OPEN) {this.socket.send(message);} else {console.error('WebSocketManager error: WebSocket连接未打开,无法发送消息。')}}/*** 接收到消息*/receiveMessage(event) {// 根据业务自行处理console.log('receiveMessage:', event.data)// 传入回调函数自行处理this.receiveMessageCallback && receiveMessageCallback(event.data)}/*** 关闭连接*/closeWebSocket() {this.socket.close()// 清除定时器 重置重连次数clearTimeout(this.pingTimeout)clearTimeout(this.reconnectTimeout)this.reconnectAttempts = 0}
}

http://www.ppmy.cn/news/1450608.html

相关文章

llamaindex 中GPTVectorStoreIndex 和 VectorStoreIndex区别

在 llama_index 库中,GPTVectorStoreIndex 和 VectorStoreIndex 都是用于创建向量存储索引的类,但它们在某些方面有所不同。 底层模型: GPTVectorStoreIndex 使用 GPT (Generative Pre-trained Transformer) 模型来生成文本的向量表示。它利用 GPT 模型的上下文理解能力来捕获…

centos学习-压缩和解压缩命令

CentOS 压缩与解压缩命令详解 在CentOS操作系统中&#xff0c;压缩和解压缩命令是极为常用的工具&#xff0c;用于对文件进行打包、压缩和解压缩操作。这些命令能够方便地处理大量的文件&#xff0c;使其更易于拷贝、移动和存储。本文将详细介绍CentOS中常见的压缩解压缩命令的…

身份证号对应地区信息-MySQL

这里写自定义目录标题 MySQL表结构MySQL表对应数据 MySQL表结构 CREATE TABLE idcard_contrast (code varchar(2000) NOT NULL COMMENT 身份证前六位,value varchar(3000) DEFAULT NULL COMMENT 对应地址 ) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COMMENT身份证对照表;MySQL表对…

Java虚拟机(JVM)之字节码文件

让我们先来简单了解一下JVM。 JVM功能&#xff1a; 1、解释和运行&#xff1a;对字节码文件中的指令&#xff0c;实时的解释成机器码让计算机执行。 2、内存管理&#xff1a;自动为对象、方法等分配内存&#xff1b;自动的垃圾回收机制&#xff0c;回收不再使用的对象。 3、即…

Linux专栏07:Linux基本指令之文件搜索指令

博客主页&#xff1a;Duck Bro 博客主页系列专栏&#xff1a;Linux专栏关注博主&#xff0c;后期持续更新系列文章如果有错误感谢请大家批评指出&#xff0c;及时修改感谢大家点赞&#x1f44d;收藏⭐评论✍ Linux基本指令之文件搜索指令 编号&#xff1a;07 文章目录 Linux基…

香港理工大学内地事务总监陆海天教授确认出席“边缘智能2024 - AI开发者峰会”并发表主题演讲

隨著AI技術的日新月異&#xff0c;我們正步入一個邊緣計算智能化與分布式AI相互融合的新紀元。這一變革不僅推動了分布式智能創新應用的飛速發展&#xff0c;還使得邊緣智能——這一結合邊緣計算和智能技術的新興領域&#xff0c;逐漸成為引領AI發展的重要力量。通過其分布式和…

boost::asio::ip::tcp::socket set_option

Boost asio 官方教程简介_asio::write-CSDN博客 boost::asio::ip::tcp::socket 是一个用于异步I/O操作的类&#xff0c;它是Boost.Asio库的一部分&#xff0c;专门用于处理TCP套接字。 以下是一个简单的使用 boost::asio::ip::tcp::socket 的例子&#xff0c;这个例子展示了如…

Web性能优化:实践和技巧,如代码切割、懒加载、预加载、预渲染等来提高页面加载速度和优化用户体验

代码切割&#xff08;Code Splitting&#xff09;&#xff1a;这是一种将你的代码拆分为多个较小的包的技术&#xff0c;然后按需加载或并行加载这些包。这可以显著减少首次页面加载时所需的时间。 延迟加载&#xff08;Lazy Loading&#xff09;&#xff1a;这种技术是指只当…