From 02683a49b7ccaadb1e4cbf6b6a73dacb11b5b763 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=BF=9F=E8=8D=A3=E5=9F=BA?= Date: Thu, 22 Sep 2022 09:42:50 +0800 Subject: [PATCH] =?UTF-8?q?[=E5=AE=8C=E5=96=84]=20=E8=81=8A=E5=A4=A9?= =?UTF-8?q?=E5=AE=A4=E7=9A=84=20signalR=20=E8=BF=9E=E6=8E=A5=E9=80=BB?= =?UTF-8?q?=E8=BE=91;?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../chat-window/chat-window.component.ts | 48 +++++++++---------- src/signalRChat.ts | 19 +++----- 2 files changed, 28 insertions(+), 39 deletions(-) diff --git a/src/app/home/commonComponents/chat-window/chat-window.component.ts b/src/app/home/commonComponents/chat-window/chat-window.component.ts index e0b1af9..0e09ff0 100644 --- a/src/app/home/commonComponents/chat-window/chat-window.component.ts +++ b/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 { 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) + } } diff --git a/src/signalRChat.ts b/src/signalRChat.ts index 815b729..8aee813 100644 --- a/src/signalRChat.ts +++ b/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 () {