Pusherアプリの作り方

Pusherアプリの作り方Let’s develop real-time Web application using Pusher!

大和田 純 / june29

冬の札幌でこんにちわ!

大和田 純JUN OHWADA

大和田 純JUN OHWADA

会いに行けるプログラマ

Pusherアプリの作り方Let’s develop real-time Web application using Pusher!

emonstrationD

Polling Comet WebSocket

Dynamic Web

Polling Comet WebSocket

Dynamic Web

No delay No waste request No waste code

WebSocket

No delay No waste request No waste code

WebSocket

https://github.com/igrigorik/em-websocket

Pusherhttp://pusherapp.com/

https://github.com/newbamboo/pusher-gem

receiver.bind(label2, function(data) { ... } );

receiver.bind(label3, function(data) { ... } );

Pusher[channel].trigger(label1, data)

Pusher[channel].trigger(label2, data)

Pusher[channel].trigger(label3, data)

Ruby

var receiver = new Pusher(key, channel);

receiver.bind(label1, function(data) { ... } );

JavaScript

Browser

WebSocket

http://www.!ickr.com/photos/recompile_net/4935820587/

http://www.!ickr.com/photos/hsbt/4931700629/

http://www.!ickr.com/photos/recompile_net/4938690602/http://www.!ickr.com/photos/kei-s/4929133025/

RubyKaigi2010

http://www.!ickr.com/photos/machu/4942003500/

http://www.!ickr.com/photos/machu/4942003500/

Sub screens

http://www.!ickr.com/photos/y_ogagaga/4942625366/

TwitterIRC

Operation

#rubykaigi#rubykaigiNoti"cation

http://twitter.com/Dominion525/status/22339840037

http://twitter.com/Dominion525/status/22339449175

Twitter

IRC

txt

txt

txt

Operation

receiver.bind(label2, function(data) { ... });

receiver.bind(label3, function(data) { ... });

Pusher[channel].trigger(label1, data)

Pusher[channel].trigger(label2, data)

Pusher[channel].trigger(label3, data)

Ruby

var receiver = new Pusher(key, channel);

receiver.bind(label1, function(data) { ... });

JavaScript

Browser

WebSocket

receiver.bind(label2, function(data) { ... });

receiver.bind(label3, function(data) { ... });

Pusher[channel].trigger(label1, data)

Pusher[channel].trigger(label2, data)

Pusher[channel].trigger(label3, data)

Ruby

var receiver = new Pusher(key, channel);

receiver.bind(label1, function(data) { ... });

JavaScript

Browser

WebSocket

何を送る?

receiver.bind(label2, function(data) { ... });

receiver.bind(label3, function(data) { ... });

Pusher[channel].trigger(label1, data)

Pusher[channel].trigger(label2, data)

Pusher[channel].trigger(label3, data)

Ruby

var receiver = new Pusher(key, channel);

receiver.bind(label1, function(data) { ... });

JavaScript

Browser

WebSocket

どう扱う?

receiver.bind(label2, function(data) { ... });

receiver.bind(label3, function(data) { ... });

Pusher[channel].trigger(label1, data)

Pusher[channel].trigger(label2, data)

Pusher[channel].trigger(label3, data)

Ruby

var receiver = new Pusher(key, channel);

receiver.bind(label1, function(data) { ... });

JavaScript

Browser

WebSocket

https://github.com/ruby-no-kai/rubykaigi/tree/master/public/2010/live/

https://github.com/june29/rk2010stream/tree/master/pushers/

大規模会議を支える技術

Pusherhttp://pusherapp.com/

WebSocket.org -- A WebSocket Communityhttp://www.websockets.org/

Pusherhttp://pusherapp.com/

Building Real Time Web (by Makoto Inoue)http://vimeo.com/14549558

WebSocketで目指せ“リアルタイムWeb”！ - ＠IThttp://www.atmarkit.co.jp/fcoding/articles/websocket/01/websocket01a.html

References

@makoto_inoue

Pusherアプリの作り方Let’s develop real-time Web application using Pusher!

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

大和田 純JUN OHWADA

懇親会で個別握手会!