Building Speedy Azure Applications with HTML5 and Web Sockets Today

Rick G. Garibay — Thu, 29 Mar 2012 07:15:00 GMT

I had the pleasure of presenting at Spring DevConnections today in Las Vegas and as promised, below are the samples for each of my demos.

To recap. WebSocket brings full-duplex, bi-directional TCP sockets to web, desktop and mobile applications, introducing an alternative to XHR and long-polling, particularly when latency is a primary focus. What makes WebSocket so significant to developers in addition to providing a direct, socket-based connection is that it is standardized by both the IETF Hybi working group and W3C which has brought wide industry support across both browser vendors implementing the client support and platform vendors providing support for building WebSocket servers.

Microsoft has been an early champion of the WebSocket protocol, sharing some early investments via HTML5 Interoperability Labs website and maintaining that investment with support for the WebSocket protocol announced at //Build 11 which introduced WebSocket support to Windows 8, Windows Server 8. .NET 4.5 and IE 10 Developer Preview based on the hybi-10 specification.

With the release of .NET 4.5 Beta 1, all of the above have been updated to RFC 6455, which is the latest specification and expected to be final.

Along with broad native support for WebSockets in modern browsers like Chrome, IE 10, Safari and FireFox, the standardization dust has settled making this the right time to jump in.

In my talk, we took a lap around the WebSocket support in .NET 4.5, highlighting the APIs that Microsoft has made available in the Microsoft.WebSocket namespace that ships as a package on NuGet. While you can go as deep as you want in the new System.Net.WebSockets namespace that forms the core of Microsoft’s investment in the protocol, the Microsoft.WebSocket package provides higher level abstractions for developing WebSocket solutions today with WCF using WebSocketService and ASP.NET using WebSocketHandler.

Since .NET 4.5 and Window 8/Server 8 have not yet been released, it is currently not possible to deploy your .NET 4.5 applications to Windows Azure. That said, while Windows Azure will certainly be updated to support these key technologies following RTM, Azure supports a variety of non-Microsoft programming languages and platforms including Node.js.

Demonstrating the latest Azure SDK for Node.js, we got a fully RFC 6455 complain WebSocket service up and running on Windows Azure in a worker role running Node.js and using the WebSocket.IO module to integrate with Twitter’s Streaming API which provides a one-way firehose for tapping into Twitter’s event stream which proved to be a great example of using these capabilities together while having a little fun with HTML 5 JQuery and CSS 3.

Demo	Summary	Artifacts
Demo 1	Live chat sample of Silverlight-based client and WCF Service running on Windows Azure. Please note that this implementation is deprecated and will not be carried forward. Instead, please use .NET 4.5 WebSocket support in WCF and ASP.NET.	http://html5labs.cloudapp.net/WebSockets/ChatDemo/wsdemo.html
Demo 2	Simple “Hello World” example of ASP.NET ASHX handler using WebSocketHandler and HTML 5 client demonstrating a trivial “echo” service that displays the date/time each second. Also included in the Demo 2 folder is a WCF version of the same implementation (which I did not demo during my talk).	http://sdrv.ms/HofK53 Projects: SimpleEventingSample SimpleEventingService Requires Visual Studio 11 Beta 1 & Windows 8/Windows 8 Server
Demo 3	Example of using the Twitter Search API as an event stream with WCF using WebSocketService, Linq to Twitter and HTML 5 with some nice JQuery and CSS animation.	http://sdrv.ms/HofK53 Projects: StatusStreamClient StatusStreamService StatusStreamServiceTests Requires Visual Studio 11 Beta 1 & Windows 8/Windows 8 Server
Demo 4	Another event streaming example, this time using the Twitter Streaming API, Node.js and WebSocket.IO in Windows Azure and HTML 5 animations with CSS 3 box shadow and rotate. As opposed to the Twitter Search API used in Demo 3, you can see that events are immediately captured and the Streaming API is much more reliable than the Search API.	http://sdrv.ms/H1DVru Use any text editor or your favorite JavaScript IDE.
Deck		http://sdrv.ms/Hf5oZB

Please feel free to play with any of the samples, extend them and make them your own.

Please remember that demos 2 and 3 require .NET 4.5 Consumer Preview and either Windows 8 or Windows 8 server.

Since the Microsoft.WebSockets NuGet package is the easiest way to get started with WebSocketHandler and WebSocketService, I’d recommend starting with Demo 2 and Demo 3.

For demo 4, you will need an Azure account which you can sign up for free (really, free) at http://azure.com

As we discussed during my talk, even though .NET 4.5 and Windows 8 are not yet RTM:

•Now is the time to dive into WebSockets in .NET 4.5!

•Consider how WebSockets can improve existing near real-time messaging scenarios.

•Start building WebSocket apps on Windows 8 and Windows Server 8 today.

•.NET 4.5 support in Windows Azure is coming soon. In the meantime, consider alternate frameworks like Node.js which is supported today!

Last but not least, here are the resources I provided on my last slide for easy access:

•Microsoft.Web.WebSockets NuGet Package: http://nuget.org/packages/Microsoft.WebSockets

•Paul Batum’s blog: http://www.paulbatum.com/2011/09/getting-started-with-websockets-in.html

•Damir Dobric’s blog on WCF WebSockets: http://developers.de/blogs/damir_dobric/archive/2011/11/26/wcf-duplex-via-websocket.aspx

•ASP.NET Documentation:

●http://msdn.microsoft.com/en-us/library/system.web.websockets%28v=vs.110%29.aspx

●http://msdn.microsoft.com/en-us/library/system.net.websockets%28v=vs.110%29.aspx

•WebSocket.IO: https://github.com/learnboost/websocket.io

•Nice CSS & JQuery scripts/samples: http://marcofolio.net

Last but not least, I’d like to thank @paulbatum, PM at Microsoft working on the WCF and ASP.NET WebSocket features for helping me grok WebSockets in .NET 4.5. His guidance and thought leadership around WebSocket are invaluable to the community, so if you run into Paul, thank him or better yet, buy him a beer.

Happy Messaging!

HMTL5 Web Camp Phoenix–The Goods

Rick G. Garibay — Fri, 30 Sep 2011 23:25:38 GMT

UPDATE: Michael Palermo has posted the video recordings of each session on his blog, including my session which I have also included below to the right. Enjoy!

I had the pleasure of presenting at HTML5 Web Camp Phoenix this morning.

The event was very well attended with over 165 developers and designers from the valley in attendance.

We had quite a line up with @stefsull delivering a fantastic keynote, followed by my talk on pragmatically adoption HTMl5. @jguadagno and @palermo4 discussed new CSS3 support and lastly, @danwahlin and @palermo4 closing us out with The New UX (audio, video, canvas…).

I shared my thoughts on the magnitude of HTML5 in my recent blog post and was fortunate to have the opportunity to share my insights with the community at large. To quickly recap my talk on Pragmatic HTML5, I shared the various techniques and best practices for determining new HTMl5 feature support, including techniques for checking for GeoLocation, Canvas, Video and Input types. I also showed how to enable Semantic Element support in non-modern browsers with HTML5Shiv.

I wrapped up with a discussion on Polyfills/shims, showcasing the new WCF WebSockets client library and server by running a local WebSocket server that hosted a bi-directional chat service and a couple HTML5 clients exchanging messages back and forth. The same WebSockets demo is available at HTML5 Labs with a sample showing the WCF WebSocket server hosted in Windows Azure and you can also grab the demo I showed by clicking the download link below.

Lastly, here are some essential resources I used in my presentation and demos:

It was a pleasure sharing in this great community event and I’d like to thank @palermo4 and Microsoft for inviting me to be a part of it.

Practical HTML5 Deck
Semantic Element and Modernizr Demos
WCF Web Socket Demo
NEW! Video Recording