github.com/carlhoerberg/knockout-websocket-example

h1. 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":http://knockoutjs.com 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":http://github.com/igrigorik/em-websocket) listens on the message queue (using "EM-Jack":http://github.com/dj2/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.

h2. Usage

Install and start "Beanstalk":http://kr.github.com/beanstalkd/

bc. sudo apt-get install beanstalkd beanstalk -d

Download the code

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

Install the dependencies

bc. bundle install

Start the Sinatra app

bc. rackup

Start the WebSocket server

bc. 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.