HTML5 is here! Urray!

I was tired of hearing about one of the new innovation in HTML5: the WebSocket API.

After reading the excelent blog post about WebSockets and Ruby by Ilya Grigorik I got inspired by this experiment which is a simple example of a twitter-to-browser usage of websockets.

Since the excelent em-websocket was available on github, I decided to write my own “from twitter to the browser” real time updates, with no polling.

You can check the final result on my github repo.

General overview

Twitter Stream API → Filter → RabbitMQ → AMQP → Eventmachine → WebSocket → HTML5 Brwser

Too much buzzwords? Lets look at some code.

Filter

The filter is responsible for eating the Twitter Stream API and puting the tweets on a queue (RabbitMQ in my case) using AMQP:

Pretty easy right? Notice I am using a fanout exchange, which will allow me to broadcast the same message to all queues (clients) latter on.

Server

Now we just need to build a server that accepts websocket connections, and for each client deliver each message that arrives on the fanout exchange. The code will make this clear:

So simple, yet so awesome!

Client

The client just have to connect the websocket, and for each JSON piece that arrives on the socket, present them on the screen:

It seems we’ve ended writing almost more JS than Ruby :P Note that I’ve only tested this on Webkit nightly and latest Google Chrome beta for Mac.

Overall it was a great and easy experience building this simple system, but it allowed me to realize how simple we can build scalable push systems with the WebSocket API!

update: seems like Ilya Grigorik liked it :)