Updated March 15, 2023
Introduction to ASP.NET SignalR
ASP.NET Core SignalR is used to add real-time Web Functionality to the applications, and it is an Open-Source Library. The real-time functionalities of the web allow the server-side code to move forward the content to the client side right away. The SignalR is the ASP.NET Core Open-Source which helps to include the real-time functions to implement the SignalR in the Web Applications of .NET Core.
What is ASP.NET Core SignalR?
ASP.NET Core SignalR is an Open-Source Library that facilitates to include the real-time functionalities of the Web in the application. It also allows the Server-Side to move forward the contents to the Client-Side directly other than the server waiting for the request of the client from the user for new coming data. The essential target for SignalR is the applications that require high-frequency updates from the server side.
How to Use ASP.NET Core SignalR?
The essential thing of SignalR is used for the application with a high frequency of updates from the server like social networking and so on. The application needs the notifications like games, email and so on, this will be used by monitoring the applications.
The ASP.NET Core SignalR helps to improve in several areas like:
- Support of WebSockets
- Response-Model of Streaming
- There is no Dependency on jQuery
- Custom Protocols Support
- Scale out Model is Simplified
There are several features in SignalR, let’s see the following:
- Automatic connection management handling.
- Simultaneously post the messages to all the connected clients.
- It shares informative messages with a particular group of clients or clients.
- It automatically handles the traffic scales in or out.
SignalR’s best thing is to handle various real-time communications like Server-Sent-Events, Sockets, and Long Polling. It chooses the best transport approach automatically for the client/server is called HUBS. Hub is mainly used to communicate with the client and server in SignalR and it is an advanced pipeline that enables the client and server to call the methods on each other.
ASP.NET Core SignalR Installation
To install the SignalR packages, add the SignalR Library of Sever-Side ASP.NET Core 6 Framework so that no Server-Side NuGet packages are required, but this is required in the SignalR ASP.NET Core Client-Side JavaScript Library in the project.
- Just right-click on the Project of Solution Explorer and then choose Add – Client-Side Library.
- Once the above-selected screen appears select Provider “unpkg” and then enter “@microsoft/signalr@latest” for the library.
- Select the particular files to be included that is File/dist/browser/signalr.js and File/dist/browser/signalr.min.js
- Finally, choose the target location and then click to install.
ASP.NET Core SignalR with Applications
The software requires developing an application with SignalR on ASP.NET Core. The fundamental goal for SignalR is the applications which have need high-frequency updates from the server side. SignalR enables the Server-Side to move forward the contents to the Client-Side openly other than the server waiting for the request of the client from the user for new coming data.
Let’s develop a simple application of communication by using SignalR with ASP.NET Core. Initially select File – Project – Create New Web Application.
Then choose the Web Application. And then download the SignalR Module, by using the Node Package Manager.
To create the SignalR Hub – create SignalR hub this is a class that inherits from Microsoft.ASPNETCore.SignalR.Hub. Then build the method which can be right to use from the JavaScript. Just transmit the entire message to clients. Create SendMessage and then call ReceiveMessage method of the Connected Client.
Code:
using Microsoft.AspNetCore.SignalR;
using System.Threading.Tasks;
namespace sCommunication_App
{
public class ChatHub : Hub
{
public async Task SendMessage_m(string user_u, string message_m)
{
await Clients.All.SendAsync("ReceiveMessage", user_u, message_m);
}
}
}And then we require configuring the project to take care of the request of SignalR.
To configure the SignalR in the project we require including the SignalR Service to ConfigureService1 Method of the initial class of Startup.
Code:
public void ConfigureServices1(IServiceCollection services_sg)
{
....
....
services_sg.AddSignalR();
}We also require configuring the route to SignalR hubs by using the UseSignalR Method defined in the configure method of the initial class of startup. The method app_sg.UseSignalR includes the SignalR to the Middleware Pipeline.
Code:
public void Configure1(IApplicationBuilder app_sg)
{ ...
...
app_sg.UseSignalR(routes =>
{
routes.MapHub<ChatHub>("/chatHub");
});
app_sg.UseMvc();
}Use the JavaScript Code we required to call the Server Method called the SendMessage and to register with the ReceiveMessage Method which is called from the server to transmit the message to the client. To create the file chat.js under the folder “wwwroot/js”.
Code:
const conn_sg = new signalR.HubConnectionBuilder()
.withUrl("/chatHub")
.build();
//it receives the message and it add to our list
conn_sg.on("Receive-Message", (user_sg, message_sg) => {
const msg_sg = message_sg.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">");
const encodedMsg_sg = user_sg + " :: " + msg_sg;
const li_sg = document.createElement("li");
li.textContent = encodedMsg_sg;
document.getElementById("messagesList").appendChild(li_sg);
});
conn_sg.start().catch(err => console.error(err.toString()));
//to transmit the message
document.getElementById("send-Message").addEventListener("click", event => {
const user_sg = document.getElementById("userName").value;
const message_sg = document.getElementById("userMessage").value;
conn_sg.invoke("Send-Message", user_sg, message).catch(err => console.error(err.toString()));
event.preventDefault();
});To replace the code content in the file of index.cshtml.
Code:
@page
<div class="container-sg">
<div class="row_sg"> </div>
<div class="row_sg">
<div class="col-msgd-12">
<div class="col-msgd-6">
<div class="col-msgd-3">User</div>
<div class="col-msgd-9"><input type="text" id="userName" /></div>
</div>
</div>
<div class="col-msgd-12">
<div class="col-msgd-6">
<div class="col-msgd-3">Message</div>
<div class="col-msgd-9">
<input type="text" id="userMessage11" />
<input type="button" id="sendMessage11" value="Send Message" />
</div>
</div>
</div>
</div>
<div class="row_sg">
<div class="colsg-12">
<hr />
</div>
</div>
<div class="row_sg">
<div class="colsg-6"> </div>
<div class="colsg-6">
<ul id="messagesList11"></ul>
</div>
</div> </div>
<script src="~/lib/signalr/signalr.js"></script>
<script src="~/js/chat.js"></script>Output:
ASP.NET Core SignalR Architecture
This ASP.NET Core SignalR Architecture is the basic architecture that gives details of how the information transmits from the server to the client and also from clients to the server.
The essential thing is that SignalR is a client-server concept, and it is a bi-directional data communication where they are connected to every other.
- There will be a transmission of data to the Server from the Client.
- There will be a Servertransmission of the data to the Client.
Example
ASP.NET Core SignalR is an Open-Source Library that facilitates to include the real-time functionalities of the Web in the application. The software needs to build the applications with the SignalR on the ASP.NET Core.
Conclusion
In this article, we have seen the ASP.NET Core SignalR implementation. It helps to involve in adding any sort of real-time web functions to implement the SignalR in the Web Applications of .NET Core.
Recommended Articles
This is a guide to ASP.NET SignalR. Here we discuss the introduction, how to use ASP.NET core SignalR, installation, architecture & examples. You may also have a look at the following articles to learn more –
