Gotcha when installing Windows Azure SDK for Node.js

I’m pretty excited about the Windows Azure SDK for Node.js which landed this week. However there is one thing to be aware of when installing this SDK if you also do Azure development in Visual Studio. Essentially the problem is that the installer does not update the Visual Studio tools for Azure, and you can end up with bits on your machine that are out of sync. Here’s an example of what can happen:

You have a Visual Studio solution with a web application project and you right click and choose “Add Windows Azure Deployment Project”:

Visual studio gives you this generic error:

Windows Azure Tools for Microsoft Visual Studio

The command could not be completed: Exception has been thrown by the target of an invocation.

You might end up with a deployment project anyway, but if you try to package it you get this error:

WAT080: Failed to locate the Windows Azure SDK. Please make sure the Windows Azure SDK v1.5 is installed.

Fortunately, the resolution for this is very simple. You just need to download the newest version of the Azure SDK for .NET (at time of writing this is the November 2011 version):

This will get all your bits in sync, and you can then deploy both .NET and Node.js apps to Azure without issues.

Getting to know System.Net.WebSockets: A simple ASP.NET echo server

The WebSockets offering for .NET 4.5 consists of several APIs that vary in granularity and purpose. The new System.Net.WebSockets namespace contains a set of types that are used regardless of whether you are hosting your WebSocket server in ASP.NET or if you are using the low level HttpListener class (WCF uses HttpListener when it needs to handle HTTP traffic in self-hosted mode). The goal of this set of types is to define a shared low-level WebSockets API that ASP.NET, WCF and .NET developers can build on top of.

System.Net.WebSockets is not to be confused with the new WinRT WebSocket APIs found in Windows.Networking.Sockets. The WinRT APIs provide client functionality only while the the System.Net.WebSockets types are designed for server side use.

The easiest way to get to know this new API is to look at a simple example. I’ve implemented a very basic WebSocket echo server in ASP.NET that demonstrates how to accept a WebSocket connection in ASP.NET, obtain an instance of System.Net.WebSockets.WebSocket and then begin send and receive operations using the methods on this type. Keep in mind that we do not expect most developers to use these low level APIs for every day applications – this is what our Microsoft.WebSockets NuGet package is for. Future posts will cover this package in more detail.

I’ve annotated the source code for this echo server and made it available in HTML format. Please check it out! Do you like samples presented in this style? Let me know in the comments.

If you want to download and run this example, it’s called AspNetWebSocketEcho and is part of my WebSocket Samples project on github. You will need to use the Windows 8 developer preview if you want to try this stuff out. See my earlier post for instructions on how to set up your development environment.

Getting started with WebSockets in Windows 8

Update: Originally this post was written for the Windows 8 Developer Preview but most of the material is applicable for the Consumer Preview as well. My WebSocket samples project has been updated to be compatible with the Windows 8 Consumer Preview, so use this instead of the BUILD 2011 samples.

Last week I spoke at the BUILD conference about WebSockets. If you don’t have time to watch the talk, let me try to get you up to speed. The Windows 8 developer preview includes WebSockets support for:

• IE 10
• The new Windows Runtime
• IIS 8.0
• .NET 4.5
  • ASP.NET
  • WCF
  • HttpListener

During the talk Stefan and I did some demos with ASP.NET and WCF. The purpose of this post is to provide links to the source code for these demos and help you get them up and running in the Windows 8 developer preview.

The source code for these demos is now up on github:

https://github.com/paulbatum/BUILD-2011-WebSocket-Chat-Samples (note: this sample has not been updated for the Windows 8 Consumer Preview)
https://github.com/paulbatum/PushFrenzy

(If you’re not familiar with git and just want to download the source in a zip, just click the Downloads button on the github pages.)

Setting up the environment

Lets start from the beginning by grabbing a developer preview machine. For this tutorial I’ll be using the Windows Server developer preview which is available on MSDN for subscribers:

Operating Systems –> Windows Server Developer Preview –>

I’m using the server SKU because IIS is limited to 10 connections in the client SKU. However if you are not an MSDN subscriber you can still follow along by downloading the developer preview with developer tools at the Windows dev center. If you do this you can skip this next step where I install Visual Studio.

Update: The version of Visual Studio that comes pre-installed with the Windows developer preview is an express SKU and will not run these demos. Follow the instructions below to make sure you install the full version of the Visual Studio 11 developer preview.

Once the Windows 8 is up and running in Hyper-V I run the Visual Studio 11 developer preview installer. There are two ways to do this. Option one is to use the ISO that is available to MSDN subscribers:

Developer Tools –> Visual Studio 11 Developer Preview –>

Option two: Use the public installer available here:
http://www.microsoft.com/download/en/details.aspx?displaylang=en&id=27543

After installing Visual Studio I enable IIS, the WebSocket module and HTTP activation for WCF to allow WCF to accept WebSockets connections. I add the Web Server role:

I enable ASP.NET 4.5 and HTTP Activation:

And I enable WebSockets for IIS:

The user interface will be different if you are doing this on the client SKU but the options you need to select are basically the same. Let me know in the comments if you are having difficulty.

If you are on the server SKU you’ll want to disable IE Enhanced Security Configuration (its on by default):

I’ll be using NuGet so I’ll install that too, using the Extension Manager in Visual Studio:

Opening and compiling the code

The good news is that after doing all that setup work, getting the sample apps up and running should be a piece of cake. One thing to be aware of is that WebSockets won’t run in IIS express at the moment. We’ll be using IIS 8.0, so you are going to be best off with running Visual Studio as an administrator.

The simplest sample would be the BasicAspNetChat sample. Open BasicAspNetChat.csproj in Visual Studio:

Update: IIS express might be on by default and if so this will cause problems. Right click on the project, select properties and go to the Web tab. You then need to untick “Use IIS Express” and save your changes:

If you’re running VS as an administrator your virtual directory should already be created and all you have to do is hit F5. IE 10 should load up and you’ll be prompted to enter a name:

Click the ‘Join chat’ button. This will establish the WebSocket connection. You can then chat with yourself by typing a message into the textbox and clicking ‘Broadcast Message’:

If you want to try out browser interoperability, download Google Chrome and give it a go. At time of writing, the stable build of Chrome is version 14, and this supports the same version of WebSockets as the Windows 8 developer preview. Just open up Chrome and browse to the same page and follow the same steps:

Curious about what is going on under the hood? Lets hit F12 in Chrome and then rejoin the chat:

Expand the headers on this and you can see the WebSocket handshake in action:

You should find the SignalRChat sample is easy to open and run. This sample is taking advantage of SignalR, which is an awesome open source project from my coworkers Damian Edwards and David Fowler. SignalR is basically Socket.IO for ASP.NET – it abstracts the underlying communication mechanism (long polling, websockets, etc) and it lets you do RPC style programming from JavaScript. The SignalR sample works the same as the basic chat sample described above, but the implementation makes use of SignalR rather than WebSockets directly.

The last sample I’ll mention today is my little game, Push Frenzy. When you open and run the project (make sure PushFrenzy.Web is the startup project), you should get this screen in IE 10:

To just test that it works, go ahead and enter your name, pick Solitaire mode and then click Play. You should see the game load up (it might take a few seconds on first run):

Just refresh the page to join a new game. Open two windows/tabs and have them both join a two player game. You should see that each player’s moves are instantly communicated to each other thanks to the power of WebSockets!

That’s it for today. Please let me know in the comments if you had any problems following these instructions. In future posts I’ll be diving into the APIs and looking at coding with WebSockets in more detail!

WebSockets @ Portland Code Camp 2011

Today I spoke at Portland Code Camp 2011 about WebSockets.

The code for the “perfmon in your browser” demo I wrote during the session is here:
https://github.com/paulbatum/WebSocketSmoothieDemo

I based my session around the HTML5 Labs WebSockets prototype which is here:
http://html5labs.interoperabilitybridges.com/prototypes/websockets/websockets/info

You will need to install the MSI available at the above link and then reference the dll’s that it installs as I do not have permission to redistribute the dll’s myself.

I used a particular Aurora build of Firefox that supports version 07 of the WebSocket protocol:
http://www.ducksong.com/misc/websockets-builds/ws-07/5.0.a2.04/

Thankfully I was able to fix all of my mistakes quite quickly so I did not have to use the 1.8 release of Firebug that I typically debug with in Aurora:
http://getfirebug.com/releases/firebug/1.8/

I used several NuGet packages (jQuery, JsonValue, json2).

I used Smoothie to do the canvas graph (if you grab the version included with my code you are getting my modified version):
http://smoothiecharts.org/

If you have any questions or feedback on the talk drop me a line on email, twitter, or leave a comment here on my blog.

Thanks for your interest in WebSockets!

WebSockets MIX 11 Demo

Update: HTML5 labs has released a new version of the prototype based on version 07 of the WebSocket protocol. I've updated my demo to use this version, and I've tested successfully against a nightly build of firefox that also supports 07 (see link below).

I've had some requests for the source code for the tiny WebSockets demo I did at MIX. I’ve put the code up on github: https://github.com/paulbatum/WebSockets-MIX11-Demo

(You don’t need to use git to grab this, just click the download link.)

I don’t have a license to redistribute the two binaries that I reference: Microsoft.ServiceModel.Tcp.dll Microsoft.ServiceModel.WebSockets.dll

But these are included in the HTML5 Labs WebSocket prototype, which is here: http://html5labs.interoperabilitybridges.com/html5labs/prototypes/websockets/websockets/download/

Once the install is complete, you'll have the prototype bits at: C:\Program Files (x86)\Microsoft SDKs\WCF WebSockets or C:\Program Files\Microsoft SDKs\WCF WebSockets if you are on a 32-bit OS.

If you are going to use the Silverlight plugin to simulate WebSockets, you'll need to drop the clientaccesspolicy.xml file (found in the bin folder) into your c:\inetpub\wwwroot folder.

If you want to use the private build of Firefox with support for 07 WebSockets, you can get this here: http://www.ducksong.com/misc/websockets-builds/ws-07/

Finally, you can follow along with the MIX video: http://channel9.msdn.com/events/MIX/MIX11/HTM10

My MIX video is up

My talk is here. It went reasonably smoothly - to be honest I'm just glad that the demo worked fine and I didn't manage to say anything insanely stupid.

There's lots of interesting talks online now, with more to come. Check em out:

http://live.visitmix.com/mix11

MIX 2011

I’m speaking at MIX this year! Craig Kitterman and I will be talking about WebSockets and taking a look at the prototype available on HTML5 Labs. If you are interested in WebSockets and prefer to develop on Windows, I definitely recommend you check out the prototype. It is WCF based but trust me you don’t have to write a line of XML, and its very simple to get a WebSocket server up and running.

MIX sessions are recorded so if you can’t make it to MIX don’t worry, all my stuff-ups will be caught on video and preserved for your amusement. I’ll post an update when the video is online.