Introduction to SignalR

What is SignalR?

ASP.NET Core SignalR is an open-source library that simplifies adding real-time web functionality to apps. Real-time web functionality enables server-side code to push content to clients instantly.

Good candidates for SignalR:

• Apps that require high frequency updates from the server. Examples are gaming, social networks, voting, auction, maps, and GPS apps.
• Dashboards and monitoring apps. Examples include company dashboards, instant sales updates, or travel alerts.
• Collaborative apps. Whiteboard apps and team meeting software are examples of collaborative apps.
• Apps that require notifications. Social networks, email, chat, games, travel alerts, and many other apps use notifications.

SignalR provides an API for creating server-to-client remote procedure calls (RPC). The RPCs invoke functions on clients from server-side .NET Core code. There are several supported platforms, each with their respective client SDK. Because of this, the programming language being invoked by the RPC call varies.

Here are some features of SignalR for ASP.NET Core:

• Handles connection management automatically.
• Sends messages to all connected clients simultaneously. For example, a chat room.
• Sends messages to specific clients or groups of clients.
• Scales to handle increasing traffic.

The source is hosted in a SignalR repository on GitHub.

Create a Web App Project

Start Visual Studio 2022 Enterprise and create a project of type  ASP.NET Core Web App.

In the Configure your new project dialog, enter SignalRChat for Project name. It's important to name the project SignalRChat, including matching the capitalization, so the namespaces will match when you copy and paste example code, then select next.

In the Additional information dialog, select .NET 6.0 (Long-term support) and then select Create.

Adding SignalR client Library

The SignalR server library is included in the ASP.NET Core shared framework. The JavaScript client library isn't automatically included in the project. For this tutorial, use Library Manager ( LibMan) to get the client library from unpkg. unpkgis a fast, global content delivery network for everything on npm.

In Solution Explorer, right click the project, and select Add -> Client-Side Library, after that on the new dialog screen you must fill the info as next image shows.

Then just click on install, in this case LibMan creates a wwwroot/js/signalr folder and copies the selected files to it.

Create a SignalR Hub

A hub is a class that serves as a high-level pipeline that handles client-server communication.

In the SignalRChat project folder, create a Hubs folder.

In the Hubs folder, create the ChatHub class with the following code:

The ChatHub class inherits from the SignalR Hub class. The Hub class manages connections, groups, and messaging.

The SendMessage method can be called by a connected client to send a message to all clients. JavaScript client code that calls the method is shown later in the tutorial. SignalR code is asynchronous to provide maximum scalability.

Configure SignalR

The SignalR server must be configured to pass SignalR requests to SignalR. Add the following highlighted code to the Program.cs file.

The preceding highlighted code adds SignalR to the ASP.NET Core dependency injection and routing systems.

Adding SignalR client Code

Replace the content in Pages/Index.cshtml with the following code:

The preceding markup:

• Creates text boxes and a submit button.
• Creates a list with id=" messagesList" for displaying messages that are received from the SignalR hub.
• Includes script references to SignalR and the chat.js app code is created in the next step.

In the wwwroot/js folder, create a chat.js file with the following code:

The preceding JavaScript:

• Creates and starts a connection.
• Adds to the submit button a handler that sends messages to the hub.
• Adds to the connection object a handler that receives messages from the hub and adds them to the list.

Run the app

The example must show as next screen

And finally there you have it, a SignalR example with real time communication.

If you like this post please share with others.