Azure Web Site now supports WebSockets

Azure Web Site now supports WebSockets

Rate This
  • Comments 1

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
    image
  3. Go to Dashboard of your new website, click Download the publish profile, and save *.PublishSettings file on your local hard drive
    clip_image001

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
    image
    • 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.          
  6. In the Solution Explorer, right-click SignalR.Sample/StockTicker.html and select View in Browser
    image
  7. Click Open Market. You should see animations on the table.
    clip_image002

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.
    clip_image003

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
    clip_image004
  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!
    clip_image005 
  • It's a shame that it takes Windows 8 or WIndows Server 2012 to get websocket support in SignalR... shocking really!

Page 1 of 1 (1 items)