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.
Install and start Beanstalk
sudo apt-get install beanstalkd
beanstalk -dDownload the code
git clone git://github.com/carlhoerberg/knockout-websocket-example.git
cd knockout-websocket-exampleInstall the dependencies
bundle installStart the Sinatra app
rackupStart the WebSocket server
ruby socket.rbBrowse to http://localhost:9292/ in two different browser and start adding and modifing entries and see how they appear instantly in the other browser.