building realtimewebslide

Makoto Inoue (@makoto_inoue)

Building Real Time Webリアルタイムウェブができるまで

Friday, 27 August 2010

About - 自己紹介 -

http://truestoryapp.com/ http://pandastream.com/ http://pusherapp.com/


http://truestoryapp.com/






HTML5 WebSocket

Cloud Service

Powered by Ruby

Pusher [púsh・er]【名】【C】


押す人.(A person who pushes stuff)

押すもの[道具].(A tool to push)

《俗》麻薬密売人.(A drug dealer)

Pusher [púsh・er]【名】【C】

http://ejje.weblio.jp/content/pusher




A:@pusherapp のWebSocket試してみました (I tried Pusher’s WebSocket)

B:麻薬買いました (I bought cocaine)

“I got hooked by Pusher”


“I got hooked by Pusher”


node.js　&　WebSocket (node.js と WebSocket）

The Ruby’s Counter Attack (逆襲のRuby)

The Birth of Pusher (Pusher誕生）

Growing with Pusher (Pusherを通して学んだ事）

Today’s Topic今日のお題


　　　　　　& evented worldnode.jsとイベント駆動な世界(Nov 2009)

http://www.slideshare.net/simon/evented-io-based-web-servers-explained-using-bunnies

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)

Blocking - Synchronous

Non Blocking - Asynchronous




http://blog.chromium.org/2009/12/web-sockets-now-available-in-google.html

Web Socket In Google Chrome Google のWebSocket サポート(Dec 2009)




WebSocket Protocol

1. Handshake Request 2. Handshake Response

3. Frame Transportation

Benefits1. Less overhead1. Not releasing connection = good to share state within a session


Benefit (利点)

Less Overhead (少ないオーバーヘッド）

Easy to manage state per session(クッキーいらず)

Server Push (サーバからクライアントへのデータ通知）


Ajax(Polling)

Comet

WebSocket

Ajax vs Comet vs WebSocket

(Long Polling)


Web Sockets Client Side Example クライアントサイドの例


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() {};




Web Sockets Server Side Example サーバサイドの例(node-websocket-server)

http://github.com/miksago/node-websocket-server/blob/master/examples/echo-server.js

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);

node-websocket-server = Micheil Smith




TPS(Tweets Per Second)Example秒速ツイート例

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




Current State現在の状況

Chrome,Safari, Firefox(Beta)

Different Draft (75, 76)

Flash fallback for non supported browsers

http://github.com/gimite/web-socket-js

Not for iPhone/iPad ;-(

No Binary(yet)

By Hiroshi Ichikawa

Remy Sharp just made iPhone PhoneGap version for 75(remy)




モビルスーツの性能の違いが、戦力の決定的差でないということを教えてやる!!(ガンダムとの2回戦、シャアの自信に溢れたセリフ。)

http://khaos-gate.blog.so-net.ne.jp/2006-07-20

The Ruby’s Counter Attack逆襲のRuby (Dec 2009)

Matz and Ryan Dahli




Rubyをキメると気持ちイイ。説明できていない!!(RubyKaigi2008)

The Ruby’s Counter Attack逆襲のRuby (Dec 2009)

Matz and Ryan Dahli


Event Machine + WebSocket= em-websocket

http://www.igvita.com/2009/12/22/ruby-websockets-tcp-for-the-browser/

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




Other Ruby related librariesその他の赤い彗星達

http://github.com/frsyuki/rev-websocket

http://github.com/lifo/cramp

http://rainbows.rubyforge.org/sunshowers/Sunshowers/WebSocket.html

http://github.com/mcolyer/em-websocket-proxy

http://github.com/gimite/web-socket-ruby

rev-websocket = sadayuki furuhashicramp = Pratik Naikrainbows - sunshowers = Eric Wongem-websocket-proxy = Matt Colyerweb-socket-ruby = Hiroshi Ichikawa















How to pick the right one?どれを選べばいいの？

Up to date with the latest draft? (最新ドラフトサポート）

Library or framework? (ライブラリかフレームワークか）

Performance (パフォーマンス）

(Alex MacCaw’s fork has 76 support for Cramp)


Performance

http://github.com/makoto/wsbench

http://bit.ly/9tKdeK

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)






The Birth of Pusher(Pusher 誕生)


TrueStory


Problem 問題

Data gets stale (データが古くなる）

Conflicts　(更新データの衝突）

Discourages collaboration (コラボレーションの障害）


Requirement要求

No rewrite (一からの書き直しは避けたい）

Reusable　(再利用可能）

Simple (シンプル）


Our solution解決方法

http://eiga.com/movie/44107/goods/t142030853/




Separate


Serve file


Bind


AJAX


REST

IMPORTANT : You can synchronise data from client to server by saving before hitting Pusher


Push


Retrospectiveapp

http://screenr.com/NJ0




Retrospectiveapp


Channel & Event

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

Server side (Ruby)

Client side (Javascript)

We enhanced WebSocket by adding channel and event


Growing With PusherPusher を通して学んだ事

http://www.flickr.com/photos/amy_ng/1692424006/sizes/m/




Growing With PusherPusher を通して学んだ事

Usage Pattern (サーバからクライアントへのデータ通知）

Making Robust & Scalable (スケーラブルにする）


Usage Pattern

3 patterns

Introducing new pattern (新しいパターン）


3 patterns


1: Collaboration


2: Streaming


3:One Day Event


Introducing new pattern: Presence

http://screenr.com/B5O





http://github.com/makoto/rubykaigi/tree/presence

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 endend






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()); })});




Making Robust & Scalable

Beyond one process (プロセス間通信）

Beyond proxies (プロキシの壁）


Beyond One Processプロセス間通信

@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}


Beyond One Processプロセス間通信

API

API

API

WSC CC

WSC CC

WSC CC


Beyond Proxiesプロキシの壁

http://www.infoq.com/articles/Web-Sockets-Proxy-Servers




More Infohttp://blog.pusherapp.com

http://blog.new-bamboo.co.uk

http://video2010.scottishrubyconference.com/

http://www.atmarkit.co.jp （日本語記事書きました）

“We're rubyists living abroad. Any questions?”(08-29 13:30~15出ます)


http://pusherapp.com

http://pusherapp.com

http://blog.new-bamboo.co.uk/

http://blog.new-bamboo.co.uk/



http://www.atmarkit.co.jp

http://www.atmarkit.co.jp

Thanksご清聴ありがとうございました

http://naun.blog118.fc2.com/

@pusherapp

@makoto_inoue




building realtimewebslide

Technology

cc ws api

ryan dahli

ser ver

port gt

host gt

makotorubykaigitreepresence

ws

connection