1. Makoto
RTW – WTF?
Real Time Web – What’s That For?
Makoto Inoue - Martyn Loughran

2. Who are we?

3. RTW
Exciting

5. The big guys already do it
Google wave
Facebook live feed
Twitter

6. This is our story
Martyn
Once upon a time...
November 2009

7. Visualise web traffic
Rack Sinatra Stats
Existing app Collector
Fancy Visualization

9. Under the hood
Nginx HTTP_Push_Module
Long polling
Push handled by separate component
Worked, but fiddly to setup

10. Makoto
WebSockets
http://www.flickr.com/photos/lenaah/2939721384/
December 2009

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

12. Ajax vs Comet vs WebSocket
Server
Ajax
(Polling)
Client
Server
Comet
(Long polling)
Client
Server
WebSocket
Client

13. Javascript API

14. Martyn
Server Side
http://www.flickr.com/photos/lenaah/2939721384/
December 2009

15. Fun problems
Concurrent
Stateful
Low latency (sometimes)

16. Asynchronous servers
Make all IO non-blocking
Single thread
Efficient CPU utilisation

17. Simple example

18. Other options
em-websocket
cramp
sunshowers
node.js (js)

19. Example: Drawing
http://github.com/markevans/websocket_test

20. 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
end
end
Keep connection objects in memory

21. 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
}

22. Demo

23. We wanted to add it
to everything
http://www.flickr.com/photos/10737604@N02/1673136876/
January 2010

24. Mandays
Work Schedule Management

25. TrueStory
Backlog Management

26. Problems
Data gets stale
People make conflicting changes
This discourages collaboration

27. Requirements
We didn’t want to re-write everything
Reusable by many apps
Really simple

28. Our solution

29. +

35. Look Ma
http://www.flickr.com/photos/jeremystockwell/2691931146/ February 2010

38. Case Study
Adding real time to TrueStory

39. Data Flow
Inspired by JS events
Trigger in on place
Bind in another

40. $('form#sprint').submit(function(){
var url = $(this).attr('action');
var data = $(this).serialize();
$.ajax({ def create
url: url, @sprint = Sprint.new(params)
data: data @sprint.save
});
}); Pusher['project-1'].trigger
('sprints-create', @sprint.attributes)
end
pusher.bind('sprints-create', function(attributes) {
addSprint(attributes);
})

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

42. var sprint = new Sprint(
{ def create
name: "My Sprint Name" @sprint = Sprint.new(params)
} @sprint.save
);
sprint.save(); Pusher['project-1'].trigger
('sprints-create', @sprint.attributes)
respond_to do |format|
format.js {
render :json => @sprint.to_json
}
end
end
pusher.bind('sprints-create', function(attributes) {
var sprint = new Sprint(attributes);
Sprint.add(sprint);
})

43. Makoto
Look Ma
March 2010

44. Task Management Board

46. Debugging

48. Booking

50. Wife Notifier

52. Summary
http://www.flickr.com/photos/blueju38/2767019065/

53. RTW
(our take)
More than just chat
Another layer of progressive enhancement
Work well with other HTML5 features

54. Resources
WebSockets
• 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

55. One more thing...

56. Questions ?
http://pusherapp.com
Get hooked!