欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 汽车 > 时评 > React开发一个WebSocket

React开发一个WebSocket

2024/10/23 8:44:55 来源:https://blog.csdn.net/u012834688/article/details/142911035  浏览:    关键词: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` 块中的重复发送逻辑,并添加了适当的错误处理。

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com