札幌Ruby会議03 http://regional.rubykaigi.org/sapporo03

1. Let’s develop real-time Web application using Pusher!

3. JUN OHWADA

4. JUN OHWADA

5. Let’s develop real-time Web application using Pusher!

6. D emonstration

7. Dynamic Web
Polling
Comet
WebSocket

8. Dynamic Web
Polling
Comet
WebSocket

9. WebSocket
No delay
No waste request
No waste code

10. WebSocket
No delay
No waste request
No waste code

11. rik/em-websocket
.com/igr igo
http s://github

12. Pusher
http://pusherapp.com/

13. mboo/pu sher-gem
/github.co m/newba
https:/

14. Pusher[channel].trigger(label1, data)
Ruby
Pusher[channel].trigger(label2, data)
Pusher[channel].trigger(label3, data)
WebSocket
var receiver = new Pusher(key, channel);
Browser
receiver.bind(label1, function(data) { ... } );
receiver.bind(label2, function(data) { ... } );
receiver.bind(label3, function(data) { ... } );
JavaScript

15. ig i20 10
Ru by Ka
http://www. ickr.com/photos/hsbt/4931700629/
http://www. ickr.com/photos/kei-s/4929133025/
http://www. ickr.com/photos/recompile_net/4938690602/
http://www. ickr.com/photos/recompile_net/4935820587/

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

17. Sub screens
http://www. ickr.com/photos/machu/4942003500/

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

19. Twitter #rubykaigi
IRC #rubykaigi
Operation Noti cation

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

21. Twitter
IRC

22. Operation
txt
txt
txt

23. Pusher[channel].trigger(label1, data)
Ruby
Pusher[channel].trigger(label2, data)
Pusher[channel].trigger(label3, data)
WebSocket
var receiver = new Pusher(key, channel);
Browser
receiver.bind(label1, function(data) { ... });
receiver.bind(label2, function(data) { ... });
receiver.bind(label3, function(data) { ... });
JavaScript

24. Pusher[channel].trigger(label1, data)
Ruby
Pusher[channel].trigger(label2, data)
Pusher[channel].trigger(label3, data)
WebSocket
var receiver = new Pusher(key, channel);
Browser
receiver.bind(label1, function(data) { ... });
receiver.bind(label2, function(data) { ... });
receiver.bind(label3, function(data) { ... });
JavaScript

25. Pusher[channel].trigger(label1, data)
Ruby
Pusher[channel].trigger(label2, data)
Pusher[channel].trigger(label3, data)
WebSocket
var receiver = new Pusher(key, channel);
Browser
receiver.bind(label1, function(data) { ... });
receiver.bind(label2, function(data) { ... });
receiver.bind(label3, function(data) { ... });
JavaScript

26. Pusher[channel].trigger(label1, data)
Ruby
Pusher[channel].trigger(label2, data)
Pusher[channel].trigger(label3, data)
WebSocket
var receiver = new Pusher(key, channel);
Browser
receiver.bind(label1, function(data) { ... });
receiver.bind(label2, function(data) { ... });
receiver.bind(label3, function(data) { ... });
JavaScript

27. s/
ma ster/pusher
0s tream/tree/
.co m/ju ne29/rk201
https://github
/
ubl ic/2010/live
/tre e/master/p
ka i/rubykaigi
.com/ruby-no-
ht tps://github

30. Pusher
http://pusherapp.com/

31. References
WebSocket.org -- A WebSocket Community
http://www.websockets.org/
Pusher
http://pusherapp.com/
Building Real Time Web (by Makoto Inoue)
http://vimeo.com/14549558
WebSocket “ Web” - IT
http://www.atmarkit.co.jp/fcoding/articles/
websocket/01/websocket01a.html
@makoto_inoue

32. Let’s develop real-time Web application using Pusher!

33. JUN OHWADA