Serverless Realtime MXChip Data Angular
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.
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.
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
- Dashboard for performance and connection monitoring
- Token-based AUTH model
Let’s log in to our Azure portal and create a new Azure Signal R service. Click on the +Create a resource and search SignalR Service. Once you have created the service, go to the keys section and copy the connection string, we will be using the same in our Azure Function.
As we discussed in my previous article, we will be creating an Azure Function with an IoTHubTrigger in it. You can refer to this article for the hints on how to create an Azure Function solution in Visual Studio. Please make sure that you had installed the required packages as mentioned in the image below.
Once you have created a new Function in the solution it is time to add some code.
As you can see we are using Microsoft.Azure.WebJobs.EventHubTriggerAttribute for pulling data from our IoT Hub. Here “messages/events” is our Event Hub Name and Connection is the IoT Hub connections string which is defined in the local.settings.json file and the ConsumerGroup is the group I have created for the Azure Function solution.
If you have noticed, we are using the HubName as “broadcast” in the SignalR attribute and “notify” as the SignalR message Target property. If you change the Target property, you may get a warning in your browser console as “Warning: No client method with the name ‘notify’ found.”. The @aspnet/signalr package is checking for the Target property ‘notify’ by default.
So, I will keep the Target property as ‘notify’. By default, the message data doesn’t contain the device id value, so we will have to get the same from SystemProperties.
Below is my DeviceData class.
When you work with any client like Angular application, it is important that we need to get the token/connection from the server, so that the client can persist the connection with the server, hence the data can be pushed to the client from SignalR service. So, we will create a new Azure Function which will return the connection information with the Url and AccessToken.
Please make sure that you have set AuthorizationLevel.Anonymous in HttpTrigger attribute and also to use the same HubName we have used for our other Azure Function, which is SignalR.
Now we can customize our local.settings.json file.
Please be noted that this file if for local configuration and remember to change the connections strings here before you run the application. If you want to enable the CORS in the Azure Function in the Azure Portal, you can do that by following the steps mentioned in the image below.
As we have already created our Azure Functions, now it is time to create our Angular client. Let’s use Angular CLI and create a new project. Now we can add a new package @aspnet/signalr to our application which will help us to talk to our Azure SignalR service.
Below is my code for home.component.ts file.
We use the Material card to show the Device data, so we can define our home.component.html file as preceding.
Now, we can create a new service which calls our Azure SignalR service.
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 connection
- Wire the ‘notify’ function, remember we have set this in our Azure Function SignalR.
Now, 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.
Wow!. Now we have learned,
- How to connect IoT Hub and Azure Function
- What is Triggers in Azure Function
- How to connect Azure Function and Azure SignalR service
- How to post data to Azure SignalR service
- How to connect Azure SignalR service from Angular client
- How to show real-time data in Angular application from IoT device
You can always ready my IoT articles here.
You can always follow me here on Medium and Twitter.
Sibeesh Venu — Medium
Read writing from Sibeesh Venu on Medium. An #Engineer by profession and #Writer by passion. Microsoft MVP…
Sibeesh Venu (@SibeeshVenu) | Twitter
The latest Tweets from Sibeesh Venu (@SibeeshVenu). https://t.co/qgUFdZS3Zb, Microsoft MVP @MVPAward, @CsharpCorner…
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.