AKA: The Death Of Polling

Imagine for a moment if you will, a scenario where you have a page on a website that you’d like to update on a regular basis with new content as it becomes available. How would you go about implementing that? Until just recently, you didn’t have a lot of options. You could spin up some Javascript that would do a little setTimeout() magic with some ajax voodoo to call a webservice to get some new data if it’s there. That’s pretty standard, and at least you’re not refreshing the entire page (think meta refresh), right? But, you’re making a lot of consistent, unnecessary calls that may or may not ultimately provide anything valuable. That’s a lot of extra server and network overhead for nothing.

There’s got to be a better way! Enter HTML5!

Part of the HTML5 spec has support for a new technology called websockets.  Just what are websockets?  A websocket is basically a TCP connection for the web, enabling the browser to hold open a connection to a server, and to send and receive messages through that pipe.  What does that mean for us though?

Instead of our setTimeout()/Ajax/webservice cycle, we can simply open a websocket, and wait for our data to show up for us.

Pretending that you’ve installed the Websockets prototype from Microsoft’s HTML5 Labs http://html5labs.interoperabilitybridges.com/prototypes/available-for-download/websockets/html5protos_Download, we can do something like this for a simple echo server:

namespace WebsocketSample {
    using System.ServiceModel;

    public class EchoSvc : WebSocketsService {
        public override void OnMessage(string message) {
            this.SendMessage(message);
        }
    }
}

Pretty trivial there.  Now, how can we use it?

Sprinkle a little markup about, like this:

<input id="input" type="text" /><input id="send" type="button" value="Send" />
<input id="output" type="text" />

And a little Javascript/jQuery action, like so:

var connection = new Websockets("ws://uri/to/EchoSvc");

connection.onopen = function () {
    $('#send').click(function() {
        connection.send($('#input').val());
    });
};

// Log messages from the server
connection.onmessage = function (e) {
    $('#output').val(e.data);
};

And now you have a persistent TCP connection directly from your browser to the server, skipping all of the overhead of the constant polling loop, and multiple server requests.  Muy bueno!