网站营销型,wordpress主题安装空白,长春微网站,展厅室内设计公司今天不睡,熬夜赶了个WebSocket 二次封装,也对这几天文章摸鱼感到抱歉,所以我出了一个注释非常非常全的代码
思路如下 首先#xff0c;需要通过调用connect方法来建立WebSocket连接。当连接成功时#xff0c;会调用我提供的回调函数#xff0c;并将连接成功的消息帧作为参数…今天不睡,熬夜赶了个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 Promisevoid, 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 Promiseany, 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); });
