https://github.com/carlhoerberg/knockout-websocket-example

An example of real time collaborative web app using WebSockets and Knockout
https://github.com/carlhoerberg/knockout-websocket-example

Last synced: 3 months ago
JSON representation

An example of real time collaborative web app using WebSockets and Knockout

• Host: GitHub
• URL: https://github.com/carlhoerberg/knockout-websocket-example
• Owner: carlhoerberg
• Created: 2010-10-15T08:55:32.000Z (over 14 years ago)
• Default Branch: master
• Last Pushed: 2010-10-20T19:17:17.000Z (over 14 years ago)
• Last Synced: 2024-10-25T02:06:35.281Z (3 months ago)
• Language: JavaScript
• Homepage: http://carlhoerberg.com/twitter-beanstalk-eventmachine-websocket
• Size: 680 KB
• Stars: 89
• Watchers: 8
• Forks: 11
• Open Issues: 0
• Metadata Files:
  • Readme: README.textile

Awesome Lists containing this project

• awesome-knockout - WebSockets - Example of real time collaborative web app using WebSockets and Knockout (Examples)

README

        
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.