Your SlideShare is downloading. ×
0
Friday, 27 August 2010
Friday, 27 August 2010
Friday, 27 August 2010
Friday, 27 August 2010
Friday, 27 August 2010
Friday, 27 August 2010
Friday, 27 August 2010
rows = database.fetch(category = 'news')
                 template = read_file('homepage.html')
                 json = fe...
Friday, 27 August 2010
Benefits
                         1. Less overhead
                         1. Not releasing connection = good to share st...
Friday, 27 August 2010
Friday, 27 August 2010
var ws = new WebSocket("ws://example.com/service");
                         ws.onopen = function() {
                    ...
var httpServer = http.createServer(serveFile);
                         var server = ws.createServer({}, httpServer);

   ...
http://blog.new-bamboo.co.uk/2009/12/14/pushing-the-boundary-of-real-time-web-with-t witter-and-xfactor



Friday, 27 Augu...
By Hiroshi Ichikawa




                         Remy Sharp just made iPhone PhoneGap version for 75
                     ...
Matz and Ryan Dahli




Friday, 27 August 2010
Matz and Ryan Dahli




Friday, 27 August 2010
require 'em-websocket'

    EventMachine::WebSocket.start(:host => "0.0.0.0", :port => 8080) do |ws|
      ws.onopen    { ...
rev-websocket = sadayuki furuhashi
      cramp = Pratik Naik
      rainbows - sunshowers = Eric Wong
      em-websocket-pr...
(Alex MacCaw’s fork has 76 support for Cramp)




Friday, 27 August 2010
http://bit.ly/9tKdeK

                                      http://github.com/makoto/wsbench

       This is example of us...
Friday, 27 August 2010
Friday, 27 August 2010
Friday, 27 August 2010
Friday, 27 August 2010
http://eiga.com/movie/44107/goods/t142030853/




Friday, 27 August 2010
Friday, 27 August 2010
Friday, 27 August 2010
Friday, 27 August 2010
Friday, 27 August 2010
IMPORTANT : You can synchronise data from
                         client to ser ver by saving before hitting Pusher




F...
Friday, 27 August 2010
Friday, 27 August 2010
http://screenr.com/NJ0



Friday, 27 August 2010
Friday, 27 August 2010
server = new Pusher(Pusher.key, Pusher.channel);

        server.bind('note-create', function(note) {
          generateNo...
http://www.flickr.com/photos/amy_ng/1692424006/sizes/m/


Friday, 27 August 2010
Friday, 27 August 2010
Friday, 27 August 2010
Friday, 27 August 2010
Friday, 27 August 2010
Friday, 27 August 2010
Friday, 27 August 2010
http://screenr.com/B5O




Friday, 27 August 2010
Friday, 27 August 2010
class PusherController < ApplicationController
        def     auth
          response = Pusher[params[:channel_name]].aut...
jQuery(function(){
        var server = new Pusher('#{Pusher.key}');
        var myPresenceChannel = server.subscribe('pre...
Friday, 27 August 2010
@connections = {} # How do you scale beyond one process?
               EM.run {
                 EM::WebSocket.start(:hos...
CC
                                  WS   API
                              C



                         CC
             ...
http://www.infoq.com/articles/Web-Sockets-Proxy-Ser vers

Friday, 27 August 2010
Friday, 27 August 2010
http://naun.blog118.fc2.com/




Friday, 27 August 2010
Upcoming SlideShare
Loading in...5
×

Building realtimewebslide

3,146

Published 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 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.

Published in: Technology
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,146
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
30
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

Transcript of "Building realtimewebslide"

  1. 1. Friday, 27 August 2010
  2. 2. Friday, 27 August 2010
  3. 3. Friday, 27 August 2010
  4. 4. Friday, 27 August 2010
  5. 5. Friday, 27 August 2010
  6. 6. Friday, 27 August 2010
  7. 7. Friday, 27 August 2010
  8. 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. 9. Friday, 27 August 2010
  10. 10. Benefits 1. Less overhead 1. Not releasing connection = good to share state within a session Friday, 27 August 2010
  11. 11. Friday, 27 August 2010
  12. 12. Friday, 27 August 2010
  13. 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. 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. 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. 16. By Hiroshi Ichikawa Remy Sharp just made iPhone PhoneGap version for 75 (remy) Friday, 27 August 2010
  17. 17. Matz and Ryan Dahli Friday, 27 August 2010
  18. 18. Matz and Ryan Dahli Friday, 27 August 2010
  19. 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. 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. 21. (Alex MacCaw’s fork has 76 support for Cramp) Friday, 27 August 2010
  22. 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. 23. Friday, 27 August 2010
  24. 24. Friday, 27 August 2010
  25. 25. Friday, 27 August 2010
  26. 26. Friday, 27 August 2010
  27. 27. http://eiga.com/movie/44107/goods/t142030853/ Friday, 27 August 2010
  28. 28. Friday, 27 August 2010
  29. 29. Friday, 27 August 2010
  30. 30. Friday, 27 August 2010
  31. 31. Friday, 27 August 2010
  32. 32. IMPORTANT : You can synchronise data from client to ser ver by saving before hitting Pusher Friday, 27 August 2010
  33. 33. Friday, 27 August 2010
  34. 34. Friday, 27 August 2010
  35. 35. http://screenr.com/NJ0 Friday, 27 August 2010
  36. 36. Friday, 27 August 2010
  37. 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. 38. http://www.flickr.com/photos/amy_ng/1692424006/sizes/m/ Friday, 27 August 2010
  39. 39. Friday, 27 August 2010
  40. 40. Friday, 27 August 2010
  41. 41. Friday, 27 August 2010
  42. 42. Friday, 27 August 2010
  43. 43. Friday, 27 August 2010
  44. 44. Friday, 27 August 2010
  45. 45. http://screenr.com/B5O Friday, 27 August 2010
  46. 46. Friday, 27 August 2010
  47. 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. 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. 49. Friday, 27 August 2010
  50. 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. 51. CC WS API C CC WS API C CC WS API C Friday, 27 August 2010
  52. 52. http://www.infoq.com/articles/Web-Sockets-Proxy-Ser vers Friday, 27 August 2010
  53. 53. Friday, 27 August 2010
  54. 54. http://naun.blog118.fc2.com/ Friday, 27 August 2010
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×