![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/75/real-time-web-whats-that-for-20-2048.jpg?cb=1669181406)
![$('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/75/real-time-web-whats-that-for-40-2048.jpg?cb=1669181406)
![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/75/real-time-web-whats-that-for-42-2048.jpg?cb=1669181406)
Real Time Web - What's that for?
•6 likes•2,160 views
Report
Share
Download to read offline
More Related Content
What's hot
What's hot(20)
![[20180226] I understand webpacker perfectly](https://cdn.slidesharecdn.com/ss_thumbnails/20180226-iunderstandwebpackerperfectly-180508134133-thumbnail.jpg?width=768&fit=bounds)
![第一次用 Vue.js 就愛上 [改]](https://cdn.slidesharecdn.com/ss_thumbnails/vuejs-160518081021-thumbnail.jpg?width=768&fit=bounds)
Viewers also liked
Viewers also liked(12)
Similar to Real Time Web - What's that for?
Similar to Real Time Web - What's that for?(20)
Recently uploaded
Recently uploaded(20)
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
- 56. Questions ? http://pusherapp.com Get hooked!