Overview of SignalR

What is SignalR
According to Wikipedia, ASP.NET SignalR is a library for ASP.NET developers to add real-time web functionality to their applications.

SignalR is a framework for building asynchronous applications. “R” stand for “Real Time”. SignalR is a realtime communication framework built on top of the WebSoket specification.
 
It does fallback to classic HTTP when websockets are not supported by client or server. SignalR is stateless by design and it’s not aware of ASP.NET user session

 

MVC SignalR Project
To create sample applications, we need to have Visual Studio 2012 or later installed and be able to run the server on a platform that supports .NET 4.5.

Step 1:



Step 2:



Step 3:



Getting Started with SignalR

The first thing is NuGet, which is used to get the needed SignalR assemblies into our solution. Next, we focus on creating OwinStartup class.

Get it on NuGet!
Install-Package Microsoft.AspNet.SignalR



Register SignalR middleware

The following code is to define the SignalR Hubs route using an OWIN startup class. Now we will create OwinStartup Class:



Startup.cs

using System;
usingSystem.Threading.Tasks;
usingMicrosoft.Owin;
usingOwin;
[assembly: OwinStartup(typeof (WebAppSignalR.Startup))]
namespaceWebAppSignalR
{
    publicclassStartup
    {
        publicvoid Configuration(IAppBuilder app)
        {
            app.MapSignalR();
        }
    }
}

Explanation

The following attribute will set the startup class to the TestStartup class in the StartupDemo namespace.

[assembly: OwinStartup(typeof(WebAppSignalR.Startup))]

Add the following code to the Startup.Configuration method:

public void Configuration(IAppBuilder app)
{
   app.MapSignalR();
}

This code adds a simple piece of middleware to the OWIN pipeline, implemented as a function that receives a Microsoft.Owin.IOwinContext instance. When the server receives an HTTP request, the OWIN pipeline invokes the middleware. The middleware sets the content type for the response and writes the response body.

Create and use Hub classes

After this we will focus on creating a Hub, which we discussed earlier.



The following class is a simple Hub class in this application that derives from Microsoft.Aspnet.Signalr.Hub.

namespace WebAppSignalR.Hubs
{
    public classMessageHub: Hub
    {
        public void SayHello(String message)
        {
            Clients.All.Hello(message);
        }
    }
}

HomeController Code

namespace WebAppSignalR.Controllers
{
    public class HomeController: Controller
    {
        // GET: Home
        public ActionResult Index()
        {
            return View();
        }
    }
}

Index View Code

@{
    ViewBag.Title = "Index";
} < h2 > Say Hello < /h2> < divid = "messages" > < /div> < hr / > < inputtype = "text"
id = "myMessage"
value = "" / > < buttontype = "button"
id = "submit" > Send! < /button>
@section JavaScript
{ < scriptsrc = "~/scripts/jquery-1.10.2.min.js" > < /script> < scriptsrc = "~/scripts/jquery.signalR-2.2.0.min.js" > < /script> < scriptsrc = "~/signalr/hubs" > < /script> < scripttype = "text/javascript" > $(function ()
    {
        var hub = $.connection.messageHub;
        //client method which can be called from the server
        hub.client.hello = function (message)
        {
            $("#messages").append("<p>" + message + "</p>");
        };
        // Wait for the connection
        $.connection.hub.start().done(function ()
        {
            //click event handler to send the message
            $("#submit").click(function ()
            {
                var message = $("#myMessage").val();
                //invoke method
                hub.server.sayHello(message);
                //reset field
                $("#myMessage").val("");
            });
        });
    }); < /script>
}

Output