SignalR How it works tutorial of SignalR with simple example

What is SignalR?

Singnalr is widely used for real time web applications like chat applications, video calls, audio calls and real time rating operations performed on web applications. Singalr is capable of performing all these tasks very easily. One of the most popular uses of Signalr is to make chat applications and real time reviews for your web application. In this SignalR tutorial we will learn how it works and what kind of applications we can build with the help of SignalR. SignalR is one of the easy way to perform real time tasks easily with less code. You can also build games with the help of SignalR which can give you responses in realtime. One of real time website example is https://gsmsharing.com where like and dislike buttons work with SignalR and comments are also using SignalR support. You can check it out for an example because it contains all of the functionality that SignalR can perform. Register at https://gsmsharing.com and try like and dislike buttons and post your website links and share any information you want on that site to experience signalR response in real time.

My First application with SignalR and Asp.net core

To build your application with signalR you need to include SignalR library which is very easy follow the steps below:

You can also check here to start with signalR https://docs.microsoft.com/en-us/aspnet/core/tutorials/signalr?view=aspnetcore-6.0&tabs=visual-studio

Right Click on your project in visual studio->Add->Client-Side Library.

Target Location is where you save the signalR files.

After installing your SignalR files into your project you need to include them into your page where you need to perform real time tasks. 

Create a SignalR Hub which is used to perform different tasks.

SignalR hub is a class which is inherited by Hub. It is used to perform different functions on your website. You can use it for chat applications to get user response like reviews comments and like dislike buttons. These all tasks will be performed in real time. Below code example will explain it all.

namespace Demo.GsmHubs
{
    public class UpdateHub : Hub
    {
        public IUserService UserService { get; } //this is for identity to get user id to save into database

        public UpdateHub(IUserService userService) //constructor
        {
            UserService = userService;
        }
        public async Task LikePost(string Id) // Like function which get post id to update like count
        {
            if (this.Context.User.Identity.IsAuthenticated)
            {
                int i = await BlogMethods.LikeUpdate(int.Parse(Id));
                string count = i.ToString();
                await Clients.All.SendAsync("UpdateProductLike", count); //UpdatePostLike is javascript function which will execute automatically after this function complete.
            }
            else
            {
                await Clients.Client(Context.ConnectionId).SendAsync("AuthMsg"); // this will execute if client is not logged in Context.ConnectionId get the user who is trying to click like button without logging in.
            }
        }
        public async Task CommentOnMobilePost(string Id, String Comments, string NotiEmail)
        {
            if (this.Context.User.Identity.IsAuthenticated)
            {
                CommentMethods commentMethods = new();
                string Uid = UserService.GetUserId();
                if (commentMethods.SaveBlogComments(int.Parse(Id), Uid, Comments))
                {
                    await Clients.All.SendAsync("UpdateComment",Id);
                    await EmailFunctions.SendEmailAsync(NotiEmail, Id);
                }
                else
                {
                    await Clients.Client(Context.ConnectionId).SendAsync("AuthMsg");
                }           
            }
            else
            {
                await Clients.Client(Context.ConnectionId).SendAsync("AuthMsg");
            }
        }

        //Affiliation Likes and dislike function Start
    }
}

In the above class please read comments in the above mentioned code which are very helpful and explain the code for you. Now you need a javascript file to execute code on page. See the example below:-

Include this file on your page which you downloaded before when you start the project.

How SingalR works with Hub and Javascript

That's it you can perform any kind of task from the above example and you can pass in textbox values to start chatting with others. You can get reviews, comments and many more with these to basic files one is hub and the other is javascript file. The basic functionality has two things: one is a hub and other is a javascript file. When you want to perform a real time task you need to execute a hub function from a javascript file and then javascript functions from your hub like we mentioned above. For example, I want to get like count to be updated in real time then when I click the like button my javascript file catches that event and executes the UpdateLike function in Hub. When updateLike function completes its execution then in Hub we will mention javascript function which will execute after that let suppose it's “LikeUpdate” which will execute after hub function will complete.