Azure Web Site now supports WebSockets

Gustavo Armenta Valdez

If you missed the announcement the other day, WebSockets are now supported in Windows Azure Web Sites.

Let’s try it with a sample SignalR application.

Create an Azure Web Site

1. Login to http://manage.windowsazure.com/
2. Select New, Compute, Web Site, Quick Create
   • Type a URL and click Create Web Site

   

3. Go to Dashboard of your new website, click Download the publish profile, and save *.PublishSettings file on your local hard drive
   

Create a Visual Studio Project associated to an Azure Web Site

1. Install Azure SDK for Visual Studio 2013
2. Open Visual Studio 2013
3. On Menu: select File, New, Project, Visual C#, Web, ASP.NET Web Application
   • On Name, type "AzureWebSiteWithWebSockets", click OK
   • Select Empty, click OK
4. In the Solution Explorer, right-click on your project and select Publish
   
   • Click Import, select Import from a publish profile file, click Browse
   • Find the *.PublishSettings file and click OK
   • Click Validate Connection
   • Click Publish

Add SignalR Stock Ticker Sample

1. In the Solution Explorer, right-click on your project, select Manage NuGet Packages
   • Select Online
   • On search box, type Microsoft.AspNet.SignalR.Sample
   • Click Install
   • On License Acceptance window, click I Accept
   • Click Close
2. In the Solution Explorer, right-click on your project, select Add, New Item
   • Select Web, OWIN Startup class
   • On Name, type "Startup.cs"
   • Click Add
3. On Startup.cs file, add this line of code inside method
   "public void Configuration(IAppBuilder app)"

   Microsoft.AspNet.SignalR.StockTicker.Startup.ConfigureSignalR(app);

4. On SignalR.Sample/SignalR.StockTicker.js file, add this line of code before "$.connection.hub.start()"

   $.connection.hub.logging = true;

         

5. In the Solution Explorer, right-click SignalR.Sample/StockTicker.html and select View in Browser
   
6. Click Open Market. You should see animations on the table.
   

Publish your local changes to Azure Web Site

1. Right click project, select Publish
   • Click Publish
2. On Browser, open http://[YourWebSite].azurewebsites.net/SignalR.Sample/StockTicker.html
3. Click F12 to open the Web Developer Console
4. Refresh page
5. Your browser does not connect using websockets. It connects with another transport like Server Sent Events, Forever Frame, or Long Polling.
   

Enable WebSocket on Azure Web Site

1. On Azure Portal, select Web Sites, select your Web Site, select Configure
2. Find Web Sockets and turn it on
   
3. Click Save
4. On Browser, open http://[YourWebSite].azurewebsites.net/SignalR.Sample/StockTicker.html
5. Click F12 to open the Web Developer Console
6. Refresh page
7. Your browser now connects using websockets!
    

Gustavo Armenta Valdez

Follow