For a long long time we have tried to be able to push information from the server out to the end users without having to poll the server all the time.

Background

My first memory of pushing out information to the end user was a feature in Internet Explorer 4 when you could subscribe to information and get it pushed out to you. If my memory serves me correctly, it wasn’t really seamless, but nevertheless, it was my first experience of it.

Therefore, in 2005 when the AJAX hype hit us all, and we got a cross-browser way to dynamically update portions of a web page, we kept on sending requests to server to check for new information since there was no way to push things from the server when it was necessary. This lead to a lot of superfluous HTTP requests, header information being sent and way too much server load.

Then some smart people came up with the Comet approach where you use long-lived HTTP connections to be able to send data to the web browser when you wanted to and try to capture that and take action on it.

Enter Web Sockets

What we have needed, though, is a native approach, both on the client- and server-side to be able to have bidirectional communication. This is where Web Sockets step into the picture and I am certain it will in the long run revolutionize web browser communication.

What is needed on the server side is to support two new URI schemes, which are ws and wss (unencrypted and encrypted connections).

Web Sockets with JavaScript in the web browser

From a client-side web developer perspective, working with Web Sockets couldn’t be easier. First, what you do is create a Web Socket object with a URL to where you want to establish a connection to:

	var ws = new WebSocket("ws://robertnyman.com/wsmagic");

From there on, you have a couple of useful methods:

	// Send data
	ws.send("Some data");
	
	// Close the connection
	ws.close();

And to complement that, there are a number of events:

	// When connection is opened?
	ws.onopen = function () {
		console.log("Connection opened!");
	};??
	
	// When you receive a message
	ws.onmessage = function (evt) {
		console.log(evt.data);
	};
	
	// When the connections is closed
	ws.onclose = function () {
		console.log("Connection closed");
	};
	
	// When an error occurred 
	ws.onerror = function () {
		console.log("An error occurred");
	};

And that’s all you need! The key things are of course the send method whenever you want to send some information to the server, and the onmessage event when something from the web server has been pushed out to the client.

A simple example can be seen in Remy Sharp’s Web Sockets demo.

Web browser support

Web Sockets are currently supported in:

• Google Chrome 5+
• Safari 5 (and in upcoming iOS 4.2)
• Firefox 4 (soon upcoming)
• Opera 11 (soon upcoming)

So far, there has been no word from Microsoft about Web Sockets and Internet Explorer 9, but gathered from talking to some people at Microsoft, my guess it’s not going to be in IE9.

Fallback options

However, as always, some smart people have worked on options that utilize Web Socket in web browser that support it and fall back to alternative technologies for web browsers lacking the necessary support:

• web-socket-js
• Socket.IO

Getting better communication on the web

I think that Web Sockets offer what AJAX really should have had from the beginning: a way to both send things to the server in a dynamic fashion, but, more importantly, a way for the server to push out information. Start playing out with it now! 🙂