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.mzph.cn/news/882657.shtml

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

相关文章

【Python实例】Python读取并绘制tif数据

【Python实例】Python读取并绘制tiff数据 Python实例-以全球不透水面积数据为例数据准备&#xff1a;全球不透水面积数据基于gdal库绘制tif图基于Rasterio库绘制tif图 参考 GeoTIff 是一个标准的.tif 文件或是一个图像文件格式&#xff0c;它包含了一些额外的空间信息&#xff…

Prometheus 抓取 nginx 访问日志的指标

要通过 Prometheus 的 NGINX Exporter 来抓取 NGINX 中的日志信息&#xff0c;例如状态码为 4xx 或 5xx 的日志&#xff0c;需要结合以下几种工具和方法&#xff1a; 1. NGINX Exporter 基础功能 NGINX Exporter 是一个 Prometheus Exporter&#xff0c;用于从 NGINX 的 /sta…

.mkp勒索病毒攻击全攻略:防护、数据恢复与安全建议

导言 随着互联网的发展&#xff0c;勒索病毒的威胁也在不断升级&#xff0c;给个人和企业的数据安全带来了巨大的挑战。其中&#xff0c;[datastorecyberfear.com].mkp、 [tsai.shenmailfence.com].mkp、 [sspdlk00036cock.li].mkp勒索病毒作为一种新型的加密型恶意病毒&#…

Chromium 中HTML5 WebSocket实现分析c++(一)

一、WebSocket前端接口定义&#xff1a; WebSocket 对象提供了用于创建和管理 WebSocket 连接&#xff0c;以及可以通过该连接发送和接收数据的 API。 使用 WebSocket() 构造函数来构造一个 WebSocket。 构造函数 WebSocket(url[, protocols]) 返回一个 WebSocket 对象。 …

如何读书?

如何读书&#xff1f; 方法论、读书、意义、思考背景 对于知识获取一直有一个疑问&#xff0c;那就是如何有效获取知识&#xff1f;这个答案我自己并没有总结出来&#xff0c;其一是本文要谈的读书&#xff0c;其他呢&#xff1f;多了暂未想到&#xff0c;先写读书吧。 恰巧…

System:oneshot类型的service

有的时候,某个进程只在特殊的情况下运行一下即可,不需要一直以服务的形式待命,这种情况下,可以设置service的type为oneshot,然后设置RemainAfterExit=yes。 这样设置的service,即使在其进程启动完成之后退出了,systemd 也仍然会认为这个服务还在运行中,将此服务视为活…

新时代下吉林省城乡流动人才就业问题及路径探析

摘要&#xff1a;新时代背景下&#xff0c;中国经济快速发展&#xff0c;城乡融合发展成为缩小城乡差距&#xff0c;推动共同富裕的重要方式。吉林省作为东北老工业基地&#xff0c;传统产业竞争优势减弱&#xff0c;城乡流动人才就业规模增加&#xff0c;并呈现“农村-城市”的…

prompt learning

prompt learning 对于CLIP&#xff08;如上图所示&#xff09;而言&#xff0c;对其prompt构造的更改就是在zero shot应用到下游任务的时候对其输入的label text进行一定的更改&#xff0c;比如将“A photo of a{obj}”改为“[V1][V2]…[Vn][Class]”这样可学习的V1-Vn的token…

业务开发常见问题-并发工具类

hello&#xff0c;大家好&#xff0c;本讲我们一起聊一下常见的几个并发工具类的使用和坑&#xff01; 在日常工作中&#xff0c;我们经常会遇到多线程并发问题&#xff0c;比如ThreadLocal、锁、ConcurrentHashMap、CopyOnWriteArrayList等。那么如何正常的使用呢&#xff1f;…

【最新通知】2024年Cisco思科认证CCNA详解

CCNA现在涵盖安全性、自动化和可编程性。该计划拥有一项涵盖IT职业基础知识的认证&#xff0c;包括一门考试和一门培训课程&#xff0c;助您做好准备。 CCNA培训课程和考试最近面向最新技术和工作岗位进行了重新调整&#xff0c;为您提供了向任何方向发展事业所需的基础。CCNA认…

blender分离含有多个动作的模型,并导出含有材质的fbx模型

问题背景 笔者是模型小白&#xff0c;需要将网络上下载的fbx模型中的动作&#xff0c;分离成单独的动作模型&#xff0c;经过3天摸爬滚打&#xff0c;先后使用了blender&#xff0c;3d max&#xff0c;unity&#xff0c;最终用blender完成&#xff0c;期间参考了众多网络上大佬…

3.1.1ReactOS系统中搜索给定长度的空间地址区间函数的实现

系列文章目录 //搜索给定长度的空间地址区间 PMADDRESS_SPACE AddressSpace,//该进程用户空间 ULONG_PTR Length,//寻找的空间间隔大小 ULONG_PTR Granularity,//粒度位&#xff0c;表明空间起点的对齐要求&#xff0c;注意是起点地址 ULONG_PTR TopDown);函数的定义&#xf…

【Ansiable】ansible的模块和主机清单

目录 一、介绍一些运维自动化工具 二、Ansible 概述/简介 三、Ansible 工作机制 3.1 内部工作机制 3.2 外部工作机制 四、Ansible 执行流程 五、Ansblie 安装以及日常操作模块***** 5.1 ansible 环境安装部署 5.2 ansible 命令行模块 5.2.1 command 模块 5.2.2 shel…

html5的简单问题

1.html5结构语义化 用正确的标签做正确的事情。 便于团队的开发和维护&#xff0c;在没有加载css的情况下也能呈现较好的内容与结构代码&#xff0c;易于阅读。 有利于seo&#xff0c;提高可访问性。 2.html5新特性 增加&#xff1a;用于媒介回访的video和autio元素&#…

NVIDIA Jetson支持的神经网络加速的量化平台

NVIDIA Jetson支持的神经网络加速的量化工具、技术 NVIDIA Jetson 是专为边缘计算和嵌入式系统设计的高性能计算平台&#xff0c;它支持多种深度学习模型的部署和推理。对于神经网络加速的量化平台&#xff0c;Jetson 支持以下技术和工具&#xff1a; TensorRT&#xff1a;Ten…

Python Bagging算法详解与应用案例

这里写目录标题 Python Bagging算法详解与应用案例引言一、Bagging的基本原理1.1 Bagging的概念1.2 Bagging的步骤1.3 Bagging的优势与挑战 二、Python中Bagging的面向对象实现2.1 DecisionTree 类的实现2.2 Bagging 类的实现2.3 Trainer 类的实现 三、案例分析3.1 使用Bagging…

字符、解释型语言、编程语言的互操作、输出

字符 同样是1&#xff0c;有人看到的是数字&#xff0c;有人看到的是字符&#xff0c;还有人看到的是一个小目标。 不同语言的字符 正则表达式把字符分成普通字符和元字符&#xff0c;元字符为了搭配匹配。比如.代表任意非换行字符&#xff0c;这对于通配很简便&#xff0c;用\…

明源云ERP报表服务GetErpConfig.aspx接口存在敏感信息泄露

一、漏洞简介 在访问 /service/Mysoft.Report.Web.Service.Base/GetErpConfig.aspx?erpKeyerp60 路径时&#xff0c;返回了包含敏感信息的响应。这些信息包括但不限于数据库连接字符串、用户名、密码、加密密钥等。这些敏感信息的暴露可能导致以下风险&#xff1a;数据库访问…

【IPv6】IPv6 NAT66介绍

参考链接 IPv6-to-IPv6 Network Address Translation (NAT66) (ietf.org)https://datatracker.ietf.org/doc/id/draft-mrw-nat66-00.html IPv6 NAT66 NAT66&#xff0c;全称为Network Address Translation for IPv6 to IPv6&#xff0c;是一种用于IPv6网络的地址转换技术。在…

Tkinter -- python GUI学习与使用

前言 python GUI 目前pythonGUI有很多&#xff0c;哪一个最好&#xff1f; 先说说我选择的思路&#xff0c;我的目的是开发一个易用的软件&#xff0c;最重要的是稳定&#xff0c;并且碰到问题能够解决&#xff0c;因此&#xff0c;我的目标很明确&#xff0c;有比较大的用户群…