building realtimewebslide

Makoto Inoue (@makoto_inoue)

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

Friday, 27 August 2010

About - 自己紹介 -

http://truestoryapp.com/ http://pandastream.com/ http://pusherapp.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”

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)

WebSocket

Ajax vs Comet vs WebSocket

(Long Polling)

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

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

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

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

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

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

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プロセス間通信

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出ます)

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

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

@pusherapp

@makoto_inoue

building realtimewebslide

cc ws api

ryan dahli

ser ver

port gt

host gt

makotorubykaigitreepresence

ws

connection

Technology

building automation smart building building management ·...

building homes. building bonds

building building isolation isolation

new building of university central library. new building old...

florida building code · • florida building code,...

building building

building business. building careers

building enclosure fundamentals - building...

building industry game b.i.g. - building oror ...

u.s.green!building!council! green! building! economic...

building sustainability green building

walton hall campus map - squarespace meeting room frank...

湘南藤沢 shonan fujisawatau building: graduate school...

cm abpl 90300 building matericm abpl 90300 building...

l o r e t a dr. - neomeda a building b b building c c...

culturismosintonterias.comculturismosintonterias.com/afiliados/keyword.pdfmuscle...

building code basics: building

alternative building strategies: building community...

forestry building: building emergency plan · forestry...

building dashboards, building interfaces