Implementation of SignalR in Angular 5 app (with Asp.Net Web API 2.0)

In this small article I’ll walk you through how to get notification messages from Server (Asp.Net Web API 2.0) using SignalR in Angular 5. This article does not cover the server side set up in ASP.Net Web API 2.0.

ASP.Net Web API 2.0

First of all make sure that in ASP.Net Web API 2.0, the SignalR notification service is set up.

Angular 5 Client App

Now let’s start working on client app to get the signalr notification messages.

Install jquery, signalr packages using npm

npm install signalr
npm install jquery

Install the strong typed from Definitely Typed

npm install — save @types/jquery
npm install — save @types/signalr

Add scripts to angular-cli.json

“apps”: [{
 “scripts”: [
 “../node_modules/jquery/dist/jquery.min.js”,
 “../node_modules/signalr/jquery.signalR.min.js”
 ],
}]

Create signalr.service.ts file and add below configurations

Declare the $ in the service globally as:
declare var $: any;

Now, create SignalRService class and do the code as follows:

import { Injectable } from '@angular/core';
declare var $: any;
@Injectable()
export class SignalrService {
..
..
..
}

In the signalRService class, add the below methods to start the connection & send message to the server

Start the connection to the server

//method for starting connection
 public initializeSignalRConnection(): void {
  let signalRServerEndPoint = 'https://notification.api.testserver.com';
        this.connection = $.hubConnection(signalRServerEndPoint);
        this.proxy = this.connection.createHubProxy('NotificationHub');
  
  this.proxy.on('messageReceived', (serverMessage) => this.onMessageReceived(serverMessage));
this.connection.start().done((data: any) => {
            console.log('Connected to Notification Hub');
            this.broadcastMessage();
        }).catch((error: any) => {
            console.log('Notification Hub error -> ' + error);
        });
  }
Send

Send the message to the server

//method for sending message
public broadcastMessage(): void {
 //invoke method by its name using proxy 
 this.proxy.invoke(‘NotificationService’, ‘text message’)
 .catch((error: any) => {
 console.log(‘broadcastMessage error -> ‘ + error); 
 });
 }

Callback method for proxy

private onMessageReceived(serverMessage: string) {
  console.log('New message received from Server: ' + serverMessage);
}

Now, combine all the above methods in the signalRService class and now, it looked like:

import { Injectable } from '@angular/core';
declare var $: any;
@Injectable()
export class SignalrService {
    private connection: any;
    private proxy: any;
constructor() {}
public initializeSignalRConnection(): void {
  let signalRServerEndPoint = 'https://notification.api.testserver.com';
        this.connection = $.hubConnection(signalRServerEndPoint);
        this.proxy = this.connection.createHubProxy('NotificationHub');
  
  this.proxy.on('messageReceived', (serverMessage) => this.onMessageReceived(serverMessage));
this.connection.start().done((data: any) => {
            console.log('Connected to Notification Hub');
            this.broadcastMessage();
        }).catch((error: any) => {
            console.log('Notification Hub error -> ' + error);
        });
    }
private broadcastMessage(): void {  
        this.proxy.invoke('NotificationService', 'text message')
           .catch((error: any) => {
               console.log('broadcastMessage error -> ' + error); 
            });
 
 private onMessageReceived(serverMessage: string) {
        console.log('New message received from Server: ' + serverMessage);
 }
}

Now open your app.component.ts and import the signalRService class then call its initializeSignalRConnection() method to make it working.

export class AppComponent {
constructor(private signalRService: SignalrService) {
 this.signalRService.initializeSignalRConnection()
 }
..
..
..
}

That’s pretty much about how you can send notifications to angular 5 app using Asp.Net Web API 2.0. and SignalR.

That’s about it. Happy Coding with ANGULAR :)

Home - TECHNOSSUS | Cloud Strategy & Transformation | Platform Optimization | Digital Orchestration