HTML 5 Web Sockets

HTML 5 WebSockets

The HTML 5 specification introduces the Web Socket interface, which defines a full-duplex communications channel that operates over a single socket and is exposed via a JavaScript interface in HTML 5 compliant browsers.

Unlike Comet and Ajax, Web Socket is native to the browser, and only requires a single connection to maintain both upstream and downstream data to and from the browser. Note, that to support streaming over HTTP, Comet requires a long-lived connection, which is often severed by proxies and firewalls. In addition, few Comet solutions support streaming over HTTP, employing a low performance technique called "long-polling" instead.

By moving to a single, streaming channel of communications, we can overcome the inadequacies of techniques such as long-polling and "forever frames," and as a result further reduce latency.

[Constructor(in DOMString url)]
interface WebSocket {
readonly attribute DOMString URL;
// ready state
const unsigned short CONNECTING = 0;
const unsigned short OPEN = 1;
const unsigned short CLOSED = 2;
readonly attribute int readyState;
// networking
attribute EventListener onopen;
attribute EventListener onmessage;
attribute EventListener onclosed;
void postMessage(in DOMString data);
void disconnect();
};

To connect to an end-point, just create a new Web Socket instance, providing the new object with a URL that represents the end-point to which you wish to connect (See listing 2). Note that a ws:// and wss:// prefix indicate a Web Socket and a secure Web Socket connection, respectively. A Web Socket connection is established by upgrading from the HTTP protocol to the Web Socket protocol during the initial handshake between the client and the server, over the same underlying TCP/IP connection. Once established, Web Socket data frames can be sent back and forth between the client and the server in full-duplex mode. The connection itself is exposed via the onMessage and postMessage methods defined by the Web Socket interface.

var myWebSocket = new WebSocket("ws://www.websocket.org");

Before connecting to an end-point and sending a message, you can associate a series of event listeners to handle each phase of the connection life-cycle.

myWebSocket.onopen = function(evt) { alert("Connection open ..."); };
myWebSocket.onmessage = function(evt) { alert( "Received Message: " + evt.data); };
myWebSocket.onclose = function(evt) { alert("Connection closed."); };

To send a message to the server, simply call postMessage and provide the content you wish to deliver. After sending the message, call disconnect to terminate the connection.

myWebSocket.postMessage("Hello Web Socket! Goodbye Comet!");
myWebSocket.disconnect();

Firewalls and Proxies? No Problem

One of the more unique features Web Socket provides is its ability to traverse firewalls and proxies, a problem area for many Comet-enabled applications. Comet-style applications typically employ long-polling as a rudimentary line of defense against firewalls and proxies. The technique is effective, but is not well suited for applications that have sub-500 millisecond latency or high throughput requirements. Plugin-based technologies such as Adobe Flash, also provide some level of socket support, but have long been burdened with the very proxy and firewall traversal problems that Web Sockets now resolve.

A Web Socket detects the presence of a proxy server and automatically sets up a tunnel to pass through the proxy. The tunnel is established by issuing an HTTP CONNECT statement to the proxy server, which requests for the proxy server to open a TCP/IP connection to a specific host and port. Once the tunnel is set up, communication can flow unimpeded through the proxy. Since HTTP/S works in a similar fashion, secure Web Sockets over SSL can leverage the same HTTP CONNECT technique.

Any RIA, Any Time

In addition, the Web Socket protocol can be used to support a diverse set of clients (e.g. JavaScript, Adobe Flex, JavaFX, Microsoft Silverlight, etc.). However, the HTML 5 specification only defines support for JavaScript, which is limited to text-based protocols. To serve other client-types and support binary protocols you will need to look to vendor offerings.