React开发一个WebSocket

embedded/2024/10/21 22:46:35/
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.ppmy.cn/embedded/129383.html

相关文章

ITSS服务项目经理的的认证价值

ITSS 个人认证足以印证持证者拥有 IT 服务从业的基础能力。获取 ITSS 认证对于个人及企业于 IT 服务领域的发展具备关键意义。以下为 ITSS 认证的作用所体现的若干方面&#xff1a; &#xff08;1&#xff09;能力认证&#xff1a;其乃是一套客观且量化的准则&#xff0c;用以…

下载Edge/Chrome浏览器主题的背景图片

当我们为Edge安装了心仪的主题后&#xff0c;希望把对应的背景图片下载保存要怎么做呢&#xff0c;以下图的“湖心小屋”主题为例。如下图&#xff0c;我们已经在应用商店中按照了该主题。 当打开新标签页后&#xff0c;可以欣赏这个主题内置的背景图片。 如果想要下载这个背景…

Jmeter学习深入

Jmeter学习深入 一、jmeter接口关联 提取器: 。 CS5:给网页使用 。JSON:给JSON数据使用 。 边界:给字符串使用 。正则:更加高级的字符使用 。XPath:给网页使用 必须掌握: JSON边界 JSON 正则 1.边界提取器 给定两边取中间 2.正则提取器 正则:强大并且复杂 通过指定正则表…

10 django管理系统 - 管理员管理 - 新建管理员(通过模态框和ajax实现)

在文章“04 django管理系统 - 部门管理 - 新增部门”中&#xff0c;我们通过传统的新增页面来实现部门的添加。 在本文中&#xff0c;我们通过模态框和ajax来实现管理员的新增。 首先在admin_list.html中新建入口&#xff0c;使用按钮 <div class"panel-heading&quo…

全方面熟悉Maven项目管理工具(一)认识Maven、Maven如何安装?

1. Maven 1.1 应用场景&#xff1a; 本地仓库&#xff1a; 我们使用的jar依赖于maven的本地仓库 自动部署&#xff1a; 本地仓库推送到远程仓库&#xff0c; 远程库通知 Jenkins工具&#xff0c;Jenkins 调用Maven构建war包&#xff0c;Jenkins 再调用准备好的脚本程序&…

C++11 异常处理:优势、劣势与规范

目录 一、传统错误处理方式 二、C11 异常处理机制 三、C11 异常处理的优点 四、C11 异常处理的缺点 五、总结 在 C 编程中&#xff0c;异常处理是一种重要的错误处理机制。C11 对异常处理进行了一些改进和规范&#xff0c;本文将详细介绍 C11 异常处理的特点、优势、劣势以…

建筑智能化:为你打造智能生活

在当今科技迅猛发展的时代&#xff0c;建筑智能化成为了现代社会中不可或缺的一环。它让我们的生活更加便利舒适&#xff0c;也提高了工作效率和安全性。视频监控、系统集成、智能照明、安防管理、消防管理、停车场管理、电梯管理以及信息发布&#xff0c;这些都是建筑智能化的…

AWS账号的费用结构与使用指南

亚马逊网络服务&#xff08;AWS&#xff09;是全球领先的云计算平台&#xff0c;提供各种服务&#xff0c;包括计算、存储、数据库、人工智能等。对于许多新用户来说&#xff0c;在创建AWS账号时&#xff0c;常常会有一个疑问&#xff1a;AWS账号需要费用吗&#xff1f;我们九河…