SignalR - Hello World: Real time chat application on Web in ASP.Net using SignalR technology : Step 1

Programming with distributed technology is my passion. Earlier I have worked with Remoting, Socket, Web Service and a bit with WCF. So when I first came to know about SignalR technolog, really I can not wait to start coding on it. Now I can able to write own chat application for AlapMe and really its working fine. Most of all by using SignalR I can use socket of HTML5. I shall write multiple posts on SignalR as tutorial as I did in past with C# Socket programming. I shall publish these posts on this blog and on my socket programming blog as well.
I have started SignalR programming with Visual Studio Express 2013 which is freely downloadable from here. Also you can read full documentation from Microsoft from this link. As my target to share some practical example with ready to use code hence I shall not describe in detail about the technology. You can follow Microsoft documentation website for it.
To start with SignalR first coding you need to follow steps are below.
Lunch your VS 2013 and create a blank project and add new item of SignalR Hub Class (v2) set its name as you wish, for my case its MyHub.cs. When you will add this class Visual Studio automatically add all related references and jquery classes. To add these things it may take some time may be 2-3 minutes. This new item will come with a sample method 'Hello()', for now just follow these later I shall describe what is these things and why these are. Full code will look like below:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using Microsoft.AspNet.SignalR;

namespace SignalR_Learning

{

    public class MyHub : Hub

    {

        public void Hello()

        {

            Clients.All.hello();

        }

    }

}

Now go to next step and add next item in project, that is OWIN Startup class. I am giving its default name 'Startup1.cs' for my sample project. Visual Studio will create this file with some pre-added code. We will extend these code as per your needs. Code as below:

using System;

using System.Threading.Tasks;

using Microsoft.Owin;

using Owin;

[assembly: OwinStartup(typeof(SignalR_Learning.Startup1))]

namespace SignalR_Learning

{

    public class Startup1

    {

        public void Configuration(IAppBuilder app)

        {

            // For more information on how to configure your application, visit http://go.microsoft.com/fwlink/?LinkID=316888

        }

    }

}

In method Configuration I shall add just a line of code 'app.MapSignalR();' so full method will look like:

public void Configuration(IAppBuilder app)

{

    // For more information on how to configure your application, visit      http://go.microsoft.com/fwlink/?LinkID=316888

    app.MapSignalR();

}

 Now we will move to front end coding and this part will develop with simple HTML page, however you can use ASPX page as well. Now I have added a HTML page with name 'index.html'

<! DOC TYPE ht ml >

< ht ml xmlns="http://www.w3.org/1999/xhtml" >

    SignalR Simple Chat

    "X-UA-Compatible" content="IE=edge" / >

    

    

     < sc ript src="Scripts/jquery-1.10.2.js">

    < sc ript src="Scripts/jquery-1.10.2.min.js">

   

    < scri pt src="Scripts/json2.js">

    

    "Scripts/jquery.signalR-2.0.0.js">

    "Scripts/jquery.signalR-2.0.0.min.js">

    

    "/signalr/hubs">

    

    "text/ ">

        var chat;

        $(f unction () {

            // Declare a proxy to reference the hub.

            //chat = $.hubConnection.myhub;

            chat = $.connection.myhub;

            //alert(chat);

            chat.client.hello = function (message) {

                alert(message);

            };

            // Start the connection.

            $.connection.hub.start().done(function () {

                $('#btnhello').click(function () {                   

                    alert(chat);

                });

            });

        });

    

    "button" value="Hello" id="btn hello" />