Understanding SignalR From Scratch

SignalR

SignalR is a new developer's API provided for ASP.NET Web Applications by Microsoft. It used to add "real time" Web functionality to ASP.NET Applications. "Real Time" Web functionality is the ability of a Server code to push the contents to the connected clients. In this article, we will focus on the following things in detail-

1. Introduction to SignalR
   
2. Traditional Pooling vs Pushing
3. SignalR clients
   
4. Working with Query client
   
5. Working with .NET client.
   
6. Self hosting of SignalR Application.
   
7. Understanding SignalR Methods

Before we start digging into SignalR, let's check the Wiki of SignalR.
 
SignalR is a library for ASP.NET developers used to develop real time Web Applications (which makes use of Push Technology).If we compare the traditional Web Application with current SignalR Application, we will understand why we should prefer SignalR.

Let's see how traditional Pulling Web Applications work.

Scenario1

Previously, when we were creating an Application like chat app or something diffrent, the first thing we would think is how to get the latest chats from the user, so we usally put a timer inside our page in ASP.NET client, which calls the Web Service method or the Data access logic in every 5 seconds (depends on timer) and updates the chat data on the client side.

This kind of Application works perfectly for us but it has too many problems.

1. Increase network traffic (In each particular time, the  communication happens, there is a request to the Server and gets back the response from the Server.)
2. HTTP connections for the client-Server communication connection is re-established for each request.
   
3. Delay in reciving the data due to pooling time period.
   
   
   
   In real time, lots of request from the client  are wasted when there is no update data in the Server and returns null in the response.If you are not maintaining your client app correctly, your whole app refreshes in each round trip also.
   
   
   
   When you need a continous update from the Server, you will call the Server at a particular period of time, so in every request, a connection is established with the Server and checks for the update. If there is any update, it will talk to the client, so this is called Pulling.
   
   
   

Real Time Pushing

SignalR support "server Push" is a functionality in which the Server code can call out client code in the Browser, using RPC. Server push means if any update occurs in the database, it just pushes the data to the client instead of creating connection checking for the update etc.

In SignalR, we have persistant connection, so the connection is established once in the begening and remains.

 

Persistant Connection

As per Wiki "HTTP persistent connection, also called HTTP keep-alive, or HTTP connection reuse, is the idea of using a single TCP connection to send and receive multiple HTTP requests/responses, as opposed to opening a new connection for every single request/response pair. The newer HTTP/2 protocol uses the same idea and takes it further to allow multiple concurrent requests/responses to be multiplexed over a single connection."



To develop SignalR Application, we need 2 things in our Application. 

1. HUB Class(Server side)
2. SignalR Clients(Client side)

SignalR almost supports clients for all technologies. If we have a look at this, it has a client for Web, Andrid, iPhone etc.

 

Before working on signalR, let's check some points.

1. Any class that is Inherited from HUB class is a SignalR Hub.Hub is a Server side material and needs to be hosted.
2. For .NET,  we have 2 clients that is (jQuery client and  have ASP.NET client).
   So from here we will check how we can work with signalR.
   
   Open vs and Create a new Web Project in Console Application.
   
   
   
   Now, go to the Tool and install SignalR from NuGet Package.
   
   
   Now, you will find the References given below in the project.
   
   
   
   You will find a Hub class also in the project.
   

   using System;
   using System.Collections.Generic;
   using System.Linq;
   using System.Text;
   using System.Threading.Tasks;
   using Microsoft.AspNet.SignalR;
   using Microsoft.AspNet.SignalR.Hubs;
   
   namespace SignalRHost
   {
       [HubName("MyHub")]
       public class MyHub:Hub
       {
   
   
       }
   }

   If we go to the definition of Hub, we will find the things given below inside the Hub.
   
   
   
   Now, we will see how can we call the SignalR Hub methods from .NET client. Now, I have created a method and I want to consume this method in my .NET client.
   

   using System;
   using System.Collections.Generic;
   using System.Linq;
   using System.Text;
   using System.Threading.Tasks;
   using Microsoft.AspNet.SignalR;
   using Microsoft.AspNet.SignalR.Hubs;
   
   namespace SignalRHost
   {
       [HubName("MyHub")]
       public class MyHub:Hub
       {
   
           public string getdetails( string s)
           {
               return "Hi" + s;
   
           }
   
       }
   }

   Now, we need to host the signalR Hub. Hence, we need OWIN to host this.
   
   
   
   
   It will add a startup.cs class or you can add a startup class and configure the SignalR hub, as shown below.
   
   
   
   Now, open the startup class and write the line given below.   
   
   Mapping the Hubs connection
   
   To enable SignalR in your Application, create a class called Startup with the code given below.

3. using System;
   using System.Threading.Tasks;
   using Microsoft.Owin;
   using Owin;
   
   [assembly: OwinStartup(typeof(SignalRHost.Startup))]
   
   namespace SignalRHost
   {
       public class Startup
       {
           public void Configuration(IAppBuilder app)
           {
   
               app.MapSignalR();
   
               // For more information on how to configure your application, visit http://go.microsoft.com/fwlink/?LinkID=316888
           }
       }
   }

   Now, open the main method of the console Application and write the code given below to host the Hub.
   

   using System;
   using System.Collections.Generic;
   using System.Linq;
   using System.Text;
   using System.Threading.Tasks;
   using Microsoft.AspNet.SignalR;
   using Microsoft.AspNet.SignalR.Hubs;
   using Microsoft.AspNet.SignalR.Client;
   using Microsoft.Owin.Hosting;
   
   namespace SignalRHost
   {
       class Program
       {
           static void Main(string[] args)
           {
   
               string url = "http://localhost:8077";
               using (WebApp.Start(url))
               {
                   Console.WriteLine("Server running on {0}", url);
                   Console.ReadLine();
               }
   
               System.Console.Read();
           }
       }
   }

   Here, we are hosting the the Hub on "http://localhost:8077" URL.
   

        Now, run the console Application, as shown below.
        

In this way, we can host our Application, using self Hosting. Now, SignalR Service is available in "http://localhost:8077".

Now, let's create another Web client Application and try to consume the Hub Method. Create another application and add signalR .NET client, as shown below.

Now, there are simple 5 steps to consume the method hosted in the hub.

1. Establish a connection with the URL, where the Hub is hosted.
2. Create a proxy of the Hub.
3. Open the connection.
4. Using the proxy object, call the method, which you want to invoke.
5. Save the result and display in the client Application.
   

   using Microsoft.AspNet.SignalR.Client;
   using System;
   using System.Collections.Generic;
   using System.Linq;
   using System.Web;
   using System.Web.UI;
   using System.Web.UI.WebControls;
   
   namespace SignalRChat
   {
       public partial class chat : System.Web.UI.Page
       {
        public  HubConnection hubConnection = null;
         public  IHubProxy HubProxy=null;
           protected void Page_Load(object sender, EventArgs e)
           {
   
           }
   
           protected void Button_Click(object sender, EventArgs e)
           {
               hubConnection = new HubConnection("http://localhost:8077/");
   
               HubProxy = hubConnection.CreateHubProxy("MyHub");
               hubConnection.Start();
              Execute();
   
               var p = HubProxy.Invoke<string>("getdetails", "Debendra").Result;
               ClientScript.RegisterStartupScript(this.GetType(), "myalert", "alert('" + p + "');", true);
   
   
   
           }
   
   
           private void Execute()
           {
   
               hubConnection.Start().ContinueWith(task =>
               {
                   if (task.IsFaulted)
                   {
                       Console.WriteLine("There was an error opening the connection:{0}",
                                         task.Exception.GetBaseException());
   
                       return;
                   }
                   else
                   {
                       Console.WriteLine("Connected to Server.The ConnectionID is:" + hubConnection.ConnectionId);
   
                   }
   
               }).Wait();
           }
       }
   }

   The result is given below.
   
   Now, let's check how can we call a Hub method, using JavaScript client. Let's have the method given below in the HUB.
   

     public class ChatHub : Hub
       {
           #region Data Members
   
           static List<UserDetail> ConnectedUsers = new List<UserDetail>();
           static List<MessageDetail> CurrentMessage = new List<MessageDetail>();
           SqlConnection con;
           DataSet ds;
           DataTable dt;
           SignalREntities _signalRDB;
   
           #endregion
   
           #region Methods
   
           public void Connect(string userName, string email,string pass)
           {
               _signalRDB = new SignalREntities();
               Registration reg = new Registration();
              var id= Context.ConnectionId;
               reg.ConnectionId= Context.ConnectionId;
               reg.NickName= userName;
               reg.EmailId = email;
               reg.password = pass;
               _signalRDB.Registrations.Add(reg);
               _signalRDB.SaveChanges();
   
   }

   I have have simply created a Create method in my Chat Hub. Now, I want to call this method from Javascript client. First, add JavaScript references given below on the page.
   

    <script src="/Scripts/jquery-1.8.2.min.js"></script>
   <!--Reference the SignalR library. -->
   <script src="/Scripts/jquery.signalR-1.0.0.js"></script>
   
   <!--Reference the autogenerated SignalR hub script. -->
   <script src="/signalr/hubs"></script>

   Now, my JavaScript client code is given below.
   

   <script type="text/javascript">
   
          $(function () {
   
              // Declare a proxy to reference the hub.
              var chatHub = $.connection.chatHub;
   
              registerClientMethods(chatHub);
   
              // Start Hub
              $.connection.hub.start().done(function () {
   
                  registerEvents(chatHub)
   
              });
   
          });
               function registerEvents(chatHub) {
   
              $("#btn_register").click(function () {
   
                  var name = $("#txt_NickName").val();
                  var email = $("#txt_email").val();
                  var password = $("#txt_password").val();
   
                  if (name.length > 0) {
                      chatHub.server.connect(name,email,password);  //It will call the connect method on Hub
                  }
                  else {
                      alert("Please enter name");
                  }
   
              });
   
      </script>

   Hence, my UI is given for for the code given below.
   
   
   

   <body class="blue">
   
   
     <div id="login-page" class="row">
       <div class="col s12 z-depth-6 card-panel">
         <form class="login-form" runat="server">
           <div class="row">
             <div class="input-field col s12 center">
   
                 <img src="Images/240_F_98129226_SNcpf7qMgTgJikjE4xdskEHEgV465gnN.jpg" width="120" />
             </div>
           </div>
           <div class="row margin">
             <div class="input-field col s12">
               <i class="mdi-social-person-outline prefix"></i>
   
                 <asp:TextBox ID="txt_NickName" runat="server"></asp:TextBox>
   
             </div>
           </div>
           <div class="row margin">
             <div class="input-field col s12">
               <i class="mdi-communication-email prefix"></i>
   
                  <asp:TextBox ID="txt_email" runat="server"></asp:TextBox>
   
             </div>
           </div>
           <div class="row margin">
             <div class="input-field col s12">
               <i class="mdi-action-lock-outline prefix"></i>
               <input id="txt_password" type="password" class="validate">
   
             </div>
           </div>
   
   
           <div class="row">
             <div class="input-field col s12">
   
                 <asp:Button ID="btn_register" Text="Register" runat="server" />
             </div>
             <div class="input-field col s12">
               <p class="margin center medium-small sign-up">Already have an account? <a href="login.aspx">Login</a></p>
             </div>
           </div>
         </form>
       </div>
     </div>
   
   
   
   </body>

   Now, lets enter the details and click on register the button.
   
   
   
   As per the logic, it will execute the Hub connect method.
   
   
   
   In this way in JavaScript, we can call the Server Hub method.

I hope you understood these basics of SignalR. If you have any doubts about this, please let me know, so that I can try to explain it more clearly.

In my next article, we will work on a SignalR project.