当前位置：首页 > news >正文

webSocket基于面向对象二次封装

news 来源：原创 2024/5/19 11:26:43

今天不睡,熬夜赶了个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);  }  });  }  
}

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

	// 使用示例：    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);  });