Hello friends, SignalR is a concept through which servers and clients communicate instantly without waiting for each other. So in this blog, we will create a real-time chat application using SignalR with Blazor. So let’s start,

Introduction to SignalR

SignalR is a library for developers that can be used for creating real-time web functionality where clients can get new data without refreshing a web page. Using the SignalR server and the clients can communicate with each other instantly.The client is hosted in a browser and the server is hosted in our local machine where clients are connected with the server so clients can send and receive data to the server as shown in the above image, the server is SIgnalR Hub and the Clients are hub connections. So the Server can send data to clients and vice-versa.

Requirements for Create Chat app

Visual Studio 2022 or later versions.

.NET 6.0 SDK

Steps to Create Chat Application

  • Create a new project in the visual studio 2022.
  • Choose Blazor WebAssembly App template and click Next.
  • Set a meaningful project name “BlazorSignalRChatApp” and location for project setup and click Next.
  • Select .NET 6.0 framework and  ASP.NET Core hosted checkbox.
  • Click on the Create button

Install SignalR client library Package

Right-click on the BlazorSignalRChatApp.Client project from Solution Explorer and select Manage NuGet Packages.

Select nuget.org for managing NuGet Package sources.

In the Browse section, type Microsoft.AspNetCore.SignalR.Client and select the stable version and click the install button.

Click on the I Accept button to install the package

Add SignalR hub

In the BlazorSignalRChatApp.Server project, create Hubs folder and add class ChatHub.cs in that folder.

Add services and endpoint for SignalR Hub

Open Program.cs file from BlazorSignalRChatApp.Server project.

In this Program.cs file we need to follow the steps:

  • Add Namespaces
  • Add SignalR
  • Add Response Compression Services

Have a Look at our Internship Program

Related Blog: Mobile App Development