HTML5 Web Sockets Experiment
Posted by Matt Seward, 21 March 2011
We have been getting a bit giddy about HTML5 Web Sockets. If you didn't know, HTML5 Web Sockets allow browsers to establish an "always on" (full-duplex) connection to a web server, which is a big deal for anyone using or creating real-time data, event-driven applications.
Until now, if we wanted to update a screen with some new information, without requiring our users to click somewhere to trigger a full page reload, we had to use Javascript to communicate with the server in the background (AJAX). This simply creates content requests on behalf of the user which still involves waiting for the niceties of an http transaction to be performed.
The always-on, nature of HTML5 Web Sockets makes for a better (faster) User Experience (UX), creates all sorts of possibilities for some really nice User Interface (UI) elements and it also reduces network load.
We agree with the industry commentators who reckon that this is a big deal. Even though at this moment in time HTML5 Web Sockets is not perfectly implemented across all modern browsers we wanted to play around a bit to see what we could do with it, so we came up with the Twitter Happiness Meter.
The Twitter Happiness Meter
A moving gauge displaying the collective happiness of Tweets in real-time.

How Happy Is Twitter? (Currently requires a Webkit browser, Chrome or Safari).
The Twitter Streaming API allows us to obtain public tweets in near-realtime, based on criteria that we define. In our case we are filtering status messages to only obtain those containing emoticons, e.g. :) :( :D ;) :-)
Using Node.js we can create a simple TCP Server which listens on a specified port for the stream of tweets. We then perform some very simple post-processing of the data received in order to generate a 'happiness' rating which we can then use with The Google Visualization API to display the Gauge.
Observations
- The filtering we are doing is very very lo-fi, plus there exists more positive emoticons than negative which will effect the results. We'd like to process the data in ways that can produce a more meaningful assessment of 'mood'. We haven't even began to look at this but if anyone could point us to some useful resources we'd appreciate it.
- Overall the Gauge hovers around the 'fine' (50%) mark, which is to be expected as overall the good and bad should even each other out. This renders this particular visualization fairly dull.
- We wanted to experiment with other sources of large amounts of data (replacing the Twitter data) but struggled to find good sources of streaming data. Please comment below if you can suggest any.
Finally we'd be really interested in any ideas you might have for projects, gadgets, user interface elements that could really benefit from being hooked up to real-time data sources.
Further Reading
HTML5 Web Sockets: A Quantum Leap in Scalability for the Web
http://soa.sys-con.com/node/1315473
Node.js
http://nodejs.org
Twitter Streaming API
http://dev.twitter.com/pages/streaming_api
Google Visualization API
http://code.google.com/apis/visualiza...
The Gauge can be found in the gallery
http://code.google.com/apis/visualiza...
- Tags Design, Technology, Programming
- 2 comments