• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Building realtimewebslide
 

Building realtimewebslide

on

  • 3,555 views

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.

Statistics

Views

Total Views
3,555
Views on SlideShare
3,252
Embed Views
303

Actions

Likes
5
Downloads
29
Comments
0

2 Embeds 303

http://d.hatena.ne.jp 301
http://webcache.googleusercontent.com 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Building realtimewebslide Building realtimewebslide Presentation Transcript

    • 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 = fetc_url('http://.../') database.fetch(category = 'news', callback) read_file('homepage.html', callback) fetc_url('http://.../', callback) Friday, 27 August 2010
    • Friday, 27 August 2010
    • Benefits 1. Less overhead 1. Not releasing connection = good to share state within a session Friday, 27 August 2010
    • Friday, 27 August 2010
    • Friday, 27 August 2010
    • 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
    • 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
    • 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
    • By Hiroshi Ichikawa Remy Sharp just made iPhone PhoneGap version for 75 (remy) Friday, 27 August 2010
    • 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 { 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
    • 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
    • (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 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
    • 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 Friday, 27 August 2010
    • 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) { 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
    • 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]].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
    • 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
    • Friday, 27 August 2010
    • @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
    • CC WS API C CC WS API C CC WS API C Friday, 27 August 2010
    • 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