Sending IoT Hub telemetry to a Blazor Web App

For those who are interested in software development for the web using the C# programming language, Blazor is a viable alternative for building progressive websites as compared to Asp.Net Core / Angular / JavaScript.

Blazor lets you build interactive web UIs using C# instead of JavaScript. Blazor apps are composed of reusable web UI components implemented using C#, HTML, and CSS. Both client and server code is written in C#, allowing you to share code and libraries.

In the past, I already implemented Blazor on the Edge, including message routing.

Now, let’s see how we can integrate a Blazor website with telemetry coming from an Azure IoT Hub in the cloud.

For this to happen, we need this architecture:

So, the moving parts are:

  • An IoT Hub with message routing enabled
  • Azure Function with IoT Hub / EventHub trigger
  • Server-side Blazor website with API Controller integration

Let’s see how this is set up.

Doorgaan met het lezen van “Sending IoT Hub telemetry to a Blazor Web App”

Attach Blazor to Azure IoT Edge routing, showing live message feed

In the last couple of months, I have fallen in love with Blazor. I can almost shout out: “imma firin mah Blazor!”

ASP.NET Blog | Blazor now in official preview!

Blazor makes it possible to produce interactive web UIs using C# instead of JavaScript:

Blazor is a web framework based on Asp.Net core:

Blazor apps are composed of reusable web UI components implemented using C#, HTML, and CSS

In the past, I have already shown how to deploy a Blazor app as a container using the Azure IoT Edge deployment mechanism. This makes it possible to deploy and run a Blazor app on the Edge. There is no interaction with the Azure IoT Edge routing mechanism, though.

Wouldn’t it be nice if a Blazor app could actually receive IoT Edge messages or even could send IoT Edge messages to the cloud using that same routing mechanism?

This is what we want:

tldr; yes, this can be done.

Let’s see how this you can pull this off too.

Doorgaan met het lezen van “Attach Blazor to Azure IoT Edge routing, showing live message feed”