Building realtimewebslide

  • 3,034 views
Uploaded on

The real time web is not about adding chat on your website. It's not really about having stock tickers. The most interesting aspect of the realtime web is to be found in augmenting the web that we …

The real time web is not about adding chat on your website. It's not really about having stock tickers. The most interesting aspect of the realtime web is to be found in augmenting the web that we already know. We can add realtime functionally to our applications as another layer of fidelity.
This is our story (New Bamboo, London, UK) of experimenting various real time web technologies and coming up with our own solutions (http://www.pusherapp.com). This is not about explaining how to use our solutions, but about sharing exciting opportunities and new technical challenges HTML5 WebSocket brings when you build real time web.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,034
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
30
Comments
0
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. Friday, 27 August 2010
  • 2. Friday, 27 August 2010
  • 3. Friday, 27 August 2010
  • 4. Friday, 27 August 2010
  • 5. Friday, 27 August 2010
  • 6. Friday, 27 August 2010
  • 7. Friday, 27 August 2010
  • 8. rows = database.fetch(category = 'news') template = read_file('homepage.html') json = fetc_url('http://.../') database.fetch(category = 'news', callback) read_file('homepage.html', callback) fetc_url('http://.../', callback) Friday, 27 August 2010
  • 9. Friday, 27 August 2010
  • 10. Benefits 1. Less overhead 1. Not releasing connection = good to share state within a session Friday, 27 August 2010
  • 11. Friday, 27 August 2010
  • 12. Friday, 27 August 2010
  • 13. var ws = new WebSocket("ws://example.com/service"); ws.onopen = function() { ws.send("message to send"); }; ws.onmessage = function (evt) { var received_msg = evt.data; }; ws.onclose = function() {}; Friday, 27 August 2010
  • 14. var httpServer = http.createServer(serveFile); var server = ws.createServer({}, httpServer); server.addListener("connection", function(conn){ conn.send(conn.id, "Connected as: "+conn.id); conn.addListener("message", function(message){ conn.broadcast(message); }); }); server.addListener("close", function(conn){ conn.broadcast("<"+conn.id+"> disconnected"); }); server.listen(8000); http://github.com/miksago/node-websocket-ser ver/blob/master/examples/echo-ser ver.js node-websocket-ser ver = Micheil Smith Friday, 27 August 2010
  • 15. http://blog.new-bamboo.co.uk/2009/12/14/pushing-the-boundary-of-real-time-web-with-t witter-and-xfactor Friday, 27 August 2010
  • 16. By Hiroshi Ichikawa Remy Sharp just made iPhone PhoneGap version for 75 (remy) Friday, 27 August 2010
  • 17. Matz and Ryan Dahli Friday, 27 August 2010
  • 18. Matz and Ryan Dahli Friday, 27 August 2010
  • 19. require 'em-websocket' EventMachine::WebSocket.start(:host => "0.0.0.0", :port => 8080) do |ws| ws.onopen { ws.send "Hello Client!"} ws.onmessage { |msg| ws.send "Pong: #{msg}" } ws.onclose { puts "WebSocket closed" } end em-websocket = Illya Grigorik Friday, 27 August 2010
  • 20. rev-websocket = sadayuki furuhashi cramp = Pratik Naik rainbows - sunshowers = Eric Wong em-websocket-proxy = Matt Colyer web-socket-ruby = Hiroshi Ichikawa Friday, 27 August 2010
  • 21. (Alex MacCaw’s fork has 76 support for Cramp) Friday, 27 August 2010
  • 22. http://bit.ly/9tKdeK http://github.com/makoto/wsbench This is example of using 2 small size ec2 instance, making 5000 ~ 20000 number of connections , send 1 message to distribute to all connections, and majored the average of how long it took to be delivered to each connection (DRAFT 75 ONLY) Friday, 27 August 2010
  • 23. Friday, 27 August 2010
  • 24. Friday, 27 August 2010
  • 25. Friday, 27 August 2010
  • 26. Friday, 27 August 2010
  • 27. http://eiga.com/movie/44107/goods/t142030853/ Friday, 27 August 2010
  • 28. Friday, 27 August 2010
  • 29. Friday, 27 August 2010
  • 30. Friday, 27 August 2010
  • 31. Friday, 27 August 2010
  • 32. IMPORTANT : You can synchronise data from client to ser ver by saving before hitting Pusher Friday, 27 August 2010
  • 33. Friday, 27 August 2010
  • 34. Friday, 27 August 2010
  • 35. http://screenr.com/NJ0 Friday, 27 August 2010
  • 36. Friday, 27 August 2010
  • 37. server = new Pusher(Pusher.key, Pusher.channel); server.bind('note-create', function(note) { generateNote(note); }); post '/notes.json' do content_type 'text/json', :charset => 'utf-8' n = Note.new(params[:note]) n.save Pusher[CHANNEL].trigger('note-create', n.to_json) end We enhanced WebSocket by adding channel and event Friday, 27 August 2010
  • 38. http://www.flickr.com/photos/amy_ng/1692424006/sizes/m/ Friday, 27 August 2010
  • 39. Friday, 27 August 2010
  • 40. Friday, 27 August 2010
  • 41. Friday, 27 August 2010
  • 42. Friday, 27 August 2010
  • 43. Friday, 27 August 2010
  • 44. Friday, 27 August 2010
  • 45. http://screenr.com/B5O Friday, 27 August 2010
  • 46. Friday, 27 August 2010
  • 47. class PusherController < ApplicationController def auth response = Pusher[params[:channel_name]].authenticate(params[:socket_id], { :user_id => current_user.id, :user_info => { :name => current_user.username } }) render :json => response else render :text => "Not authorized", :status => '403' end end end http://github.com/makoto/rubykaigi/tree/presence Friday, 27 August 2010
  • 48. jQuery(function(){ var server = new Pusher('#{Pusher.key}'); var myPresenceChannel = server.subscribe('presence#{pusher_presense_channel}') myPresenceChannel.bind('pusher:subscription_succeeded', function(member_list){ updatePresence(member_list); }) myPresenceChannel.bind('pusher:member_added', function(member){ updatePresence(myPresenceChannel.members()); }) myPresenceChannel.bind('pusher:member_removed', function(member){ updatePresence(myPresenceChannel.members()); }) }); http://github.com/makoto/rubykaigi/tree/presence Friday, 27 August 2010
  • 49. Friday, 27 August 2010
  • 50. @connections = {} # How do you scale beyond one process? EM.run { EM::WebSocket.start(:host => "0.0.0.0",:port =>3001)do|ws| ws.onopen { puts "WebSocket connection open" @connections[ws.id] = ws } ws.onclose { @connections.delete(ws.id)} ws.onmessage { |data| @connections.each do |k, v| v.send(data) unless v.id == ws.id end } end } Friday, 27 August 2010
  • 51. CC WS API C CC WS API C CC WS API C Friday, 27 August 2010
  • 52. http://www.infoq.com/articles/Web-Sockets-Proxy-Ser vers Friday, 27 August 2010
  • 53. Friday, 27 August 2010
  • 54. http://naun.blog118.fc2.com/ Friday, 27 August 2010