Real-time Communication with SignalR

HTTP is designed for Request Response. It's not designed for real-time communication. But now HTML 5 has provided Web Sockets for real time communication. But Web Sockets is still in draft state.

Techniques for Real Time Communication

• Forever frame
• Periodic polling
• Long polling

But there are lots of disadvantages of the above techniques. Also those techniques are not actually real time. That may contain even a minor delay of real-time communication. And also wasting of server and client resources.

What is SignalR?

"SignalR is an open-source .NET library for building web applications that require live user interaction or real-time data updates."

In this post I'll create a sample real-time application using SignalR Hubs. It's about, when a client send a message to the server, all the clients connected to that server will get the message in real time.

Create ASP.net empty web application using .net 4.5. After that Install Microsoft.AspNet.SignalR through nuget.

Add Global.asax for the project. In the Application_Start method map the hubs like below.

Create a hub class called NotificationHub. In SignalR, Hubs  provide a higher level RPC framework over a PersistentConnection. 

I have set the hub name as notification using HubNameAttribute. When a client call the SendNotifications method, the message will send to all clients who has connected to the hub. Now the hub class is completed.
We need to design the web page for this. Add Notification.html page to the project.
We need to add some java script reference for the page.

• Jquery library(jquery-1.6.4.min.js)
• SignalR Library(jquery.signalR-1.0.0-rc2.min.js)
• SignaR java script proxy for the hubs. This is a virtual path (/signalr/hubs)
• Notification.js. The file that we are going to write our java scripts.

When ever a user type message in txtNotification and press SendNotification button, this will go to server and server will send that message to all clients which have connected to the hub. All messages retrieved from the server will be displayed in the messages div.

Now we have to write the java script code for access the notification Hub. Add Notification.js file in the Scripts folder.

After the web page has loaded event, add a reference to the server side hub by adding,
var hub = $.connection.notification;

In the NotificationHub, when SendNotifications method get called, it will call to client's SendDetails method. So we need to write relevant java script code for SendDetails method like below.

After the hub is started we need to enable the click function like below. When the button get clicked we need to call sendNotifications method in the hub.

Below is the full Notification.js code.

Run the Notification.html file. Enter some values and send. This will show the sent values in the messages div.

Open a new browser window using the same URL. Send messages from that browser window also. Those messages will reflect in the both browser windows in real time. Open several browsers and try send messages.

You can find the source of this demo in GitHub.