Chat Application Using Angular 8, ASP.NET Core, Signal R

Now, add the SignalR client library to connect MessageHub from the Angular as below screenshot.

Create a Chat Service to connect SignalR

Create chat.service.ts class to establish a connection with Message Hub and to publish & receive chat messages.

Then, we have added a chat service as a provider in Ng Modules.

import { EventEmitter, Injectable } from '@angular/core';
import { HubConnection, HubConnectionBuilder } from '@aspnet/signalr';
import { Message } from '../models/message';
@Injectable()
export class ChatService {
  messageReceived = new EventEmitter<Message>();
  connectionEstablished = new EventEmitter<Boolean>();
  private connectionIsEstablished = false;
  private _hubConnection: HubConnection;
  constructor() {
    this.createConnection();
    this.registerOnServerEvents();
    this.startConnection();
  }
  sendMessage(message: Message) {
    this._hubConnection.invoke('NewMessage', message);
  }
  private createConnection() {
    this._hubConnection = new HubConnectionBuilder()
      .withUrl(window.location.href + 'MessageHub')
      .build();
  }
  private startConnection(): void {
    this._hubConnection
      .start()
      .then(() => {
        this.connectionIsEstablished = true;
        console.log('Hub connection started');
        this.connectionEstablished.emit(true);
      })
      .catch(err => {
        console.log('Error while establishing connection, retrying...');
        setTimeout(() => { this.startConnection(); }, 5000);
      });
  }
  private registerOnServerEvents(): void {
    this._hubConnection.on('MessageReceived', (data: any) => {
      this.messageReceived.emit(data);
    });
  }
}

Create a Chat app component

app.component.html

<div class="container">
  <h3 class="text-center chat_header">Chat Application</h3>
  <div class="messaging">
    <div class="inbox_msg">
      <div class="mesgs">
        <div class="msg_history">
          <div *ngFor="let msg of messages">
            <div class="incoming_msg" *ngIf="msg.type == 'received'">
              <div class="incoming_msg_img"></div>
              <div class="received_msg">
                <div class="received_withd_msg">
                  <p>
                    {{ msg.message }}
                  </p>
                  <span class="time_date"> {{ msg.date | date:'medium' }} </span>
                </div>
              </div>
            </div>
            <div class="outgoing_msg" *ngIf="msg.type == 'sent'">
              <div class="sent_msg">
                <p>
                  {{ msg.message }}
                </p>
                <span class="time_date"> {{ msg.date | date:'medium' }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="type_msg">
          <div class="input_msg_write">
            <input type="text" class="write_msg" [value]="txtMessage" (input)="txtMessage=$event.target.value" (keydown.enter)="sendMessage()" placeholder="Type a message" />
            <button class="msg_send_btn" type="button" (click)="sendMessage()">
              <i class="fa fa-paper-plane-o" aria-hidden="true"></i>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

app.component.ts

import { Component, NgZone } from '@angular/core';
import { Message } from '../models/Message';
import { ChatService } from '../services/chat.service';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'ClientApp';
  txtMessage: string = '';
  uniqueID: string = new Date().getTime().toString();
  messages = new Array<Message>();
  message = new Message();
  constructor(
    private chatService: ChatService,
    private _ngZone: NgZone
  ) {
    this.subscribeToEvents();
  }
  sendMessage(): void {
    if (this.txtMessage) {
      this.message = new Message();
      this.message.clientuniqueid = this.uniqueID;
      this.message.type = "sent";
      this.message.message = this.txtMessage;
      this.message.date = new Date();
      this.messages.push(this.message);
      this.chatService.sendMessage(this.message);
      this.txtMessage = '';
    }
  }
  private subscribeToEvents(): void {
    this.chatService.messageReceived.subscribe((message: Message) => {
      this._ngZone.run(() => {
        if (message.clientuniqueid !== this.uniqueID) {
          message.type = "received";
          this.messages.push(message);
        }
      });
    });
  }
}

Now, our chat application is ready. Let's run the following command in the terminal and test apps.

dotnet run

Summary

In this article, we have learned how we can create a sample chat app using Angular 8 and ASP.NET Core with SignalR. Please find the entire source code here as an attachment and also on GitHub.