Knockout WebSockets Example

This is a very simple application which show how easy it is to sync information between clients of a web app in real time. The Knockout javascript library allows us to maintain one model and render the UI using jQuery’s templating plugin, and any changes to the model are automatically reflected in the UI. And thanks to WebSockets can we update that model in realtime.

The client posts changes to a simple Sinatra app (which store it’s state in a simple SQLite database). The Sinatra apps then pushes notification of the change through the message queue Beanstalk":http://kr.github.com/beanstalkd/. The WebSocket server (EM-WebSocket) listens on the message queue (using EM-Jack) and simply forward the messages on the message queue to all it’s WebSockets subscribers. The client picks up the message and look what kind of change that was made and updates it’s model accordingly. This is realtime data collaboration, all this in a very few line of code.

Usage

Install and start Beanstalk

sudo apt-get install beanstalkd
beanstalk -d

Download the code

git clone git://github.com/carlhoerberg/knockout-websocket-example.git
cd knockout-websocket-example

Install the dependencies

bundle install

Start the Sinatra app

rackup

Start the WebSocket server

ruby socket.rb

Browse to http://localhost:9292/ in two different browser and start adding and modifing entries and see how they appear instantly in the other browser.