Now we can add a new package @aspnet/signalr to our application which will help us to talk to our Azure SignalR service.home.component.tsBelow is my code for home.component.ts file.import { Component, OnInit, NgZone } from '@angular/core';import { SignalRService } from 'src/app/services/signal-r.service';import { StreamData } from 'src/app/models/stream.data';@Component({ selector: 'app-home', templateUrl: './home.component.html', styleUrls: ['./home.component.css']})export class HomeComponent implements OnInit { streamData: StreamData = new StreamData(); constructor(private signalRService: SignalRService) { } ngOnInit() { this.signalRService.init(); this.signalRService.mxChipData.subscribe(data => { this.streamData = JSON.parse(data); console.log(data); }); }}home.component.htmlWe use Material card to show the Device data, so we can define our home.component.html file as preceding.<div class="container"> <div class="row"> <mat-card class="example-card"> <mat-card-header> <div mat-card-avatar class="example-header-image"></div> <mat-card-title>Real Time Values</mat-card-title> <mat-card-subtitle>The real time values of humidity, temprature etc…</mat-card-subtitle> </mat-card-header> <mat-card-content> <p> <label>DeviceId: </label> {{streamData?.deviceId}} </p> <p> <label>Temperature: </label> {{streamData?.temperature}} </p> <p> <label>Humidity: </label> {{streamData?.humidity}} </p> </mat-card-content> </mat-card> </div></div>signal-r.service.tsNow, we can create a new service which calls our Azure SignalR service.import { Injectable } from '@angular/core';import { HttpClient } from '@angular/common/http';import { Observable, Subject } from 'rxjs';import { SignalRConnection } from '../models/signal-r-connection.model';import { environment } from '../../environments/environment';import * as SignalR from '@aspnet/signalr';@Injectable({ providedIn: 'root'})export class SignalRService { mxChipData: Subject<string> = new Subject(); private hubConnection: SignalR.HubConnection; constructor(private http: HttpClient) { } private getSignalRConnection(): Observable<SignalRConnection> { return this.http.get<SignalRConnection>(`${environment.baseUrl}SignalRConnection`); } init() { this.getSignalRConnection().subscribe(con => { const options = { accessTokenFactory: () => con.accessToken }; this.hubConnection = new SignalR.HubConnectionBuilder() .withUrl(con.url, options) .configureLogging(SignalR.LogLevel.Information) .build(); this.hubConnection.start().catch(error => console.error(error)); this.hubConnection.on('notify', data => { this.mxChipData.next(data); }); }); }}As you can see, we are doing the following things in our service.Get the SignalR connection information which contains Url and Access token, by calling the SignalRConnection Azure Function.Create the Hub connection using SignalR.HubConnectionBuilder.Start the Hub connectionWire the ‘notify’ function, remember we have set this in our Azure Function SignalR.signal-r-connection.model.tsexport class SignalRConnection { url: string; accessToken: string;}stream.data.tsexport class StreamData { messageId: string; deviceId: string; temperature: string; humidity: string; pressure: string; pointInfo: string; ioTHub: string; eventEnqueuedUtcTime: string; eventProcessedUtcTime: string; partitionId: string;}OutputNow, let’s just run our Angular application, Azure Function, and a simulated device..Please refer to this link for the information related to the Simulated device..Please feel free to connect to your IoT device, if you haven’t configured the simulated device.Real-time IoT Data ProcessingReferencesServer less real-time messagingConclusionWow!..Now we have learned,How to connect IoT Hub and Azure FunctionWhat is Triggers in Azure FunctionHow to connect Azure Function and Azure SignalR serviceHow to post data to Azure SignalR serviceHow to connect Azure SignalR service from Angular clientHow to show real-time data in Angular application from IoT deviceYou can always ready my IoT articles here.Your turn..What do you think?Thanks a lot for reading..Did I miss anything that you may think which is needed in this article?.Could you find this post as useful?.Kindly do not forget to share me your feedback.Kindest RegardsSibeesh Venu. More details