Implementation Of SignalR With .NET Core

Introduction

In my previous article, we have seen how SignalR is useful with .NET Core. You can read the previous article from here:

Now in this article, we will see the implementation of SignalR with .NET core

Software’s requires to develop an application with SignalR on ASP.NET Core

Let’s create simple communication application using SignalR with ASP.NET Core

Create SignaR Hub

Now to create a SignalR hub, a signalR hub is a class that inherits from Microsoft.ASpNetCore.SignalR.Hub.
Let’s create a method that can be accessed from JavaScript.
To send the message to all clients, I have created “SendMessage” method and within this method, I will call the “ReceiveMessage” method of the connected client.
1. using Microsoft.AspNetCore.SignalR;
2. using System.Threading.Tasks;
3. namespace CommunicationApp
4. {
5. public class ChatHub : Hub
6. {
7. public async Task SendMessage(string user, string message)
8. {
9. await Clients.All.SendAsync("ReceiveMessage", user, message);
10. }
11. }
12. }

Next step is that we need to configure our project to handle the SignalR Request.

Also we need to configure the route to signalR hubs using UseSignalR method defined in configure method of startup class.
This method(app.UseSignalR) adds SignalR to a middleware pipeline.
1. public void Configure(IApplicationBuilder app)
2. {
3. ...
4. ...
5. app.UseSignalR(routes =>
6. {
7. routes.MapHub<ChatHub>("/chatHub");
8. });
10. app.UseMvc();
11. }

So by using JavaScript code, we call the server method called “SendMessage” and also we have registered ReceiveMessage method, which is usually called from the server to send the message to the client.
Just create chat.js file under “wwwroot/js” folder.
1. const connection = new signalR.HubConnectionBuilder()
2. .withUrl("/chatHub")
3. .build();
5. //This method receive the message and Append to our list
6. connection.on("ReceiveMessage", (user, message) => {
7. const msg = message.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">");
8. const encodedMsg = user + " :: " + msg;
9. const li = document.createElement("li");
10. li.textContent = encodedMsg;
11. document.getElementById("messagesList").appendChild(li);
12. });
14. connection.start().catch(err => console.error(err.toString()));
16. //Send the message
18. document.getElementById("sendMessage").addEventListener("click", event => {
19. const user = document.getElementById("userName").value;
20. const message = document.getElementById("userMessage").value;
21. connection.invoke("SendMessage", user, message).catch(err => console.error(err.toString()));
22. event.preventDefault();
23. });

Thanks and please share this article.