Working With SignalR 2

Introduction

SignalR is a technology used to create real-time functionality to applications. The term real-time is the ability to get the content to the clients instantly from the server. It doesn’t wait for the client to request the data. This can add any kind of ‘real-time’ web functionality to your ASP.NET application. You can perform any kind of operations related to real-time functionality, here we are using a discussion page where users are connecting just for any discussion.

The application requiring this functionality can use the functionality of SignalR to add the real-time behavior to the app. It doesn’t need the page to be refreshed for any new data or any Ajax call to get the updated data to display just by calling the service internally. This is a very simple and lightweight technique to update the client for any new pushed data.

You can use the real-time behavior for gaming applications, kiosk machines, and any embedded system. This provides a simple API for creating a server to client RPC that calls the Javascript function in a client-side browser from the server. All the management for connection maintenance, and disconnecting from apps is done by SignalR API.

Prerequisite

1. Programming of C#.
2. Knowledge of JavaScript and Jquery.

Implementation

1. Open Visual Studio.
2. Create a new project.
3. Enter the project name and select location.
   
   
   
   
4. Select Empty from templates.
   
   
   
   
5. Add SignalR to your project

Goto Tools - Library Package Manager - Package Manager Console.

Run the below command.

install-package Microsoft.AspNet.SignalR

If you have added the SignalR from the console, then create the SignalR hub class as separate after you add SignalR.

Add the signalR hub class ChatHub.cs and replace the content as below,

using System;
using System.Web;
using Microsoft.AspNet.SignalR;
namespace SignalRChat
{
    public class ChatHub : Hub
    {
        public void Send(string name, string message)
        {
            // Call the broadcastMessage method to update clients.
            Clients.All.broadcastMessage(name, message);
        }
    }
       }

SignalR Hubs

The Hub class is used to build the SignalR application.

The Send method of ChatHub class demonstrates several hub concepts :

• We can declarea public method which is being called by the client.
• We use Microsoft.AspNet.SignalR.Hub.Clients  dynamic property to access all clients connected to this hub.
• Call a function on the client (such as the broadcastMessagefunction) to push any update to the connected client.
  
  Add the StartUp.cs class and add the below content,
  

  using Microsoft.Owin;
  using Owin;
  [assembly: OwinStartup(typeof(SignalRChat.Startup))]
  namespace SignalRChat
  {
      public class Startup
      {
          public void Configuration(IAppBuilder app)
          {
              // Any connection or hub wire up and configuration should go here
              app.MapSignalR();
          }
      }
  }

6. Add myScript.js under Scripts directory and add the below content.
   

   $(document).ready(function () {
       $('#container').hide();
   });
   
   function startDiscussion() {
   
       // Declare a proxy to reference the hub.
       var chat = $.connection.chatHub;
       // Create a function that the hub can call to broadcast messages.
       chat.client.broadcastMessage = function (name, message) {
   
           var encodedName = $('<div />').text(name).html();
           var encodedMsg = $('<div />').text(message).html();
   
           $('#discussion').append('<li><h4>' + encodedName
               + '</h4>:  ' + encodedMsg + '</li>');
       };
       $('#message').focus();
       $.connection.hub.start().done(function () {
           $('#sendmessage').click(function () {
               chat.server.send($('#displayname').val(), $('#message').val());
               $('#message').val('').focus();
           });
       });
   }
   
   function AddUser() {
       if ($('#username').val() == "") {
           alert('enter username');
           return;
       }
       $('#displayname').val($('#username').val());
       $('#container').show();
       $('#setUser').hide();
       startDiscussion();
   $('#welcome').append(" : " + $('#username').val());
   }

   Note
   The code above is the sample reference of C# ChatHub class in above JS as chatHub as we use in camelCase.

7. Add index.html and add the below contents,
   

   <!DOCTYPE html>
   <html>
   <head>
   <style>
   </head>
   <body style="background-color: sienna">
   <h1>XYZ Discussion!</h1>
       <div class="container" id="container">
           <h2>Welcome to Discussion.</h2>
           <input type="text" id="message" />
           <input type="button" id="sendmessage" value="Send" />
           <input type="hidden" id="displayname" />
           <ul id="discussion"></ul>
       </div>
       <div id="setUser">
           <input type="text" id="username" placeholder="Enter your name"/>
           <input type="button" onclick="AddUser()" value="Join Discussion" />
       </div>
   </body>
   </html>

8. Directory structure will be as follows,
   

Let us run the application and see.

Note

1. For testing purposes open the same url in two tabs.
2. I have entered two names, “Irshad” and “Imran” for discussion.
3. Sent message from any user will be notified to all the open tabbed clients.
4. You can see the below images.