React开发一个WebSocket

export default class SocketService {static instance = null;static get Instance() {if (!this.instance) {this.instance = new SocketService();}return this.instance;}// 和服务端连接的socket对象ws = null;// 存储回调函数callBackMapping = {};// 标识是否连接成功connected = false;// 记录重试的次数sendRetryCount = 0;// 重新连接尝试的次数connectRetryCount = 0;//  定义连接服务器的方法close() {if (this.ws !== null){this.ws.close();}}connect() {// 连接服务器if (!window.WebSocket) {return console.log('您的浏览器不支持WebSocket');}let url = `wss://${location.host}/screen_ws`;this.ws = new WebSocket(url);// 连接成功的事件this.ws.onopen = () => {// console.log('连接服务端成功了');this.connected = true;// 重置重新连接的次数this.connectRetryCount = 0;let classSocket = localStorage.getItem('classSocket');setTimeout(() => {this.send(classSocket);}, 600);};// 1.连接服务端失败// 2.当连接成功之后, 服务器关闭的情况this.ws.onclose = () => {console.log('连接服务端失败');this.connected = false;this.connectRetryCount++;setTimeout(() => {this.connect();}, 500 * this.connectRetryCount);};// 得到服务端发送过来的数据this.ws.onmessage = (evt) => {const res = evt.data;var arrall = [];var arr = res.split('{"cmd_code"');//  console.log(arr);if (arr.length>0){arr.forEach(element => {if (element){let arr = elementarrall.push(JSON.parse('{"cmd_code"'+arr));}});}arrall.forEach(item1=>{const socketType = item1.message_type;// console.log(socketType);// console.log(item1);if (this.callBackMapping[socketType]) {// const realData = msg.data // 得到该图表的数据this.callBackMapping[socketType].call(this,item1)}})};}// 回调函数的注册registerCallBack(socketType, callBack) {this.callBackMapping[socketType] = callBack;}// 取消某一个回调函数unRegisterCallBack(socketType) {delete this.callBackMapping[socketType];}// 发送数据的方法send(data) {if (this.connected) {this.sendRetryCount = 0;try {this.ws.send(data);} catch (e) {console.error('Failed to send data:', e);// 这里不再重试发送,因为 WebSocket 可能已经关闭或不可用// 可以考虑设置一个错误处理回调或执行其他错误恢复策略}} else {if (this.sendRetryCount < MAX_RETRY_COUNT) { // 假设 MAX_RETRY_COUNT 是一个定义好的最大重试次数this.sendRetryCount++;setTimeout(() => {this.send(data);}, this.sendRetryCount * 500);} else {console.error('Max retry count reached. Giving up sending data:', data);// 处理达到最大重试次数的情况,比如记录日志、触发错误处理回调等}}
}
}

请注意,我添加了一个 `MAX_RETRY_COUNT` 常量来表示最大重试次数,并在达到这个次数时停止重试。同时,我也移除了 `catch` 块中的重复发送逻辑,并添加了适当的错误处理。

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

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

相关文章

C++ : STL容器之list剖析

STL容器之list剖析 一、几个重要接口&#xff08;一&#xff09;push_back 与 emplace_back&#xff08;二&#xff09;sort1、系统中的sort2、list中的sort &#xff08;三&#xff09;splice&#xff08;四&#xff09;unique 和 merge1、unique2、merge 二、list的模拟实现&…

新手小白,如何研究货币相关性

研究货币对之间的相关性可以帮助交易者理解市场动态&#xff0c;从而优化交易策略。以下是一个详细的研究方向&#xff0c;包括每个步骤的代码&#xff0c;以及一些深入探索的建议。 研究方向 选择货币对&#xff1a;确定需要研究的两个货币对。 数据收集&#xff1a;获取选…

如何保证Redis和数据库的数据一致性

文章目录 0. 前言1. 补充知识&#xff1a;CP和AP2. 什么情况下会出现Redis与数据库数据不一致3. 更新缓存还是删除缓存4. 先操作缓存还是先操作数据库4.1 先操作缓存4.1.1 数据不一致的问题是如何产生的4.1.2 解决方法&#xff08;延迟双删&#xff09;4.1.3 最终一致性和强一致…

【Postman】如何导出导入数据文件?Postman链接分享?

方式一&#xff1a;postman分享链接 1.1 导出 1.2 导入 1.3 导入完成后删除分享的链接 方式二&#xff1a;postman导出导入json 2.1 导出 2.2 post导入json数据

基于asp.NET的图书借阅系统

文章目录 前言项目介绍技术介绍功能介绍核心代码数据库参考 系统效果图 前言 文章底部名片&#xff0c;获取项目的完整演示视频&#xff0c;免费解答技术疑问 项目介绍 随着科学技术水平的逐年发展&#xff0c;构建一个高效、便捷的图书借阅系统。解决传统图书馆借阅过程中存…

全面了解CAN总线协议

提及总线&#xff0c;总是让人联想到那些交错在一起的计算机电线。那么这些电线如何发挥功效呢&#xff1f;这还得配合总线协议的管理来使用。那么今天我们介绍的就是CAN总线协议。看看这个协议的含义和应用吧。 CAN总线协议基本概念 1. 报文 总线上的信息以不同格式的报文发…

工业以太网之战:EtherCAT是如何杀出重围的?

前言 EtherCAT 是一种开放的实时工业以太网协议&#xff0c;由德国倍福公司开发并在 2003 年 4 月的汉诺威工业博览会上首次亮相&#xff0c;目前由 EtherCAT 技术协会&#xff08;ETG&#xff09;进行维护和推广。经过 21 年的不断发展&#xff0c;EtherCAT 显示出极强的生命…

移动 Web核心笔记(二)

空间转换 空间&#xff1a;是从坐标轴角度定义的 X 、Y 和 Z 三条坐标轴构成了一个立体空间&#xff0c;Z 轴位置与视线方向相同。 空间转换也叫 3D转换 属性&#xff1a;transform 平移 /*单独设置 z轴效果不明显*/ transform: translate3d(x, y, z); transform: translateX(…

PostgreSQL学习笔记:PostgreSQL vs MySQL

PostgreSQL 和 MySQL 都是广泛使用的关系型数据库管理系统&#xff0c;它们有以下一些对比&#xff1a; 一、功能特性 1. 数据类型支持 PostgreSQL&#xff1a;支持丰富的数据类型&#xff0c;包括数组、JSON、JSONB、范围类型、几何类型等。对于复杂数据结构的存储和处理非…

多线程——单例模式

目录 前言 一、设计模式 二、饿汉模式 三、懒汉模式 1.单线程版 2.多线程版 结尾 前言 前面的几篇文章中介绍了多线程编程的基础知识&#xff0c;在本篇文章开始&#xff0c;就会利用前面的多线程编程知识来编写一些代码案例&#xff0c;从而使大家可以更好的理解运用多…

Cypress安装用命令安装

安装node 试一下&#xff0c;安装yarn 用命令安装Cypress 下面找个截图说&#xff1a;会给用给几个用例引导你怎么写测试脚本

阿里云 EMR Serverless Spark 版正式开启商业化

阿里云 EMR Serverless Spark 版已于2024年9月14日正式商业化售卖&#xff0c;本文将简要介绍 EMR Serverless Spark 的产品优势、应用场景、支持地域&#xff0c;及计费模式等。 EMR Serverless Spark 是一款云原生&#xff0c;专为大规模数据处理和分析而设计的全托管 Server…

基于JSP实习管理系统【附源码】

基于SSM的学生管理系统&#xff08;源码L文说明文档&#xff09; 目录 4 系统设计 4.1 系统概述 4.2系统功能结构设计 4.3数据库设计 4.3.1数据库E-R图设计 4.3.2 数据库表结构设计 5 系统实现 5.1管理员功能介绍 5.1.1管理员登录 5.1.2…

数字身份管理建设是传统社会向数字社会演进的核心关键

当前&#xff0c;新一轮科技革命和产业变革突飞猛进。科学技术尤其是以互联网、大数据、云计算、人工智能和区块链等为代表的数字技术正与社会交往、社会服务、社区建设、社会治理等领域不断渗透融合&#xff0c;社会正在由人与环境构成的物理关系总和向“万物数字化”和万物互…

重磅!望繁信科技与德勤中国签署战略合作协议

2022年&#xff0c;望繁信科技与德勤中国签署流程挖掘战略合作协议&#xff01;双方强强联合&#xff0c;在拓展流程优化市场、推动企业数智融合等领域展开深度合作&#xff0c;持续共建具有全球影响力的流程挖掘新生态。 根据协议内容&#xff0c;双方计划在未来三年内&#x…

软考攻略/超详细/系统集成项目管理工程师/基础知识分享18

6.5数据分析及应用 6.5.1 数据集成&#xff08;掌握&#xff09; 数据集成就是将驻留在不同数据源中的数据进行整合&#xff0c;向用户提供统一的数据视图&#xff0c;使得用户能以透明的方式访问数据。 WebServices技术是一个面向访问的分布式计算模型&#xff0c;它的本质是…

RabbitMQ 入门(六)SpringAMQP五种消息类型(Direct Exchange)

一、发布订阅-DirectExchange&#xff08;路由模式&#xff09; 在Fanout模式中&#xff0c;一条消息&#xff0c;会被所有订阅的队列都消费。但是&#xff0c;在某些场景下&#xff0c;我们希望不同的消息被不同的队列消费。这时就要用到Direct类型的Exchange。 Direct Exchan…

关键链项目管理是什么?它如何优化传统项目管理?

在项目管理的世界里&#xff0c;方法论千千万万&#xff0c;但真正能够提升项目效率和成功率的却并不多见。关键链项目管理&#xff08;Critical Chain Project Management, CCPM&#xff09;作为一种独特且高效的管理方式&#xff0c;正在被越来越多的企业所采用。相较于传统的…

NAND 数据恢复:使用 VNR 闪存数据恢复软件提取闪存转储中的块

天津鸿萌科贸发展有限公司从事数据安全服务二十余年&#xff0c;致力于为各领域客户提供专业的数据恢复、数据备份解决方案与服务&#xff0c;并针对企业面临的数据安全风险&#xff0c;提供专业的相关数据安全培训。 天津鸿萌科贸发展有限公司是专业 NAND 闪存数据恢复工具 VN…

linux下离线安装jq工具

故障现象&#xff1a; 当前使用的是CentOS7&#xff0c; 使用sudo yum install jq这个命令后&#xff0c;总是报错 Loaded plugins: fastestmirror, langpacks Determining fastest mirrors ... Cannot find a valid baseurl for repo: extras/7/x86_64 使用uname -a查看我当…