Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Real Time Web - What's that for?

5,943 views

Published on

Published in: Technology

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!

×