How To Build Cloud-Based, Asynchronous, Scalable Web Applications With Near Real-Time Persistent Long-Running Connections With SignalR

First of all, thank you to David Fowler and Damian Edwards for creating SignalR and providing a demo here: http://channel9.msdn.com/Shows/Web+Camps+TV/Damian-Edwards-and-David-Fowler-Demonstrate-SignalR. SignalR is a new technology from Microsoft that makes long-running interactions between web client and web server practical and scalable. SignalR is a framework available on GitHub (https://github.com/SignalR/SignalR) that makes it easy to build asynchronous scalable web applications with real-time persistent long-running connections. A number of technical innovations in recent years has paved the way to create SignalR. If you talk to its creators, David Fowler and Damian Edwards, they will tell you that SignalR would have been too challenging a few years ago.

1. Click on the link twice
   • This will open up two instances
   • You can even use different browsers
2. Move the grey rectangle with the mouse
   • You should see both rectangles move

Try it out (click twice)

http://signalrincloud.cloudapp.net/Moveshape.htm

Writing multi-threaded programs was just too difficult until the Task Parallel Library in the Microsoft .NET Framework 4 was introduced. Also, the development of jQuery makes it possible to write JavaScript once and deploy it on Firefox, Internet Explorer, Safari, Opera, and Chrome. The convergence of various technologies has opened the door for the technical feasibility of creating and using SignalR.

Let’s discuss how we’d implement the application in Figure 1, which allows one browser to broadcast a drag operation to other browsers. This means that if a user drags a shape in one browser, all other browsers will see the shape move on their own browser. If Browser #1 moves the grey shape, the shape will automatically move in Browser #2.

Download for Azure SDK

1. Create a new cloud project.
   • Start Visual Studio as administrator and select File, New Project.
   • In the left template pane in the New Project dialog, select Cloud, then provide a Name and Location.
2. Double-click ASP.NET Web Role.
   • You can also hit the “>” button between the two panes.
   
3. Rename web role to CloudSignalRSample_WebRole.
   • This is not required but keeps the code better organized.

Exercise 1: Task 2 - Use NuGet to Install SignalR

NuGet is probably the easiest way to work with SignalR. It allows you to easily download the SignalR assemblies, and add some SignalR sample source code to your project. It also adds the needed references.

1. If you haven’t done this previously, enabling NuGet is the first step and can be done from the Tools menu.
   • Select Extension Manager. NuGet is useful for a variety of technologies, not just SignalR.
2. Selet NuGetPackage Manager and choose Download.
3. Once NuGet is installed, we can begin to install SignalR.
4. Selecting the first of two SignalR packages. Be sure to install these two:
   • SignalR.Js
   • SignalR.Hosting.AspNet
   
5. Install the package SignalR.Hosting.AspNet
6. Note that various references have been added to reflect the SignalR packages just installed.

1. Right click on the web role and select Add, New Item.
2. Select Class and name the file MoveShape.cs.
   
   

   ---

   MoveShape.cs

   using System;
   using System.Collections.Generic;
   using System.Linq;
   using System.Web;
   
   // Add reference
   using SignalR.Hubs;
   namespace CloudSignalRSample_WebRole
   {
       // Derive from Hub, which is a server-side class
       // and a client side proxy.
       [HubName("moveShape")]  // moveShape is the name used in the Javascript
       public class MoveShapeHub : Hub
       {
           public void MoveShape(int x, int y)
           {
     

               // Broadcast drag event to other browsers

               Clients.shapeMoved(Context.ConnectionId, x, y);
   
               // Simple diagnostics for debugging
               System.Diagnostics.Debug.WriteLine("x = " + x + ", y = " + y);
           }
       }
   }
     

3. Use NuGet to add some jQuery code to the project.
   • Right click on References and choose Manage NuGet Packages.
   
4. Select the NuGet Package called jQuery UI (Combined Library).
   
5. Note that the following scripts that have been added.
6. Right click on the web role and select Add, New Item.
   • We will add MoveShape.js.
   • This represents the jQuery written to send drag events to the server.
   • MoveShape.js will also move shape objects in the web page for drag events sent by the SignalR server.
   
7. Select Web in the Templates pane and the Jscript File for the file type.
   • Provide the name MoveShape.js
   
   
   
8. Paste in the following code into MoveShape.js.

   ---

   MoveShape.js

   /// <reference path="Scripts/jquery-1.6.4.js" />
   /// <reference path="Scripts/jquery.signalR.js" />
   /// <reference path="Scripts/jquery-ui-1.8.18.js" />
   
   $(function () {
       // Get a refeerence to the server-side moveShape() class.
       var hub = $.connection.moveShape,
       // Get a reference to the shape div in the html
       $shape = $("#shape");
       // Use extend to move the shape object (if we are not the sender)
       $.extend(hub, {
   
           // Use css to move the shape object
   
           shapeMoved: function (cid, x, y) {
               if ($.connection.hub.id !== cid) {
                   $shape.css({ left: x, top: y });
                   $("p:last").text("left: " + x + ", top: " + y);
               }
           }
       });
       // Wire up the draggable behavior (when hub is done starting)
       // "done" is a jquery deferred method
       $.connection.hub.start().done(function () {
           $shape.draggable({
               // Implement draggable effect for jquery
               drag: function () {
                   // Tell the server that the shape was just dragged
                   hub.moveShape(this.offsetLeft, this.offsetTop);
               }
           });
       })
   });
   
     

9. Right click on the web role and select Add, New Item.
   • We will add MoveShape.htm.
   • This represents the primary web page the user will interact with.
   • It contains the shape that the user will drag.
   • It leverages MoveShape.js, which we just wrote.
   
10. Select Web in the Templates pane and the HTML Page for the file type.
    • Provide the name MoveShape.htm
    

    ---

    MoveShape.htm

    <!DOCTYPE html >
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <style type="text/css">
            #shape
            {   
                width: 200px;
                height: 200px;
                background: #ccc;
                border: 2px solid #333;
                
            }
            p { margin-left:10px; }
        </style>
    </head>
    <body>
        <div id="shape"></div>
        <script src="../Scripts/jquery-1.6.4.js" type="text/javascript"></script>
        <script src="../Scripts/jquery-ui-1.8.18.js" type="text/javascript"></script>
        <script src="../Scripts/jquery.signalR.js" type="text/javascript"></script>
        <script src="/signalr/hubs" type="text/javascript"></script>
        <script src="MoveShape.js" type="text/javascript"></script>
        <div>  <p>Hello</p></div><p></p>
    </body>
    </html>
    
    

1. Select the Debug, Start Debugging menu.
   • This will start the Compute and Storage Emulators (the come when you install the Azure SDK and related tooling).
   

1. Start another browser instance. Start IE (or any browser) and paste in the url:  http://127.0.0.1:81/MoveShape.htm.
   • Move the shape in either of the two browsers.
   • Note the two instances communicating.
   
2. We are done. Prepare for the next step.
   • At a high level we will go to the Windows Azure Management Portal and provision a hosted service and a storage account.
   • The hosted service will act as our container for our server and client code code.
   • Although we are not using storage, we will need a storage account for diagnostics.

Sign up for an Azure account

1. Sign in to the Windows Azure Portal.
   • Click in the left pane on Hosted Services.
   • Go to the middle pane to the relevant account, right-mouse click and select New Hosted Service.
   
2. Specify the details of your Hosted Service.
   • Enter a name for your service.
   • Enter a URL (this has to be globally unique)
   • Choose a region (this is the location of the data center)
   • Select Do Not Deploy (we will deploy later)
   
3. Notice that the portal indicates the hosted service is being provisioned.
   • It takes about 10 minutes for this process to complete.
   
4. Provision a storage account.
   • A storage account is needed for the built-in diagnostics.
   
5. Provide a Name for your Storage Account.
   • Provide a URL that is globally unique.
   • Specify a Region or Data Center (should be in the same data center as your hosted service for performance reasons).
   
6. Wait for the storage account to complete.
7. Once your storage account is complete, you will need the Access Keys.
   • The Access Key is needed for diagnostics.
   • You will enter the Access Key into your Visual Studio Project.
   • Click on the View Access Key toolbar button
   
8. Copy the Primary Access Key to the clipboard.
   • Click on the icon to the right as seen below.
   
9. You will now enter your Access Key into Visual Studio.
   • Right mouse click and choose Properties.
   
10. In the left pane click on Settings.
    • The Storage Account Connection String Dialog box will appear.
    
11. Click on Enter storage account credentials.
    • Enter the Account name that you specified at the portal.
    • Paste in the Account Key that you copied from the portal.
    
12. Click on Configuration.
    • Note that the Instance count is 1 (this means there is one running instance of your SignalR server application)
    • You can increase the instance count number to increase scale.
    
13. We are now ready to package up our SignalR Cloud Application.
    • Right mouse click on CloudSignalRSample.
    
14. Click the Package Button.
    • We will leave everything else to the default values.
    
15. When the packaging process is complete, Visual Studio will launch an explorer window so you can see your two package files.
    • The first file is the web application itself, complete with all the needed assemblies (Including SignalR).
    • The second file is the configuration file (stores the instance count, the access keys,etc).
    
16. Return back to the Windows Azure Portal.
    • Click on Hosted Services.
    • Right mouse click on your previously created Hosted Service.
    • Select New Production Deployment.
    
17. You will now upload your packaged files from the previous step.
    • The path used by Visual Studio is C:\temp\signalr\CloudSignalRSample\CloudSignalRSample\bin\Release\app.publish.
    • You will upload both the cspkg file as well as the cscfg file.
    
18. You are getting this warning because your instance count was only 1.
    • If you want to utilize the SLA of Windows Azure, you need an instance count of at least 2.
    • You can ignore and click Yes.
    
19. 10 minutes later, the web application is ready to use.
    • Note the DNS Name (http://signalrInCloud.cloudapp.net).
    
20. 10 minutes later, the web application is ready to use.
    • Note the DNS Name (http://signalrInCloud.cloudapp.net).
    • You will have your own DNS name based on the URL you provided in an earlier step.
    • In my case, I am navigating to http://signalrincloud.cloudapp.net/Moveshape.htm

    Try it out (click twice)

    http://signalrincloud.cloudapp.net/Moveshape.htm

    
    
21. Navigate to http://signalrincloud.cloudapp.net/Moveshape.htm
    • Start another browser instance. Start IE and paste in the url:  http://signalrincloud.cloudapp.net/Moveshape.htm
    • Move the shape in either of the two browsers.
    • Note the two instances communicating.
    

Download for Azure SDK