Makoto




           RTW – WTF?
         Real Time Web – What’s That For?
         Makoto Inoue - Martyn Loughran
Who are we?
RTW
Exciting
The big guys already do it


  Google wave
  Facebook live feed
  Twitter
This is our story
Martyn

         Once upon a time...




                               November 2009
Visualise web traffic
    Rack           Sinatra Stats
 Existing app       Collector




                Fancy Visualization
Under the hood
Nginx HTTP_Push_Module
Long polling
Push handled by separate component
Worked, but fiddly to setup
Makoto
         WebSockets




         http://www.flickr.com/photos/lenaah/2939721384/




                               ...
WebSockets
HTML5 sub standard
Allows Socket in the browser
Now supported in the ‘non-shite’
browsers
 Chrome & Webkit (nig...
Ajax vs Comet vs WebSocket
                                         Server
Ajax
(Polling)
                                ...
Javascript API
Martyn
         Server Side




         http://www.flickr.com/photos/lenaah/2939721384/




                              ...
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)
Example: Drawing




  http://github.com/markevans/websocket_test
class Connection
          class << self
            def add(websocket)
              connections << websocket
           ...
EventMachine.run {
  EventMachine::WebSocket.start(:host => "0.0.0.0", :port => 3001) do |ws|
      ws.onopen {
        pu...
Demo
We wanted to add it
  to everything




    http://www.flickr.com/photos/10737604@N02/1673136876/

                        ...
Mandays
Work Schedule Management
TrueStory
Backlog Management
Problems
Data gets stale
People make conflicting changes
This discourages collaboration
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({     ...
Stateful client
http://github.com/benpickles/js-model
In memory object client side
Asynchronous persistence (e.g. to a
RES...
var sprint = new Sprint(
   {                          def create
     name: "My Sprint Name"     @sprint = Sprint.new(par...
Makoto
         Look Ma




                   March 2010
Task Management Board
Debugging
Booking
Wife Notifier
Summary




http://www.flickr.com/photos/blueju38/2767019065/
RTW
            (our take)
More than just chat
Another layer of progressive enhancement
Work well with other HTML5 features
Resources
    WebSockets
•   http://dev.w3.org/html5/websockets

•   http://tools.ietf.org/html/draft-hixie-thewebsocketpr...
One more thing...
Questions ?



http://pusherapp.com
    Get hooked!
Real Time Web - What's that for?
Real Time Web - What's that for?
Real Time Web - What's that for?
Real Time Web - What's that for?
Real Time Web - What's that for?
Real Time Web - What's that for?
Real Time Web - What's that for?
Real Time Web - What's that for?
Real Time Web - What's that for?
Real Time Web - What's that for?
Real Time Web - What's that for?
Real Time Web - What's that for?
Real Time Web - What's that for?
Upcoming SlideShare
Loading in …5
×

Real Time Web - What's that for?

5,833 views

Published on

Published in: Technology
1 Comment
6 Likes
Statistics
Notes
No Downloads
Views
Total views
5,833
On SlideShare
0
From Embeds
0
Number of Embeds
1,657
Actions
Shares
0
Downloads
72
Comments
1
Likes
6
Embeds 0
No embeds

No notes for slide

Real Time Web - What's that for?

  1. 1. Makoto RTW – WTF? Real Time Web – What’s That For? Makoto Inoue - Martyn Loughran
  2. 2. Who are we?
  3. 3. RTW Exciting
  4. 4. The big guys already do it Google wave Facebook live feed Twitter
  5. 5. This is our story Martyn Once upon a time... November 2009
  6. 6. Visualise web traffic Rack Sinatra Stats Existing app Collector Fancy Visualization
  7. 7. Under the hood Nginx HTTP_Push_Module Long polling Push handled by separate component Worked, but fiddly to setup
  8. 8. Makoto WebSockets http://www.flickr.com/photos/lenaah/2939721384/ December 2009
  9. 9. 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
  10. 10. Ajax vs Comet vs WebSocket Server Ajax (Polling) Client Server Comet (Long polling) Client Server WebSocket Client
  11. 11. Javascript API
  12. 12. Martyn Server Side http://www.flickr.com/photos/lenaah/2939721384/ December 2009
  13. 13. Fun problems Concurrent Stateful Low latency (sometimes)
  14. 14. Asynchronous servers Make all IO non-blocking Single thread Efficient CPU utilisation
  15. 15. Simple example
  16. 16. Other options em-websocket cramp sunshowers node.js (js)
  17. 17. Example: Drawing http://github.com/markevans/websocket_test
  18. 18. 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
  19. 19. 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 }
  20. 20. Demo
  21. 21. We wanted to add it to everything http://www.flickr.com/photos/10737604@N02/1673136876/ January 2010
  22. 22. Mandays Work Schedule Management
  23. 23. TrueStory Backlog Management
  24. 24. Problems Data gets stale People make conflicting changes This discourages collaboration
  25. 25. Requirements We didn’t want to re-write everything Reusable by many apps Really simple
  26. 26. Our solution
  27. 27. +
  28. 28. Look Ma http://www.flickr.com/photos/jeremystockwell/2691931146/ February 2010
  29. 29. Case Study Adding real time to TrueStory
  30. 30. Data Flow Inspired by JS events Trigger in on place Bind in another
  31. 31. $('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); })
  32. 32. 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
  33. 33. 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); })
  34. 34. Makoto Look Ma March 2010
  35. 35. Task Management Board
  36. 36. Debugging
  37. 37. Booking
  38. 38. Wife Notifier
  39. 39. Summary http://www.flickr.com/photos/blueju38/2767019065/
  40. 40. RTW (our take) More than just chat Another layer of progressive enhancement Work well with other HTML5 features
  41. 41. 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
  42. 42. One more thing...
  43. 43. Questions ? http://pusherapp.com Get hooked!

×