Understanding SignalR From Scratch

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 hub on the "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 at "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 it 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();  
        }  
    }  
}  
  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();  
  
}  
<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>  
<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>  
<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>  

The result is given below.

Now, let's check how to call a Hub method using a JavaScript client. Let's have the method given below in the HUB.

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

Now, my JavaScript client code is given below.

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

Now, let's enter the details and click on register the button.

As per the logic, it will execute the Hub Connect method.

Conclusion

In this way, in JavaScript, we can call the Server Hub method. I hope you understand the basics of SignalR. If you have any doubts about this, please let me know so I can try to explain it more clearly.

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