Monday, January 14, 2013

Bootstrapping with ASP.NET SignalR

This is a follow up post for ASP.NET SignalR. In my previous post I introduced you to the library and what it is all about. On this one though, I want to quickly take you on a hands-on, step-by-step guide so you can quickly setup your environment and see the power of SignalR working in just a few minutes.

Lets start by creating a new web project in Visual Studio that can take advantage of the SignalR library.

/1. Open VS2012 and create a new empty asp.net web project.

image_thumb1

/2. Open the NuGet Package Manager (right click on the project references and select “Manage NuGet Packages”).

 image_thumb3

/3. Search for “Microsoft.AspNet.SignalR” in the online packages area. Make sure you are including pre releases in the search results. Once you find it, just click the “install” button. It will list the packages to be installed, and it will also ask you to accept the license agreement.

image_thumb5

Alternatively, you could open the Package Manager Console and type in the following command to install the package:
Install-Package Microsoft.AspNet.SignalR -Pre”

 image_thumb7

image_thumb9

Either method will install the SignalR package and all required dependencies. The package references and scripts will be included in the project.

image_thumb11

And you are done. That’s it. Your web app is ready to take full advantage of the SignalR library to provide real-time functionality!

Now, I know what you are thinking! - “Now what?”, right? Don’t worry. Now that you know how simple it is to add the library to your project, lets actually run a sample app so we can see it working.

Running the Stock Ticker Sample App

SignalR provides a good sample application to get started. The app is a web stock ticker that updates in real time. It uses the library and demonstrates how straight forward, fast and robust can this simple library be.

/1. Start by opening Visual Studio 2012 and creating a new ASP.NET empty web application, like we did previously.

/2. Now we need to install the SignalR library package using NuGet, except that this time we will install the sample app package. You can do so by looking for the “Microsoft.AspNet.SignalR.Sample” on the NuGet window, or by executing the following command in the Package Manager Console:
Install-Package Microsoft.AspNet.SignalR.Sample -pre

/3. After installing the package you will notice that apart from the .NET assembly references, and the scripts added, there is a new folder called “SignalR.Sample”, which contains all the sample files required, including the JavaScript files, the C# classes and the HTML and CSS files.

image_thumb13

Compile the project and make sure everything is in order. Then, find the StockTicker.html page in the SignalR.Sample project. Right click on it and select “View in Browser”. This will run the project, and will open the browser on that specific page you selected.

image_thumb15

Now, lets test it for real. Open several browser windows, ideally using different browsers. Copy the URL on all of them, and arrange them so you can see all of the running. Once you have all windows ready, click on the “Open Market” on any of them to start triggering real-time updates.

image_thumb17

Notice how all the windows, no matter what browser they are, will get the updates in real-time. No delay, no lag between them. All clients are getting the updates pushed by the server. Isn’t that really cool?

image_thumb20

So, now that you can get a sample app installed, compiled and running, and also know how to bootstrap your own web app with SignalR, is time to go a little further and check out some really helpful links.

Just in case, here is the link to the NuGet package install.

Here is the next step. A tutorial on how to implement a simple chat web application with SignalR that uses the Hubs API to echo and broadcast messages among the connected clients, which do remember the name of the person connected.

So that’s a wrap! Keep playing around with SignalR and stay tuned. I’ll be publishing more samples and prototypes using SignalR soon.

No comments:

Post a Comment