UI notifications system with Blazor and SignalR - part 1

David Guida
Cloud Computing
May 24, 2022

UI notifications system with Blazor and SignalR - part 1

Hi All! Today we’re going to see how we can write a UI notification system. We will use Blazor to render the UI, SignalR to handle the client/server communication, and OpenSleigh to execute the background operations.

Our goal is to allow the user to trigger the execution of a long-running operation. The gruntwork might be composed of multiple steps and has to be performed in the background, without blocking the UI.

However, we also want to inform the user of the current status, by sending notifications as soon as an event occurs.

A practical example could be the Azure Portal: the user performs any operation, like creating an Application Service. The operation is performed in the backend, and the Portal will show a status notification on the top right when it’s done.

Our application will of course be much simpler than the Azure Portal, but the basic idea remains untouched:

We can set the number of steps we want to perform and then trigger the execution in the backend, using OpenSleigh.

For the front-end we will be using Blazor Webassembly. The first thing we have to do is add the Microsoft.AspNetCore.SignalR.Client NuGet package.

SignalR will help us sending messages back and forth between the client and the server, handling real-time updates.

The next step is to create a Razor page:

We also need to handle the connection to the server and dealing with message exchanging:

As you can see, in the OnInitializedAsync() method we’re initializing the connection to the Hub and registering to the Notification event. The event handler receives the message from the server and appends it to our list of notifications.

Then, in our StartSaga() method we handle the button click by sending a StartSaga message to the server with the desired number of steps, and triggering the execution.

That’s all for today! All the source codes are already available on GitHub, feel free to take a look.

In the next post we’ll take a look at the server and see how OpenSleigh can reduce the overall complexity. See ya!

Original article

David Guida

Passionate, hard-working, and innovative software engineer with a strong desire for continuous learning and improving.
Over 15 years of experience in different domains, including Healthcare, Finance, and large-scale e-Commerce.

Microsoft MVP for Developer Technologies, confident on back-end and front-end tech stacks including .NET, NodeJs, PHP, Angular, React, as well as extensive experience on SQL, MongoDB, Azure, and GCP.

Everything is "just a tool". The secret is to know which one best suits your needs.

Related Posts

Newsletter ItalyClouds.com

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form