An example of real time collaborative web app using WebSockets and Knockout
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
public
.gitignore
Gemfile
README.textile
app.rb
config.ru
socket.rb

README.textile

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.