• webSocket基于面向对象二次封装


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

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

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

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

    // 定义一个名为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);  
          }  
        });  
      }  
    }  
      
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60

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

    	// 使用示例:    
    	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);  
    	});
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
  • 相关阅读:
    spring boot + feign + Hystrix 整合 (亲测有效)
    linux操作系统有什么好处?
    Tomcat安装与配置
    C++核心编程
    【计算机网络】第三章课后习题答案
    深入理解 Java 中的 volatile 关键字
    Grafana alert预警+钉钉通知
    Acwing 143. 最大异或对
    ARM 汇编指令作业(求公约数、for循环实现1-100之间和、从SVC模式切换到user模式简单写法)
    Python入门系列(十一)一篇搞定python操作MySQL数据库
  • 原文地址:https://blog.csdn.net/weixin_44368963/article/details/134519944