Learn what is SignalR with simple application.

In this blog you will learn what is SignalR with simple application.

Let’s first understand what is SignalR?

In simple words I will say “SignalR is an Abstraction that intelligently decides how to enable real time over HTTP.” SignalR can figure out what a server and client can do. It provides you the capability to actually establish a persistent connection between client and server and lets server communicate with client seamlessly. AJAX allows us to send a request (relatively very small) and update the UI based on the response. Challenges we face include the different behavior of browsers in terms of features and support. From a performance point of view, the server’s resource and network utilization are other issues, so we can’t blindly send multiple requests to the server. Similarly we can’t make the user wait more while waiting for the update. It’s developer’s responsibility to use the best available option/protocol for handling real-time communication.SignalR is one of the best way for real-time communication.

I will be bad blogger if I just keep on writing about SignalR without any practical code on this so let me start with creating a small application “Hitcounter” You might have done this many a times before in simple javascript. In this we will get the active users on the site.

 Follow these steps

• Open VS2015, create new Web Application named “HitCounter” .
• Click manage Nuget package for installing SignalR.
  
  
  

You can see there are many packages available for SignalR.SignalR guys have divided the component into small package.We will install asp.net SignalR.

• J just click I Accept and procced.
  
  
  
  
• Once SignalR installed, ReadMe file will popup. It has all the stuff that will help to create the application using SignalR.
  
  
  
  
• Now we have to add OWIN StartUP Class name it “Startup.cs”. The easiest way to wire up SignalR for our scenario is to use the Microsoft ASP.NET SignalR OWIN Nuget Package. OWIN gives us an easy way to inject functionality into our server. The Startup class provides the entry point for an application, and is required for all applications. It’s possible to have environment-specific startup classes and methods (see Working with Multiple Environments), but regardless, one startup class will serve as the entry point for the application.
  
  
  
  
• Now add SignalR Hub Class named “HitCounterHub”. A hub is just a regular class that inherits from Hub. Just keep in mind that hubs are transient, meaning that anything you store in a member property will be lost in the next call. That's actually a good thing since we may be spanning multiple servers. Storing any state should happen outside of the hub.
  
  
  
  
• See the below Image, I have added the line

[HubName("hitCounter")]
by this I am giving a simple name to HitCounterHub class,by this simple name I will call my Hub class from client side.

• Now I am adding one Static int Variable _hitcount,I am just creating this demo application that’s why I have used the static variable here you can use the your application or database variable.Now,create method RecordHit().Here I am doing the code that will execute when called from client side.
  
  
  this.Client. will show a list of methods.If you want to call for all the clients then use”All” ,if you want to call the one who calls you then you “Caller”,If you want to call all others but not you the use “Others”.
  
  Here we are just using the “Clients” the rest all is done by SignalR.
  
  
  
• Have you noticed that “All” is showing as dynamic. Once we keep on using SignalR then we will know how useful the dynamic keyword is.
  
  

Client Side Implementation.

• Now add one aspx web page. From scripts folder add JQuery and SignalR js files. The only dependency that SignalR is having on client side is JQuery.
  
  
  
• Create one div(hitCount) that will show the HitCount .

Now you can see the SignalR methods like hubConnection

• I In this we have to give the same name that we have mentioned in Hub class else it will not work.
  
  var hub = con.createHubProxy('hitCounter');
  
  
• Now whenever onHitRecorded will be hit it will show the count on Div that we have created.
  
  hub.on('onHitRecorded', function (i) {
  $('#hitCount').text(i);

The below code will invoke the recordHit method from our Hub class.

con.start(function () {
hub.invoke('recordHit');
});


That is all we need to do for now.

Now when you will run this application it will shown 1 as hitCount. Open the same url in different browser or on different window it will change the hitCount in real time

• Now if I close one of the browser then Count will not be updated so let’s cover this also. Open Hub class add below method by this onDisconnection it will decrease the Count by one.
  
  public override Task OnDisconnected(bool stopCalled)
  {
  _hitcount -= 1;
  this.Clients.All.onHitRecorded(_hitcount);
  return base.OnDisconnected(stopCalled);
  }
  
  

Now we are done with our first simple SignalR application.
Hope it will be useful for you.