Asp.Net Core, Angular 2, SignalR для чайников

/// <reference path="../models/ForHelloHub.ts"/> import { IHelloHub, DataInfo, ChatMessage, User}  from "../models/ForHelloHub"; import { EventEmitter } from '@angular/core'; import { SelectItem } from 'primeng/primeng'; declare var $: any;  export class HelloHub implements IHelloHub {     // Все сообщения     public allMessages: ChatMessage[];     // Флаг подключения к Хабу     public connectionExists: Boolean;     // Пользователь зарегистрировал имя     public isRegistered: Boolean;     // $.connection.helloHub.server     private server: any;      // $.connection.helloHub.client     private client: any;     // $.connection.helloHub     private chat: any;      // ID подключения     private userId: string;     // Подключенные пользователи     public Users: SelectItem[];     // Событие об изменении списка пользователей     public onChangeUser: EventEmitter<void> = new EventEmitter<void>();      // Событие о получении сообщения     public onAddMessage: EventEmitter<void> = new EventEmitter<void>();     // Событие о подключении к хабу     public onConnected: EventEmitter<void> = new EventEmitter<void>();     // Событие о регистрации имент пользователя.     public onRegistered: EventEmitter<void> = new EventEmitter<void>();      constructor() {         this.userId = "";         // Установим начальный список с именем "Всем". При его выборе         // сообщения будут отправлены всем пользователям, кроме текущего         this.Users = [{ label: "Всем", value: ""}];         this.connectionExists = false;         this.isRegistered = false;          this.chat = $.connection.helloHub;         this.server = this.chat.server;         this.client = this.chat.client;          // Установим обработчики событий         this.registerOnServerEvents();         this.allMessages = new Array<ChatMessage>();          // Подсоединимся к Хабу         this.startConnection();     }       // Сортировка пользователей по имени. Всем должна быть первой     private sortUsers() {         this.Users.sort((a, b: SelectItem) => {             if (a.label == "Всем") return -1;              return a.label.toLocaleUpperCase().localeCompare(b.label.toLocaleUpperCase());          });      }       //установим обработчики к событиям от сервера     private registerOnServerEvents(): void {          let self = this;           // Событие о получении сообщения         //Task addMessage(string Name, string str, string ConnectionId);         this.client.addMessage = (name: string, message: string, ConnectionId: string) => {             // Добавление сообщений на веб-страницу              console.log('addMessage ' + message);             self.addMessage(name, message,ConnectionId);         };          // Событие о регистрации пользователя                //Task onConnected(string id, string userName, List < User > users);         this.client.onConnected = function (id: string, userName: string, allUsers: User[]) {             self.isRegistered = true;                self.userId = id;             // Добавление всех пользователей             for (let user of allUsers) {                  self.addUser(user.ConnectionId, user.Name);                }              self.sortUsers();             // Сообщим об изменении списка пользователей             self.onRegistered.emit();         };           //Task onNewUserConnected(string id, string userName);         // Добавляем нового пользователя         this.client.onNewUserConnected = (id: string, name: string) => {              self.addUser(id, name);         };          //Task onUserDisconnected(string id, string Name);         // Удаляем пользователя        this.client.onUserDisconnected = (id: string, userName: string) => {              let idx = self.Users.findIndex((cur: SelectItem) => {                 return cur.value == id;             });              if (idx != -1) {                 return self.Users.splice(idx, 1);              };          }            }      // Найдем пользователя по id     // Если не находим то создаем нового пользователя     findUser(userName:string,id: string): SelectItem     {         let idx = this.Users.findIndex((cur: SelectItem) => {             return cur.value == id;         });          if (idx != -1) {             return this.Users[idx];         }         return { label: userName, value:id }               }     // Обработаем сообщение с сервера     addMessage(name: string, message: string, ConnectionId: string): void {          this.allMessages.splice(0, 0, new ChatMessage(message, new Date, this.findUser(name, ConnectionId)));         this.onAddMessage.emit();      }       // Добавим пользователя и отсортируем по наименованию     addUser(id: string, name: string): void {         if (this.userId === "") return;          if (this.userId !== id) {             let usr = { label: name, value: id };             this.Users.push(usr);             this.sortUsers();             this.onChangeUser.emit();         }     }      // Подключимся к Хабу     private startConnection(): void {         let self = this;         $.connection.hub.start().done((data: any) => {             console.log('startConnection ' + data);             self.connectionExists = true;             self.onConnected.emit();             console.log('Send  onConnected');         }).fail((error) => {             console.log('Could not connect ' + error);          });     }  //======= методы и события сервера      // Отошлем сообщение Всем или конкретному пользователю     sendEcho(str: string, Кому: string)     {          this.server.sendEcho(str, Кому);     }      // Отошлем сообщение по имени     sendByName(message: string, Кому: string)     {          this.server.sendByName(message, Кому);     }         // Зарегистрироваться на сервере по имени     connect(userName: string)     {         this.server.connect(userName);      }     } 

import { Component, NgZone, ViewChild, AfterViewInit } from '@angular/core'; import { HelloHub } from '../services/HelloHubServise'; import { ChatMessage } from '../models/ForHelloHub'; import { SelectItem} from 'primeng/primeng'; import { Dropdown2 } from '../Dropdown/Dropdown';   @Component({     selector: 'p-HelloHubComponent',     template: require('./SignalRHelloHub.html') })   export class HelloHubComponent {     @ViewChild(Dropdown2)     public dropdown: Dropdown2;      public allMessages: ChatMessage[];     public Users: SelectItem[];     public selectedUser: string;     public Message: string;     public selectUsername: boolean=false;     constructor(private _signalRService: HelloHub) {         // Подключимся к событиям от сервиса         this.subscribeToEvents();        // Получим все сообщения полученные за время существования страницы        this.allMessages = this._signalRService.allMessages;      // Получим данные о пользователях         this.Users = _signalRService.Users;              }      // Метод отправки сообщений взависимости от выбранных данных     public sendMessage() {                    if (this.dropdown.value == "") // Если Выбран "Всем" отправлем  всем пользователям, кроме отправителя         {                 this._signalRService.sendEcho(this.Message, "");             }             else {             // В 1С может быть несколько пользователей с одним именем                  if (!this.selectUsername) // Если не стоит галка "По Имени" то отправляем конкретному мользователю                     this._signalRService.sendEcho(this.Message, this.dropdown.value);                 else  // отправляем сообщение всем пользователям с выбранным именем                     this._signalRService.sendByName(this.Message, this.dropdown.selectedOption.label);             }              this.Message = "";             }      private subscribeToEvents(): void {          let self = this;             // Обновим данные о полученных сообщениях         this._signalRService.onAddMessage.subscribe(() => {             self.allMessages = this._signalRService.allMessages;         });          // Обновим данные о пользователях         this._signalRService.onChangeUser.subscribe(() =>         { this.Users = self._signalRService.Users; }         );     }       }

 <div class="container" id="MainMessage">         <form role="form"  (ngSubmit)="sendMessage()">              <div class="form-group">                 <textarea type="text" [(ngModel)]="Message" name="Message" class="form-control" placeholder="Сообщение"></textarea>             </div>              <div class="form-group">                 <div class="btn-group open">                     <button  type="submit" class="btn btn-info">Отправить</button>                 </div>                 <div class="btn-group" id="users">                     <p-dropdown2 [options]="Users" [(ngModel)]="selectedUser" name="dropdownUsers"></p-dropdown2>                 </div>                 <div class="btn-group" id="SendByName">                     <div class="checkbox">                         <label>                             <input type="checkbox" name="CheckBoxSendByName" [(ngModel)]="selectUsername"  [disabled]="dropdown.value==''"> По имени                         </label>                     </div>                   </div>             </div>           </form>       </div>      <div class="row">          <div class="col-xs-12 col-md-8" id="GetingMessage">             <template ngFor let-item [ngForOf]="allMessages">                 <div class='panel panel-primary'>                     <div class='panel-heading'>                         {{item.From.label}} от {{item.Sent.toLocaleString()}}                     </div>                     <div class='panel-body'>                     {{item.Message}}                     </div>                 </div>             </template>         </div>         <div class="col-xs-6 col-md-4">          </div>     </div>