Realtime IoT Data using Azure SignalR and Functions in Angular
Serverless Realtime MXChip Data Angular
Introduction
The data coming from the IoT devices are to be shown in real time, if we failed to do that, then there is no point in showing it. Here in this article, we will see how we can show the real-time data from our IoT device in an Angular application using Azure SignalR service and Azure Functions. Sounds interesting? So the flow of data can be defined as IoT device -> Azure IoT Hub -> Azure Function -> Azure SignalR Service -> Angular application. Sounds interesting? Let’s start then.
You can always read this article on my blog here.
Background
In our previous article, we have already created an Azure Function which pulls the Data from our IoT Hub whenever there is any new messages/events happening. If you have not read the same, please read it.
Source Code
Please feel free to fork, clone this project from GitHub here: Realtime-IoT-Device-Data-using-Azure-SignalR-and-Azure-Function-in-Angular
Real-time IoT Data Processing
We will be creating two solutions, one for Angular application and one for Azure Functions. We will also create a new Azure Signal R service in the Azure portal.
Azure SignalR Service
According to Microsoft, Azure SignalR Service is an Azure managed PaaS service to simplify the development, deployment, and management of real-time web application using SignalR, with Azure supported SLA, scaling, performance, and security. The service provides API/SDK/CLI/UI, and the rich set of code samples, templates, and demo applications.
Core features for Azure SignalR Service:
- Native ASP.NET Core SignalR development support
- ASP.NET Core SignalR backend for improved performance and stability
- Redis based backplane scaling
- Web Socket, comet, and .NET Server-Sent-Event support
- REST API support for server broadcast scenarios
- Resource Provider support for ARM Template based CLI
