Real Time Web - What's that for?
6 likes2,165 views
This document discusses real-time web technologies like WebSockets and how they can be used to build real-time applications. It describes how the authors built real-time features into existing applications like a task management board and debugging tools. It also provides an overview of common real-time web patterns and resources for working with technologies like WebSockets on both the client-side with JavaScript and server-side with Ruby.
![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](https://image.slidesharecdn.com/rtw-100327202722-phpapp01/85/Real-Time-Web-What-s-that-for-20-320.jpg)
![$('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);
})](https://image.slidesharecdn.com/rtw-100327202722-phpapp01/85/Real-Time-Web-What-s-that-for-40-320.jpg)
![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);
})](https://image.slidesharecdn.com/rtw-100327202722-phpapp01/85/Real-Time-Web-What-s-that-for-42-320.jpg)
Real Time Web - What's that for?
- 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
- 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
- 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
- 46. Debugging
- 48. Booking
- 50. Wife Notifier
- 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