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 43e009d..0776366 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,8 +26,8 @@ export class ChatWindowComponent implements OnInit { userId userName - ngOnInit(): void { - ChatWindowComponent.instance = this; + async ngOnInit(): Promise { + this.userId = JSON.parse(sessionStorage.getItem('userData')).id this.userName = JSON.parse(sessionStorage.getItem('userData')).name this.chatcontent = this.element.nativeElement.querySelector(`#chatcontent`) @@ -38,8 +39,8 @@ export class ChatWindowComponent implements OnInit { - signalR.initSR(this.taskId); - + 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/app/home/commonComponents/chat-window/dist/chat-window.component.js b/src/app/home/commonComponents/chat-window/dist/chat-window.component.js new file mode 100644 index 0000000..a657b5e --- /dev/null +++ b/src/app/home/commonComponents/chat-window/dist/chat-window.component.js @@ -0,0 +1,173 @@ +"use strict"; +var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { + var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; + if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); + else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; + return c > 3 && r && Object.defineProperty(target, key, r), r; +}; +var __param = (this && this.__param) || function (paramIndex, decorator) { + return function (target, key) { decorator(target, key, paramIndex); } +}; +var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) { + function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); } + return new (P || (P = Promise))(function (resolve, reject) { + function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } + function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } + function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); } + step((generator = generator.apply(thisArg, _arguments || [])).next()); + }); +}; +var __generator = (this && this.__generator) || function (thisArg, body) { + var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g; + return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g; + function verb(n) { return function (v) { return step([n, v]); }; } + function step(op) { + if (f) throw new TypeError("Generator is already executing."); + while (_) try { + if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t; + if (y = 0, t) op = [op[0] & 2, t.value]; + switch (op[0]) { + case 0: case 1: t = op; break; + case 4: _.label++; return { value: op[1], done: false }; + case 5: _.label++; y = op[1]; op = [0]; continue; + case 7: op = _.ops.pop(); _.trys.pop(); continue; + default: + if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; } + if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; } + if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; } + if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; } + if (t[2]) _.ops.pop(); + _.trys.pop(); continue; + } + op = body.call(thisArg, _); + } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; } + if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true }; + } +}; +exports.__esModule = true; +exports.ChatWindowComponent = void 0; +var core_1 = require("@angular/core"); +var signalRChat_1 = require("../../../../signalRChat"); +var station_weekly_plan_component_1 = require("../../task/station-weekly-plan/station-weekly-plan.component"); +var station_task_execution_component_1 = require("../../task/station-task-execution/station-task-execution.component"); +var ChatWindowComponent = /** @class */ (function () { + function ChatWindowComponent(ngZone, element, message, parentComponent, http, parentComponent2) { + this.ngZone = ngZone; + this.element = element; + this.message = message; + this.parentComponent = parentComponent; + this.http = http; + this.parentComponent2 = parentComponent2; + /** + * 消息列表 + */ + this.members = []; + this.MessagesList = []; + this.isLoading = false; + this.chatName = ''; + this.text = ''; + } + ChatWindowComponent.prototype.ngOnInit = function () { + return __awaiter(this, void 0, Promise, function () { + var _this = this; + return __generator(this, function (_a) { + switch (_a.label) { + case 0: + this.userId = JSON.parse(sessionStorage.getItem('userData')).id; + this.userName = JSON.parse(sessionStorage.getItem('userData')).name; + this.chatcontent = this.element.nativeElement.querySelector("#chatcontent"); + setTimeout(function () { + _this.scrollToBottom(); + }, 0); + return [4 /*yield*/, signalRChat_1["default"].initSR(this.taskId)]; + case 1: + _a.sent(); + return [4 /*yield*/, this.getAllMessages()]; + case 2: + _a.sent(); + // 接收来自中心的消息 + signalRChat_1["default"].SR.on('receiveMessage', function (message) { + console.log('收到消息', message); + _this.MessagesList.push(message); + if (_this.chatcontent.scrollHeight - (_this.chatcontent.scrollTop + _this.chatcontent.clientHeight) == 0) { + setTimeout(function () { + _this.scrollToBottom(); + }, 0); + } + }); + return [2 /*return*/]; + } + }); + }); + }; + /** + * 获得所有消息 + */ + ChatWindowComponent.prototype.getAllMessages = function () { + return __awaiter(this, void 0, void 0, function () { + var _this = this; + return __generator(this, function (_a) { + this.isLoading = true; + console.log('任务id', this.taskId); + console.log('this', this); + try { + this.http.get("/api/TaskChats/Groups/" + this.taskId).subscribe(function (data) { + _this.MessagesList = data.taskChatMessages || []; + _this.members = data.members || []; + _this.members.forEach(function (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(function () { + _this.scrollToBottom(); + }, 0); + }); + } + catch (error) { + console.log(error); + } + return [2 /*return*/]; + }); + }); + }; + ChatWindowComponent.prototype.ngOnDestroy = function () { + signalRChat_1["default"].stopSR(); + }; + ChatWindowComponent.prototype.close = function () { + this.parentComponent.closechat(); + this.parentComponent2.closechat(); + }; + ChatWindowComponent.prototype.send = function () { + var _this = this; + if (!this.text) { + this.message.create('warning', '输入不能为空'); + return; + } + // 发送消息 + signalRChat_1["default"].SR.send('sendMessage', this.taskId, this.text); + setTimeout(function () { + _this.scrollToBottom(); + _this.text = ''; + }, 0); + }; + ChatWindowComponent.prototype.scrollToBottom = function () { + this.chatcontent.scrollTop = this.chatcontent.scrollHeight; + }; + __decorate([ + core_1.Input() + ], ChatWindowComponent.prototype, "taskId"); + ChatWindowComponent = __decorate([ + core_1.Component({ + selector: 'app-chat-window', + templateUrl: './chat-window.component.html', + styleUrls: ['./chat-window.component.scss'] + }), + __param(3, core_1.Inject(station_weekly_plan_component_1.StationWeeklyPlanComponent)), + __param(5, core_1.Inject(station_task_execution_component_1.StationTaskExecutionComponent)) + ], ChatWindowComponent); + return ChatWindowComponent; +}()); +exports.ChatWindowComponent = ChatWindowComponent; diff --git a/src/dist/signalRChat.js b/src/dist/signalRChat.js new file mode 100644 index 0000000..433a912 --- /dev/null +++ b/src/dist/signalRChat.js @@ -0,0 +1,141 @@ +"use strict"; +var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) { + function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); } + return new (P || (P = Promise))(function (resolve, reject) { + function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } + function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } + function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); } + step((generator = generator.apply(thisArg, _arguments || [])).next()); + }); +}; +var __generator = (this && this.__generator) || function (thisArg, body) { + var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g; + return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g; + function verb(n) { return function (v) { return step([n, v]); }; } + function step(op) { + if (f) throw new TypeError("Generator is already executing."); + while (_) try { + if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t; + if (y = 0, t) op = [op[0] & 2, t.value]; + switch (op[0]) { + case 0: case 1: t = op; break; + case 4: _.label++; return { value: op[1], done: false }; + case 5: _.label++; y = op[1]; op = [0]; continue; + case 7: op = _.ops.pop(); _.trys.pop(); continue; + default: + if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; } + if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; } + if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; } + if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; } + if (t[2]) _.ops.pop(); + _.trys.pop(); continue; + } + op = body.call(thisArg, _); + } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; } + if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true }; + } +}; +exports.__esModule = true; +var signalR = require("@microsoft/signalr"); +exports["default"] = { + SR: {}, + // 初始化连接 + initSR: function (id) { + return __awaiter(this, void 0, void 0, function () { + // 4.启动连接的方法 + function start() { + return __awaiter(this, void 0, void 0, function () { + var err_1; + return __generator(this, function (_a) { + switch (_a.label) { + case 0: + _a.trys.push([0, 3, , 4]); + return [4 /*yield*/, that.SR.start()]; + case 1: + _a.sent(); + console.assert(that.SR.state === signalR.HubConnectionState.Connected); + return [4 /*yield*/, that.SR.send("joinRoom", id).then(function () { return console.log("已加入聊天室"); })]; + case 2: + _a.sent(); + return [3 /*break*/, 4]; + case 3: + err_1 = _a.sent(); + setTimeout(start, 5000); + return [3 /*break*/, 4]; + case 4: return [2 /*return*/]; + } + }); + }); + } + var that, options, url; + var _this = this; + return __generator(this, function (_a) { + switch (_a.label) { + case 0: + that = this; + options = { + accessTokenFactory: function () { return __awaiter(_this, void 0, void 0, function () { + return __generator(this, function (_a) { + return [2 /*return*/, sessionStorage.getItem('token')]; + }); + }); } + }; + url = '/hubs/taskchat'; + // 2.初始化连接 + that.SR = new signalR.HubConnectionBuilder() + .withUrl(url, options) + .configureLogging(signalR.LogLevel.Information) + .build(); + // 3. 在停止signalR时，不让onclose内的 start执行 + that.SR.flag = true; + // 5.关闭之后重连 + that.SR.onclose(function () { return __awaiter(_this, void 0, void 0, function () { + return __generator(this, function (_a) { + switch (_a.label) { + case 0: + if (!that.SR.flag) return [3 /*break*/, 2]; + return [4 /*yield*/, start()]; + case 1: + _a.sent(); + _a.label = 2; + case 2: return [2 /*return*/]; + } + }); + }); }); + // 6.启动连接 + return [4 /*yield*/, start()]; + case 1: + // 6.启动连接 + _a.sent(); + return [2 /*return*/]; + } + }); + }); + }, + // 停止连接，因为调用that.SR.stop(),同时会触发5操作，所以用了flag + stopSR: function () { + var that = this; + that.SR.flag = false; + function stop() { + return __awaiter(this, void 0, void 0, function () { + var err_2; + return __generator(this, function (_a) { + switch (_a.label) { + case 0: + _a.trys.push([0, 2, , 3]); + return [4 /*yield*/, that.SR.stop()]; + case 1: + _a.sent(); + console.log("signaR退出成功"); + return [3 /*break*/, 3]; + case 2: + err_2 = _a.sent(); + return [3 /*break*/, 3]; + case 3: return [2 /*return*/]; + } + }); + }); + } + stop(); + } +}; diff --git a/src/signalRChat.ts b/src/signalRChat.ts index fc62b3b..8aee813 100644 --- a/src/signalRChat.ts +++ b/src/signalRChat.ts @@ -1,10 +1,9 @@ import * as signalR from '@microsoft/signalr' -// import ChatWindowComponent from 'src/app/home/commonComponents/chat-window/chat-window.component' - +import { connect } from 'http2'; export default { SR: {}, // 初始化连接 - initSR: function (id) { + initSR: async function (id) { const that = this // // 连接 SignalR const options: signalR.IHttpConnectionOptions = { @@ -25,22 +24,9 @@ export default { // 4.启动连接的方法 async function start() { try { - await (that.SR as any).start().then(() => { - console.log('加入聊天室', id) - - setTimeout(() => { - that.SR.send("joinRoom", id).then(() => { - - setTimeout(() => { - - }, 0); - - }) - }, 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); } @@ -53,7 +39,7 @@ export default { }); // 6.启动连接 - start(); + await start(); }, // 停止连接，因为调用that.SR.stop(),同时会触发5操作，所以用了flag stopSR: function () {