How to Build a Web App with SignalR in .NET Core?

When it comes to building applications, one of the most well-liked libraries for.NET development company is SignalR. When developers design an application with real-time capability, they connect the server-side code content to every client as soon as it becomes available, instead of waiting for each client to request fresh data from the server. A bidirectional communication channel is provided by the SignalR communication service between the application’s client and server sides. Additionally, this service can be utilized for any online page or application that employs JavaScript or the.NET Framework 4.5, not just web applications.

Let’s read this blog to learn more about SignalR, including its requirements, how to use it with.NET Core, and other things.

What is SignalR?

One of the most widely used open-source tools that makes it easier for developers to add reliable, real-time online functionality to applications is ASP.NET Core SignalR. When a request is received, real-time web functionality enables the server-side code to provide the stream data to the client side instantaneously. This means that, rather than waiting for a new request from the client to send data back, the server-side code in a real-time enabled process is developed so that it quickly provides content or data to the connected client as soon as it becomes available.

Assume, for example, that the real-time application is a chat program. In this case, as soon as the client is available, the server provides data and messages to the client. Within the web application, messages can also be sent as push notifications using the SignalR service in this situation. In this case, SingalR creates a secure communication channel using encryption and a digital signature.

An API is provided by the SignalR Net Core service to create remote procedure calls (RPCs) that transfer data from the server to the client. Server-side code can call different functions on clients through the use of remote procedure calls. In this instance, there are various supported platforms with corresponding client SDKs. As a result, different programming languages are invoked by the RPC call.

Basic Knowledge of ASP.NET Core

An additional requirement for SignalR is a working grasp of the general-purpose software solution development framework,.NET Core. It makes it possible for .NET developers to construct a wide range of software applications, including gaming, cloud, mobile, web, desktop, and more. Additionally, in order to begin using the SignalR service, a basic understanding of this technology is necessary.

Steps to Implement SignalR in .Net Core

Let’s now examine the procedures that developers can use to configure and implement SignalR in ASP.NET Core:

Making a web application project with the ASP.NET Core framework is the first step. As you can see, in order to implement SignalR, we must first create a.NET web application. With that in mind, let’s walk through the process of defining methods.

Therefore, in order to use SignalR in ASP.NET Core, developers must first include the SignalR client library in the project for the web application. The instructions in the screenshot must be followed in order to add the SignalR client library.

In Solution Explorer, right-click the project, and select Add > Client-Side Library.

Add Client-Side Library dialog:

• Select unpkg for Provider
• Enter @microsoft/signalr@latest for Library.
• Select Choose specific files, expand the dist/browser folder, and select signalr.js and signalr.min.js.
• Set Target Location to wwwroot/js/signalr/.
• Select Install.

After you are done with the installation process, it’s time to create SignalR Hub: ChatHub Class. To do so, follow the below given .NET SignalR code.

ChatHub.cs

                    
                        using Microsoft.AspNetCore.SignalR;
                        using System;
                        using System.Collections.Generic;
                        using System.Linq;
                        using System.Threading.Tasks;
                         
                        namespace SignalrImplementation.Models
                        {
                            public class ChatHub : Hub
                            {
                                public async Task SendMessage(string user, string message)
                                {
                                    await Clients.All.SendAsync("ReceiveMessage", user, message);
                                }
                            }
                        }
                        
                    
                    

Now after that, you need to add a service reference in the startup.cs’s ConfigureServices method. For that follow the below code.

startup.cs

                        
                            public void ConfigureServices(IServiceCollection services)
                            {
                            services.AddControllersWithViews();
                            services.AddSignalR();
                            }
                               
                        
                        

Now, you can add a chat hub class in the Configure method in startup.cs as shown in the below code.

                    
                        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
                        {
                          if (env.IsDevelopment())
                             {
                                app.UseDeveloperExceptionPage();
                              }
                           else
                              {
                                 app.UseExceptionHandler("/Home/Error");
                                 app.UseHsts();
                               }
                                  app.UseHttpsRedirection();
                                  app.UseStaticFiles();
                                  app.UseRouting();
                                  app.UseAuthorization();
                                  app.UseSignalR(routes =>
                                  {
                                      routes.MapHub("/chatHub");
                                  })
                                  app.UseEndpoints(endpoints =>
                                  {
                                      endpoints.MapControllerRoute(
                                          name: "default",
                                          pattern: "{controller=Home}/{action=Index}/{id?}");
                                  });
                        }
                        
                    
                    

After this, it’s time to create a new JavaScript file for HubConnection, as soon as in the below code.

chat.js

                        
                            const connection = new signalR.HubConnectionBuilder()
                            .withUrl("/chatHub")
                            .build();
                         
                        connection.on("ReceiveMessage", (user, message) => {
                            const msg = message.replace(/&/g, "&").replace(//g, ">");
                            const encodedMsg = user + " :: " + msg;
                            const li = document.createElement("li");
                            li.textContent = encodedMsg;
                            document.getElementById("messagesList").appendChild(li);
                        });
                         
                        connection.start().catch(err => console.error(err.toString()));
                          
                        
                        

Send the message

                    
                        document.getElementById("sendMessage").addEventListener("click", event => {
                            const user = document.getElementById("userName").value;
                            const message = document.getElementById("userMessage").value;
                            connection.invoke("SendMessage", user, message).catch(err => console.error(err.toString()));
                            event.preventDefault();
                        });
                         
                        
                    
                    

This was all about the logic that goes behind the implementation process. Now it’s time to create a User Interface for the Chat test.

GitHub Repository SignalR in .NET Core Example

Some of the best examples of GitHub repository SignalR samples in .NET Core are

• MoveShape
• ChatSample
• AndroidJavaClient
• WhiteBoard
• PullRequestR
• WindowsFormsSample