In this article I’m explaining about SignalR

We know very well how a client sends data to a server so now it's time to understand how a server pushes data to a client in a HTTP connection. SignalR is an open source library to add real-time web functionality in your ASP.Net web application. So what does real-time functionality mean? Just use as an example when more than 1 user is working on the same document in Google Documents When a user is making changes and at the same time another user can see the changes without reloading the page. So real-time web functionality is the ability to have server code to push content to connected clients. In the HTTP request response model we know each time we need to send a new request to communicate with the server but SignalR provides a persistent connection between the client and server.

Using SignalR we can create web applications that require high frequency updates from the server. For examle, a dashboard, games and chat applications. SignalR uses Web Sockets and the HTML5 API that helps in bidirectional communication. It also provides an API for server-to-client Remote Procedure Calls (RPC) call, it may be something new for you because most of the time we use a request and response model.

SignalR includes automatic connection management, it provides the facility to broadcast messages to all connected clients or to a specific client. The connection between the client and server is persistent while in HTTP it isn't persistent.

a.     Chat room applications

b.     Real-time monitoring applications

c.      Job progress updates

d.     Real time forms

Step 1:

Open Visual studio >> File >> New >> Select Asp.NET MVC 4 Web Application >> Project Name >> Click “Ok” >> Select Empty Template Click “ OK”

Step 2:

Tools >> Library Package Manager >> Package Manager Console

Install SignalR package

type code in Console

PM> Install-Package Microsoft.AspNet.SignalR

Step 3:

Now create “Hubs” folder and add a class named “ChatHub”

And write below code in it.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Microsoft.AspNet.SignalR;
 
namespace AdminChat.Hubs
{
    publicclassChatHub:Hub
    {
        publicvoid Send(string name, string message)
        {
            Clients.All.broadcastMessage(name, message);
        }
 
    }
}

Step 4:

Now add a “Home” Controller

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
 
namespace AdminChat.Controllers
{
    publicclassHomeController : Controller
    {
        //
        // GET: /Home/
 
        publicActionResult Index()
        {
            return View();
        }
 
    }
}
 

Step 5:

Now add a view named “Index.cshtml”

@{ 
    ViewBag.Title = "Index"; 
} 
<script 
src="~/Scripts/jquery-1.6.4.min.js"></script> 
<script 
src="~/Scripts/jquery.signalR-2.1.1.min.js"></script> 
<script 
src="~/signalr/hubs"></script> 
<script type="text/javascript"> 
    $(function () { 
        var chat = $.connection.chatHub; 
        $.connection.hub.start().done(function () { 
            $('#btnSend').click(function () { 


                chat.server.send($('#name').val(), $('#txtMessage').val()); 
                $('#txtMessage').val('').foucs(); 
            }); 


        }); 

        chat.client.broadcastMessage = function (name, message) { 
            var encodedName = $('<div />').text(name).html(); 
            var encodedMessage = $('<div />').text(message).html(); 
            $('#MessageList').append('<li><strong>' + encodedName + '</strong> : &nbsp;&nbsp;' + encodedMessage + '</li>'); 
        }; 

        $('#name').val(prompt('Enter Name : ', '')); 


    }); 
</script> 

<div> 
    <div> 
        <input type="text" id="txtMessage" /> 
        <input type="button" value="Send" id="btnSend" /> 
        <input type="hidden" id="name" /> 
    </div> 
    <div> 
        <ul id="MessageList"> 
        </ul> 
    </div> 
</div>

Step 6:

Now add another class named “StartUp” in Hubs folder

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 
using Microsoft.Owin; 
using Owin; 
[assembly: OwinStartup(typeof(AdminChat.Hubs.StartUp))] 

namespace AdminChat.Hubs 
{ 
    public class StartUp 
    { 
        public void Configuration(IAppBuilder app) 
        { 
            app.MapSignalR(); 
        } 
    } 
}

Run Application and look like this

Enter User Name click ok and copy url and paste other tab and enter other user name

Type message and send

in my next post i'll explain about IndexOf methods in c#