[完善] 聊天室的 signalR 连接逻辑;

src/app/home/commonComponents/chat-window/chat-window.component.ts

@@ -4,6 +4,7 @@ import signalR from '../../../../signalRChat'
 import { HttpClient } from '@angular/common/http';
 import { StationWeeklyPlanComponent } from '../../task/station-weekly-plan/station-weekly-plan.component';
 import { StationTaskExecutionComponent } from '../../task/station-task-execution/station-task-execution.component';
+import { HubConnection } from '@microsoft/signalr';
 
 
 @Component({
@@ -25,7 +26,7 @@ export class ChatWindowComponent implements OnInit {
 
   userId
   userName
-  ngOnInit(): void {
+  async ngOnInit(): Promise<void> {
 
     this.userId = JSON.parse(sessionStorage.getItem('userData')).id
     this.userName = JSON.parse(sessionStorage.getItem('userData')).name
@@ -38,8 +39,8 @@ export class ChatWindowComponent implements OnInit {
 
 
 
-    signalR.initSR(this.taskId, this.getAllMessages());
-
+    await signalR.initSR(this.taskId);
+    await this.getAllMessages();
     // 接收来自中心的消息
     (signalR.SR as any).on('receiveMessage', (message: any) => {
       console.log('收到消息', message)
@@ -64,33 +65,28 @@ export class ChatWindowComponent implements OnInit {
   /**
    * 获得所有消息
    */
-  getAllMessages() {
+  async getAllMessages() {
     this.isLoading = true
     console.log('任务id', this.taskId)
     console.log('this', this)
-    this.http.get('/api/TaskChats/Groups', {
-      params: {
-        TaskId: this.taskId,
-        PageNumber: 1,
-        PageSize: 999,
-        SortProperty: 'CreationTime',
-        SortType: 'asc'
-      }
-    }).subscribe((data: any) => {
-      this.MessagesList = data.items[0].taskChatMessages ? data.items[0].taskChatMessages : []
-      this.members = data.items[0].members
-
-      this.members.forEach(item => {
-        this.chatName += item.name + ' '
+    try {
+      this.http.get(`/api/TaskChats/Groups/${this.taskId}`).subscribe((data: any) => {
+        this.MessagesList = data.taskChatMessages || []
+        this.members = data.members || []
+        this.members.forEach(item => {
+          this.chatName += item.name + ' '
+        })
+        this.chatName = this.chatName + '的群聊' + '(' + this.members.length + ')'
+        this.isLoading = false
+        console.log('chatName', this.chatName)
+        console.log('消息列表', this.MessagesList)
+        setTimeout(() => {
+          this.scrollToBottom()
+        }, 0);
       })
-      this.chatName = this.chatName + '的群聊' + '(' + this.members.length + ')'
-      this.isLoading = false
-      console.log('chatName', this.chatName)
-      console.log('消息列表', this.MessagesList)
-      setTimeout(() => {
-        this.scrollToBottom()
-      }, 0);
-    })
+    } catch (error) {
+      console.log(error)
+    }
   }
 
 

src/signalRChat.ts

@@ -1,8 +1,9 @@
 import * as signalR from '@microsoft/signalr'
+import { connect } from 'http2';
 export default {
     SR: {},
     // 初始化连接
-    initSR: function (id, fun) {
+    initSR: async function (id) {
         const that = this
         // // 连接 SignalR
         const options: signalR.IHttpConnectionOptions = {
@@ -23,17 +24,9 @@ export default {
         // 4.启动连接的方法
         async function start() {
             try {
-                await (that.SR as any).start().then(() => {
-                    console.log('加入聊天室', id)
-                    that.SR.send("joinRoom", id).then(() => {
-
-                        setTimeout(() => {
-                            fun
-                        }, 0);
-
-                    })
-
-                });
+                await that.SR.start();
+                console.assert(that.SR.state === signalR.HubConnectionState.Connected)
+                await that.SR.send("joinRoom", id).then(() => console.log("已加入聊天室"));
             } catch (err) {
                 setTimeout(start, 5000);
             }
@@ -46,7 +39,7 @@ export default {
         });
 
         // 6.启动连接
-        start();
+        await start();
     },
     // 停止连接，因为调用that.SR.stop(),同时会触发5操作，所以用了flag
     stopSR: function () {