SignalR is the canonical client-side async notification library for ASP.NET. With it, we can build clients that are ultra-responsive to changing conditions on our servers. But SignalR has always had one major flaw. To use it, you needed to use JavaScript. That’s fair, right? We’re writing web clients, which are always running in the browser, so of course, we need to use JavaScript. We’ll suffer without type safety because of the functionality we’re getting. It’s always been a necessary evil, and we’ve dealt with it as such.

With the dawn of Blazor, this age of compromise is over. We can manage all of the data transfers between our servers and clients straight out of CLR types! That is what we’re going to be demonstrating now.

Objectives

Let’s concretize our objectives here. We’re going to build a trivial Single-Paged-App(SPA) in Blazor wasm. That app will have a simple form to read inputs from users, and a table to see incoming messages.

Prerequisites

• Latest .NET Core 3.1 SDK
• Visual Studio Code or the latest version of Visual Studio. I will be using VS Code for this

Create Project

Navigate to your source directory in the console and run the following command.

dotnet new blazorwasm -ho -n SignalRClr

This will create a new directory SignalRClr, in that directory it will create a solution called SignalRClr and then projects:

• SignalRClr.Shared.csproj
• SignalRClr.Server.csproj
• SignalRClr.Client.csproj

Those projects are what they say they are. The Shared will be the shared models between the client and the server. The client is going to be the compiled wasm that ends up in our client’s browser. The Server is our server-side code. Run cd SignalRClr to navigate into the project’s folder, then run code . to open it in VS Code.

Add Dependencies

We need to add a Microsoft.AspNetCore.SignalR.Client dependency to our SignalRClr.Client project, and a Microsoft.AspNetCore.SignalR.Core dependency to our SignalRClr.Server project. We will also need the System.ComponentModel.Annotations class for our Shared project. Cd into Client and run the following:

dotnet add package Microsoft.AspNetCore.SignalR.Client

Then cd into the Server directory parallel to the Client directory and run the following:

dotnet add package Microsoft.AspNetCore.SignalR.Core

Then cd into the Shared directory and run the following:

dotnet add package System.ComponentModel.Annotations

#signalr #javascript #blazor #aspdotnet #developer