webSocket基于面向对象二次封装

今天不睡,熬夜赶了个WebSocket 二次封装,也对这几天文章摸鱼感到抱歉,所以我出了一个注释非常非常全的代码

思路如下

首先,需要通过调用connect方法来建立WebSocket连接。当连接成功时,会调用我提供的回调函数,并将连接成功的消息帧作为参数传递给它。在回调函数中,我们可以打印消息帧到控制台中。如果连接失败,则会执行catch回调函数,并打印错误信息到控制台中。

一旦连接成功,可以继续执行订阅主题的操作。通过调用subscribe方法,可以订阅一个特定的主题。当接收到消息时,会调用提供的回调函数,并将解析后的数据作为参数传递给它。在回调函数中,可以打印收到的数据到控制台中。如果订阅失败,则会执行catch回调函数,并打印错误信息到控制台中。

看在这么全的份上,请点个赞,不懂得可以问博主,看到会回

ts 复制代码
// 定义一个名为WebSocketClient的类  
class WebSocketClient {  
  // 构造函数,接收一个url作为参数,用于初始化WebSocketClient对象  
  constructor(url: string) {  
    // 将传入的url赋值给this.url,保存url的信息  
    this.url = url;  
    // 初始化socket属性为null,表示尚未建立WebSocket连接  
    this.socket = null;  
    // 初始化stompClient属性为null,表示尚未建立Stomp客户端连接  
    this.stompClient = null;  
  }  
  
  // 定义一个名为connect的方法,用于建立WebSocket连接并返回Promise对象  
  connect() {  
    // 返回一个新的Promise对象,Promise的参数是一个函数,该函数接收resolve和reject两个参数  
     return new Promise<void, Error>((resolve, reject) => {  
      try {  
        // 创建一个新的SockJS实例,使用this.url作为参数,尝试建立WebSocket连接  
        this.socket = new SockJS(this.url);  
        // 使用已建立的WebSocket连接创建一个Stomp客户端,stompClient属性保存这个客户端的引用  
        this.stompClient = Stomp.over(this.socket);  
        // 设置stompClient的debug属性为null,关闭日志输出    
        this.stompClient.debug = null; // 关闭日志      
  
        // 使用stompClient的connect方法进行连接,传入空回调函数和错误回调函数  
        this.stompClient.connect({}, (frame: { [key: string]: any }) => { 
          // 当连接成功时,回调空回调函数,并将连接成功的消息帧传递给resolve参数  
          resolve(frame);  
        }, function (error) {  
          // 当连接失败时,回调错误回调函数,并将错误信息传递给reject参数  
          reject(error);  
        });  
      } catch (error) {  
        // 如果在尝试建立WebSocket连接或Stomp客户端的过程中抛出错误,将错误信息传递给reject参数  
        reject(error);  
      }  
    });  
  }  
  
  // 定义一个名为subscribe的方法,用于在已建立的连接上订阅主题并返回Promise对象  
  subscribe(topic: string) {  
    // 返回一个新的Promise对象,Promise的参数是一个函数,该函数接收resolve和reject两个参数  
 return new Promise<any, Error>((resolve, reject) => {  
      try {  
        // 使用已建立的stompClient和给定的主题进行订阅,传入一个回调函数和错误回调函数  
        this.stompClient.subscribe(topic, (data: any) => {  
          // 当接收到消息时,回调回调函数,并解析消息体为JSON格式的数据,然后打印到控制台中  
          var dataGm = JSON.parse(data.body);  
          console.log('数据', dataGm);  
          // 将解析后的数据传递给resolve参数,表示订阅成功完成  
          resolve(dataGm);  
        });  
      } catch (error) {  
        // 如果在尝试订阅主题的过程中抛出错误,将错误信息传递给reject参数  
        reject(error);  
      }  
    });  
  }  
}  
  

调用就像下面这样调用就好了

typescript 复制代码
	// 使用示例:    
	let socketUrl: string = "http://192.168.1.38:8080/gs-guide-websocket";  
	let client: WebSocketClient = new WebSocketClient(socketUrl);  
	client.connect().then((frame: { [key: string]: any }) => {  
	  console.log('连接成功', frame);  
	}).catch((error: Error) => {  
	  console.error('连接失败', error);  
	});  
	client.subscribe('/topic').then((dataGm: any) => {  
	  console.log('订阅成功', dataGm);  
	}).catch((error: Error) => {  
	  console.error('订阅失败', error);  
	});
相关推荐
高压锅_12207 小时前
Django Channels WebSocket实时通信实战:从聊天功能到消息推送
python·websocket·django
2501_9159184116 小时前
接口漏洞怎么抓?Fiddler 中文版 + Postman + Wireshark 实战指南
websocket·网络协议·tcp/ip·http·网络安全·https·udp
游戏开发爱好者82 天前
iOS重构期调试实战:架构升级中的性能与数据保障策略
websocket·网络协议·tcp/ip·http·网络安全·https·udp
却道天凉_好个秋2 天前
音视频学习(三十六):websocket协议总结
websocket·音视频
2501_916013742 天前
iOS 多线程导致接口乱序?抓包还原 + 请求调度优化实战
websocket·网络协议·tcp/ip·http·网络安全·https·udp
夏天想3 天前
优化 WebSocket 实现单例连接用于打印【待测试 】
网络·websocket·网络协议
2501_915921433 天前
Fiddler 中文版怎么配合 Postman 与 Wireshark 做多环境接口调试?
websocket·网络协议·tcp/ip·http·网络安全·https·udp
游戏开发爱好者83 天前
iOS App首次启动请求异常调试:一次冷启动链路抓包与初始化流程修复
websocket·网络协议·tcp/ip·http·网络安全·https·udp
2501_915106323 天前
频繁迭代下完成iOS App应用上架App Store:一次快速交付项目的完整回顾
websocket·网络协议·tcp/ip·http·网络安全·https·udp
00后程序员张4 天前
免Mac上架实战:全平台iOS App上架流程的工具协作经验
websocket·网络协议·tcp/ip·http·网络安全·https·udp