Your SlideShare is downloading. ×
0
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?
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?
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?
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?
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
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Real Time Web - What's that for?

5,282

Published on

Published in: Technology
1 Comment
6 Likes
Statistics
Notes
No Downloads
Views
Total Views
5,282
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
72
Comments
1
Likes
6
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×