HTML5 Web Sockets will single handedly revolutionize web technologies as we know it. The purpose of this post is to explain what techniques have been used to simulate server push until now, define HTML5 web sockets, and then give an example of how to use it in your HTML5 application.

What is polling?

Until now, the web has been one directional. In other words, web pages could only send a request to a web server, and not the other way around. Once AJAX came along in 2005, web developers quickly adopted techniques to simulate a request from server to client known as polling. There are two types of polling, short polling and long polling.

Short polling is implemented by making a request to the web server every few seconds or so to see if data has changed. If it has, the web server will respond with the new data. Otherwise, it will respond with a blank message. The drawback to this technique, however, is both a surplus is server requests and an overhead in CPU usage on the web server to constantly check if an update to the data has been made.

Long polling is implemented by making a single request to the web server and keeping the connection open until the data has changed, at which point the web server sends back a response. The drawback to this technique, like short polling, is that the web server still has to check if the data has changed every few seconds or so, creating an overhead in CPU usage.

What’s an HTML5 web socket?

This is where HTML5 web sockets come in. HTML5 will be the first HTML specification to support client side web sockets. In other words, when data changes on the web server, the web server can send a request to client, eliminating the need for polling.

HTML5 web socket example

Step 1: Create a WebSocket with a valid URL

Create a new WebSocket connection to WebSocket server at finance.example.com.

var stockTickerWebSocket = new WebSocket(“ws://finance.example.com”);

Note that a ws:// and wss:// prefix indicate a WebSocket and a secure WebSocket connection respectively. The default port for WebSockets is 81 and the default port for secure WebSocket is 815.

Step 2: Attach JavaScript Callback Functions

Associate event listeners to handle each phase of the connection life cycle.

stockTickerWebSocket.onopen = function(evt) {

alert(“Stock Ticker Connection open…”);

};

stockTickerWebSocket.onmessage = function(evt) {

alert( “Received Ticker Update: ” + evt.data);

};

stockTickerWebSocket.onclose = function(evt) {

alert(“Connection closed.”);

};

Step 3: Send and Receive Data

To send a message to the server, simply call the postMessage method on the webocket with the content you wish to send to the server.

stockTickerWebSocket.postMessage(“BUY: GOOG,100@200.25″);

This will send the BUY message to the server. Any message coming from the server will be delivered to the onmessage callback registered in step #2.

Step 4: Disconnect When Done

When completed, call the disconnect() method to close the WebSocket connection.

stockTickerWebSocket.disconnect();

As demonstrated in the example above, there are no HTTP requests made to the server from the client side to retrieve data, instead the data was pushed to the client from the server – when it becomes available.

When a new WebSocket connection is established the browser opens an HTTP connection to the server first and then negotiates with the server to upgrade the connection to a dedicated and persistent WebSocket connection. This process automatically sets up a tunnel through to the server – passing through all network agents (proxies, routers, and firewalls) in the middle (very much like HTTPS establishing a secure, endtoend connection), solving numerous issues that the various Comet programming techniques encountered. Once established the WebSocket is a fullduplex channel between the client and the server.

Example provided by http://www.indicthreads.com