React开发一个WebSocket

ops/2024/10/21 23:58:16/
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/ops/127409.html

相关文章

图书管理新纪元:Spring Boot进销存系统

1系统概述 1.1 研究背景 随着计算机技术的发展以及计算机网络的逐渐普及&#xff0c;互联网成为人们查找信息的重要场所&#xff0c;二十一世纪是信息的时代&#xff0c;所以信息的管理显得特别重要。因此&#xff0c;使用计算机来管理图书进销存管理系统的相关信息成为必然。开…

滚雪球学Redis[6.1讲]:Redis的高级特性与应用

全文目录&#xff1a; 前言1. Redis事务Redis事务的概念与实现使用MULTI、EXEC命令实现事务Redis事务的注意事项与陷阱 2. Redis脚本与Lua使用Lua脚本的优势EVAL命令与Lua脚本的编写Lua脚本的安全性与性能 3. Redis分布式锁分布式锁的概念与应用场景使用Redis实现分布式锁Redlo…

什么是SQLite?

一、什么是SQLite? SQLite是一个进程内的软件库&#xff0c;实现了自给自足的、无服务器的、零配置的、事务性的SQL数据库引擎。它是一个零配置的数据库&#xff0c;这意味着与其他数据库不一样&#xff0c;您不需要在系统中配置。 就像其它数据库&#xff0c;SQLite引擎不是…

git分支模型

定义分支 长期分支 指长期存在的分支&#xff0c;也叫固定分支 developmaster 短期分支 短分支没有固定的分支名。但是有分支名规范 feature分支hotfix分支 分支模型 暂时无法在文档外展示此内容 参考 分支的目的是隔离&#xff0c;但多一个分支也意味着维护成本的增加。…

可调用对象和Lambda

可调用对象&#xff1a; 函数 函数指针 函数对象 Lambda表达式(匿名函数) 01 函数对象 如果一个类实现了"函数调用运算符()"的重载&#xff0c;那么这个类的对象称为函数对象(仿函数) 函数对象的行为&#xff0c;类似于函数&#xff0c;可以被调用 #include …

【Docker技术详解】(一)Docker镜像文件系统的关系和交互

Docker镜像文件系统的关系和交互 Docker 是用于容器化应用程序的平台&#xff0c;它通过镜像和容器来实现应用的隔离和管理。在这个过程中&#xff0c;Docker 镜像的文件系统与宿主机的文件系统之间有特定的关系和交互方式。本文将详细讨论这些关系&#xff0c;并提供一些示例…

PHP中的ReflectionClass常见用法

ReflectionClass是 PHP 中的一个类&#xff0c;它提供了有关类的信息的反射。 使用ReflectionClass可以在运行时获取关于类的各种信息&#xff0c;例如类的名称、方法、属性、注释等。 以下是一些常见的用法&#xff1a; 获取类的名称&#xff1a; $reflection new Reflec…

Linux 外设驱动 应用 3 串口

3 串口 3.1 串口原理 串行口是计算机一种常用的接口&#xff0c;具有连接线少&#xff0c;通讯简单&#xff0c;得到广泛的使用。常用的串口是 RS- 232-C接口(又称 EIA RS-232-C)它是在 1970 年由美国电子工业协会(EIA)联合贝尔系统、调制解调器厂家及计算机终端生产厂家共同…