Embed Size (px)
DESCRIPTION
Citation preview
RTW – WTF?Real Time Web – What’s That For?Makoto Inoue - Martyn Loughran
Makoto
Who are we?
RTWExciting
The big guys already do it
Google wave
Facebook live feed
This is our story
Once upon a time...
Martyn
November 2009
Visualise web traffic
Rack
Existing app
Sinatra Stats Collector
Fancy Visualization
Nginx HTTP_Push_Module
Long polling
Push handled by separate component
Worked, but fiddly to setup
Under the hood
WebSockets
http://www.flickr.com/photos/lenaah/2939721384/
Makoto
December 2009
WebSockets
HTML5 sub standard
Allows Socket in the browser
Now supported in the ‘non-shite’ browsers
Chrome & Webkit (nightly)
There is a library for flash emulation
Ajax vs Comet vs WebSocket
Ajax(Polling)
Comet(Long polling)
WebSocket
Client
Server
Client
Client
Server
Server
Javascript API
Server Side
http://www.flickr.com/photos/lenaah/2939721384/
December 2009
Martyn
Fun problems
Concurrent
Stateful
Low latency (sometimes)
Asynchronous servers
Make all IO non-blocking
Single thread
Efficient CPU utilisation
Simple example
Other options
em-websocket
cramp
sunshowers
node.js (js)
http://github.com/markevans/websocket_test
Example: Drawing
class Connection class << self def add(websocket) connections << websocket end def all connections end def remove(websocket) connections.delete(websocket) end private def connections @connections ||= [] end endend
Keep connection objects in memory
EventMachine.run { EventMachine::WebSocket.start(:host => "0.0.0.0", :port => 3001) do |ws| ws.onopen { puts "WebSocket connection open" Connection.add(ws) }
ws.onclose { Connection.remove(ws) } ws.onmessage { |data| Connection.all.each do |ws| ws.send(data) unless ws == self end } end }
Demo
We wanted to add it to everything
http://www.flickr.com/photos/10737604@N02/1673136876/
January 2010
MandaysWork Schedule Management
TrueStoryBacklog Management
Data gets stale
People make conflicting changes
This discourages collaboration
Problems
Requirements
We didn’t want to re-write everything
Reusable by many apps
Really simple
Our solution
+
Look Ma
http://www.flickr.com/photos/jeremystockwell/2691931146/ February 2010
Case Study
Adding real time to TrueStory
Data Flow
Inspired by JS events
Trigger in on place
Bind in another
$('form#sprint').submit(function(){ var url = $(this).attr('action'); var data = $(this).serialize(); $.ajax({ url: url, data: data });});
def create @sprint = Sprint.new(params) @sprint.save
Pusher['project-1'].trigger('sprints-create', @sprint.attributes)end
pusher.bind('sprints-create', function(attributes) {addSprint(attributes);
})
Stateful client
http://github.com/benpickles/js-model
In memory object client side
Asynchronous persistence (e.g. to a REST API)
Used on TrueStory - let me show you
var sprint = new Sprint( { name: "My Sprint Name" });sprint.save();
def create @sprint = Sprint.new(params) @sprint.save
Pusher['project-1'].trigger('sprints-create', @sprint.attributes) respond_to do |format| format.js { render :json => @sprint.to_json } endend
pusher.bind('sprints-create', function(attributes) { var sprint = new Sprint(attributes); Sprint.add(sprint);})
Look MaMakoto
March 2010
Task Management Board
Debugging
Booking
Wife Notifier
http://www.flickr.com/photos/blueju38/2767019065/
Summary
RTW (our take)
More than just chat
Another layer of progressive enhancement
Work well with other HTML5 features
ResourcesWebSockets
• http://dev.w3.org/html5/websockets
• http://tools.ietf.org/html/draft-hixie-thewebsocketprotocol-75
• http://blog.new-bamboo.co.uk/2009/12/30/brain-dump-of-real-time-web-rtw-and-websocket
Javascript (Client side)• http://blog.new-bamboo.co.uk/2010/2/10/json-event-based-convention-websockets
• http://blog.new-bamboo.co.uk/2010/3/7/the-js-model-layer
Ruby (Server side)• http://github.com/igrigorik/em-websocket
• http://github.com/lifo/cramp
• http://rainbows.rubyforge.org/sunshowers
One more thing...
http://pusherapp.com
Questions ?
Get hooked!
