ASP.NET Core, Angular 2, SignalR for Dummies

 /// <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>