Welcome to today’s post.
I will discuss how to create a SignalR client using Angular. In a previous post I showed how to create a SignalR server hub.
The tips and advice will apply to versions of Angular from 2 onwards.
I will be using Visual Studio Code to create the Angular application. The architectural diagram for this post is shown:
In the project root folder apply the following NPM commands:
Generate a new package.json:
npm init -y
Install the SignalR NPM package:
npm install @microsoft/signalr
Create a new (empty) dashboard component:
Construct a model to contain the message parameters that will be passed from the SignalR to the Angular client:
export class BookChanges {
constructor(
public NumBookChanges: number
) { }
}
Define the URL for the SignalR Hub:
export let CONFIGURATION = {
baseUrls: {
server: 'http://localhost:5000/',
apiUrl: 'api/'
}
};
Create a new (empty) book hub service:
ng generate service book-hub-service
Implement the Angular component service which will connect, disconnect and consume SignalR hub messages:
import { Injectable } from '@angular/core';
import * as signalR from '@aspnet/signalr';
import { Subject } from 'rxjs';
import { CONFIGURATION } from '../../../models/app.constants';
import { BookChanges } from '../../../models/bookchanges';
@Injectable({
providedIn: 'root'
})
export class BookHubService {
private connection: signalR.HubConnection;
connectionEstablished = new Subject<Boolean>();
bookChanges = new Subject<BookChanges>();
connect() {
if (!this.connection) {
this.connection = new signalR.HubConnectionBuilder()
.withUrl(CONFIGURATION.baseUrls.server +
'bookloanhub')
.build();
this.connection.start().then(() => {
console.log('Hub connection started');
this.connectionEstablished.next(true);
}).catch(err => console.log(err));
this.connection.on('SendBookCatalogChanges', (bookchanges) => {
console.log('Received', bookchanges);
this.bookChanges.next(bookchanges);
});
}
}
disconnect() {
if (this.connection) {
this.connection.stop();
this.connection = null;
}
}
constructor() {}
}
Recall that in my blog detailing the SignalR hub, the API method prototype for pushing messages to SignalR clients is:
public async Task SendBookCatalogChanges(int numberBookLoanChanges)
with the first parameter of our SignalR client API method on() is the method name SendBookCatalogChanges.
And the output parameter bookchanges is from the corresponding input parameter numberBookLoanChanges.
Whenever we receive a value from the SignalR hub, it is stored in the Subject bookChanges and transmitted to subscribed observers:
this.connection.on('SendBookCatalogChanges', (bookchanges) => {
console.log('Received', bookchanges);
this.bookChanges.next(bookchanges);
In your dashboard component’s html file, paste in the following markup:
<p>My SignalR Dashboard</p>
<div>Number of book changes {{numBookChanges}}</div>
In the dashboard components code, paste in the following TypeScript code:
import { Component, OnInit, ViewChild, AfterViewInit, OnDestroy } from '@angular/core';
import { BookHubService } from './services/book-hub.service';
import { Subscription } from 'rxjs';
import { BookChanges } from 'src/models/bookchanges';
import { Observable, interval } from 'rxjs';
@Component({
selector: 'app-dashboard',
templateUrl: './dashboard.component.html',
styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent
implements AfterViewInit, OnDestroy, OnInit
{
numBookChanges: number;
bookchangeSubscription: any;
pollingData: any;
errorMessage: string;
errors: any;
constructor(private bookchanges: BookHubService) { }
ngAfterViewInit()
{
this.bookchanges.connect();
this.bookchangeSubscription = this.bookchanges.
bookChanges.subscribe(book => {
this.numBookChanges = book;
});
}
ngOnInit()
{
this.pollingData = interval(1000*60).subscribe(val =>
{
this.bookchanges.bookChanges.subscribe(
(book: any) => {
this.numBookChanges = book;
console.log(
"DashboardComponent - book data changed to " +
this.numBookChanges);
},
error => {
this.errors = error;
}
);
});
}
ngOnDestroy()
{
this.bookchanges.disconnect();
}
}
The UI component will subscribe to received SignalR Hub messages using a subscriber and assigning to the Angular html template variable as shown:
this.bookchanges.bookChanges.subscribe(
book => {
this.numBookChanges = book;
console.log("DashboardComponent - book data changed");
},
error => {
this.errors = error;
}
The resulting Angular application structure will be as shown:
Once run the output from the Chrome console will show the client handshaking connection to the SignalR hub:
The connection to the SignalR Hub is a URL of the form:
http://localhost:5000/bookloanhub?id=[connectionid]
In the Chrome console the received message will show every time a changed message is sent from the Subject from the SignalR hub:
On the SignalR server hub, changes to the data that are changing are pushed to the client as shown:
On the client UI you will see the template variable change with the received server data as shown:
That’s all for today’s post.
I hope you found this post useful and informative.
In a future next post I will go through a walkthrough to test and troubleshoot SignalR server and clients.
Andrew Halil is a blogger, author and software developer with expertise of many areas in the information technology industry including full-stack web and native cloud based development, test driven development and Devops.
