Hello World App Using ASP.NET SignalR

Introduction

ASP.NET SignalR is an async signaling library for .NET to help build real-time, multi-user interactive web applications. In this article we will see, how do create a basic application using ASP.NET SignalR.

Previously SignalR was a standalone entity, now it's integrated as part of ASP.NET framework. You can check the following fall update.

http://www.microsoft.com/en-us/download/details.aspx?id=35493

Procedure

We can check the following documentation to understand the basics about SignalR.

https://github.com/SignalR/SignalR/wiki

We will create a simple application that the user can drag and drop the Div/Box and the same position of the box will be updated to all clients. First we need to add a reference for the SignalR dlls; we can use the Nuget package also to add the references.

http://nuget.org/packages/microsoft.aspnet.signalr

The same Nuget Package can also install the required JavaScript files and we added the "Jquery.UI" plug-in for the demo application.

We will create a simple "Hub" to broadcast the required actions (method) from the server as explained below. Please note that we need to add the "Microsoft.AspNet.SignalR.Hubs" namespace and the application namespace should be unique across the application files.

We will prepare the client, just added a HTML page and the following JavaScript references and div tag.

We don't have the manual reference for "signalR/hubs" js, it'll automatically be created at runtime and does the all magic. We'll add the following JavaScript to complete our functionalities.

In the preceding script we have three parts:

1. We need to create a connection to the server and the same "Hub" name should be used in this connection statement.
2. We can define the client side event called "shapemoved" and do the actions at the client side. Here we set the CSS property to the "shape" div. If we notice the "Hub" code we are calling this client side event from the server.
3. The final one to do is we need to call a server side method "action" which is a "Hub" method. We called the "action" method in the client side "drag" function.

That's all, now we will see the result in action, if we drag the box in one browser and it's automatically updated in other clients.

Summary

ASP.NET SignalR is a new library for ASP.NET developers that make it incredibly simple to add real-time web functionality to your applications. What is "real-time web" functionality? It's the ability to have your server-side code push content to the connected clients as it happens, in real-time.