Phil Leggetter

Phil Leggetter is a Developer Evangelist at Pusher and has been working with realtime web technologies for over 10 years. Phil has a passion for these technologies and the engaging realtime user experiences that they can help deliver. He's also a strong believer in great customer service and the Thank You Economy.

It's never been a better time to be a web developer. There are so many exciting emerging technologies that it can sometimes be difficult to know where to start. Those of us who use Microsoft technologies will be used to this. With a lot of Microsoft developers moving to native web browser development, HTML5 and JavaScript, I thought it would be useful to highlight the web technology that I'm most excited about because they make building truly engaging and interactive web applications much easier: WebSockets.

A number of techniques came before WebSockets which offer web server to web client (web browser) push and simulated bi-directional communication. But WebSockets are the first standardised cross platform true bi-directional solution. This standard has been adopted by Mozilla in Firefox, Google in Chrome, Apple in Safari, Opera in the Opera Browser and now Microsoft in IE10. WebSockets aren't restricted to browsers and JavaScript and there are also client libraries available for ActionScript, .NET, Silverlight, Objective-C, Java, Ruby and C++ to name but a few. But it's great to see HTML5 and JavaScript leading the way with this technology.

A WebSocket connection (a TCP socket connection over the Web) starts its life as a HTTP connection that is then upgraded to a WebSocket one as part of the client/server handshake. Once this connection has been established data can instantly be sent from client to server and server to client. WebSocket server implementations and the APIs they provide can vary but the WebSocket client API has been defined in a specification document and WebSocket client libraries in all languages tend to follow this specification whilst maintaining language conventions.

The following example shows a connection being established in JavaScript, a message being received, a response to that message being sent from the client to the server and the WebSocket then being closed.

var ws = new WebSocket("ws://");
ws.onopen = function() {
  // connection established

ws.onmessage = function(data) {
  ws.send("Yep, got that.");

ws.onclose = function(evt) {};
ws.onerror = function() {};

Note: the WS:// scheme represents an unsecured connection and the WSS:// one for secured.

One of the first questions people ask when looking at WebSockets is about browser support. We've already seen that all the major browser vendors are adding native support. But, as we all know, some users won't have the latest versions of these browsers and either don't want to or cannot easily upgrade. The most commonly used solution to this problem is to use the websocket-js library which checks to see if the browser supports WebSockets and if it doesn't loads a Flash object which provides the API and WebSocket connection mechanism. This is frequently referred to as 'Flash fallback' and this would also be possible using Silverlight. This technique is known as a polyfill, a practice that is becoming ever popular and helpful, and thanks to the WebSocket polyfil the majority of web browsers can use WebSockets now. Here's a very basic example of a Polyfill:

if(window.WebSocket === undefined) {
  // load fallback polyfill tecnology.
  // add a reference to the Polyfill object
  // which implements the WebSocket interface
  window.WebSocket = PolyfillWebSocket;

If installing a WebSocket server and dealing with browser fallback doesn't interest you then there are services available, such as Pusher (who I work for), that make getting started really simple.

Now that we understand what a WebSocket is and how we can use it, I should now address the most important question; why should you use WebSockets? (and unfortunately "they're cool!" doesn't tend to cut it when trying to explain the business benefits to your boss).

As already mentioned 'Realtime Push' functionality has actually been around for a while; over 10 years in fact. It has mainly been used in the financial sector for delivering pricing for the stock market, news notifications and as a key component of web trading applications. The requirement in this sector hasn't changed and WebSockets will now become a fundamental part of such applications.

Outside of finance we now have a vast amount of instantly available rich information from sources like Twitter, Facebook, the WordPress Firehose and Digg which we can now integrate into our applications and deliver that content instantly to our users. We have an increasing demand from users that the information presented to them in their application must be instantly up to date, and if new information is available they must be alerted about it and that information must be pushed to them. Users no longer want to have to refresh the web page to see if new information is available. This level of user experience has been set by Rich Internet Applications and our applications must strive to also achieve.

But a more fundamental shift has occurred with the introduction of sites and services such as Facebook and Twitter. There is now an expectation from users which can only be accomplished through interaction and collaborative experiences with other users. And this is what WebSockets can help us deliver. WebSockets make it much easier for us to integrate not only realtime push, in the form of news, activity streams and notifications, but also collaborative and interactive experiences such as chat, live-blogging and commenting, synchronised TV and mobile computing experiences and games which significantly increase user engagement and add a stickiness to web applications that was previously very difficult to achieve.