Web实时通讯@microsoft/signalr

概要分析

signalr  是微软对 websocket技能的封装;

• build() 与后端signalR服务创建链接；
  
• 利用 on 方法监听后端界说的函数；ps：由后端发起，后端向前端发送数据
  
• 利用 invoke 自动触发后端的函数；ps：由前端发起，前端向后端发送哀求
  

安装依靠

1. pnpm install @microsoft/signalr --save

复制代码

组件封装

1. import * as signalR from "@microsoft/signalr";
3. const serverUrl = "https://youraddress";
5. class WebSocketManager {
6.     constructor() {
7.         this.connection = null;
8.         this.connectionStatus = 'disconnected';
9.     }
10.     createWebSocket(fileId) {
11.         this.connectionStatus = 'connecting';
12.         return new Promise((resolve, reject) => {
13.             try {
14.                 this.connection = new signalR.HubConnectionBuilder()
15.                     .withAutomaticReconnect()//断线自动重连
16.                     .withUrl(`${serverUrl}?fileId=${fileId}`)
17.                     .build();
19.                 //启动连接
20.                 this.connection.start().then(() => {
21.                     console.log("SignalR server 连接成功");
22.                     this.connectionStatus = 'connected';
23.                     resolve(this.connectionStatus);
24.                 }).catch((err) => {
25.                     this.connectionStatus = 'error'
26.                     console.error("SignalR server 连接失败", err);
27.                     reject(err);
28.                 });
30.             } catch (error) {
31.                 console.error('Failed to start connection:', error);
32.                 this.connectionStatus = 'error';
33.                 reject(err);
34.             }
35.         });
36.     }
38.     //获取状态
39.     getConnectionStatus() {
40.         return this.connectionStatus;
41.     }
43.     //获取连接对象
44.     getConnection() {
45.         return this.connection;
46.     }
48.     //断开连接
49.     stopWebSocket() {
50.         if (this.getConnectionStatus() === 'connected') {
51.             this.connection.stop().then(() => {
52.                 this.connectionStatus = 'disconnected';
53.                 console.log("SignalR server 连接断开");
54.             }).catch((err) => {
55.                 console.error("SignalR server 连接断开失败", err);
56.             });
57.         }
58.     }
60.     //发送消息
61.     sendMsg(msg) {
62.         if (this.getConnectionStatus() !== 'connected') {
63.             return console.error("SignalR server 未连接，无法发送消息");
64.         }
65.         this.connection.invoke("SendMessage", msg).catch((err) => {
66.             console.error("SignalR server 发送消息失败", err);
67.         });
68.     }
70.     //监听消息
71.     // receiveMsg() {
72.     //     return new Promise((resolve, reject) => {
73.     //         // console.log("receiveMsg=======>FileProcess");
74.     //         this.connection.on("HeartBeat", (msg) => {
75.     //             console.log("接收消息成功========>", msg);
76.     //             resolve(msg);
77.     //         })
78.     //     })
79.     // }
80. }
82. export default new WebSocketManager();

复制代码

利用案例

1. // 使用示例
2. const signalRService = new SignalRService('链接地址');
3. signalRService.start()
4.   .then(() => console.log('SignalR service started'))
5.   .catch(error => console.error('Failed to start SignalR service:', error));
7. // 在需要的时候发送消息
8. signalRService.send('Hello, SignalR!')
9.   .then(() => console.log('Message sent'))
10.   .catch(error => console.error('Failed to send message:', error));
12. // 接收消息
13. signalRService.receiveMessage((message: string) => {
14.   console.log("Received message:", message);
15. }, "后端定义的方法名称（获取由后端给前端发送的数据）")
17. // 停止连接
18. signalRService.stop();

复制代码