This document discusses using PocketIO to enable real-time web applications. It begins with an overview of the speaker and agenda. It then describes issues with the HTTP request/response model and how real-time web technologies can improve the user experience. The rest of the document focuses on coding demos using PocketIO, including building an echo server, shared chat wall, and integrating with an external data store. It emphasizes how PocketIO handles connections and allows collaboration between users.

1. Realtime Web with PocketIO
Ynon Perek
Tel Aviv Perl Mongers
Saturday, November 24, 12

2. Whoami
✤ Ynon Perek
✤ ynonperek.com
✤ me@ynonperek.com
Saturday, November 24, 12

3. Agenda
✤ What’s wrong with HTTP
✤ Real Time Web - Concepts
✤ PocketIO Coding Demos
Saturday, November 24, 12

4. What is wrong with HTTP ?
GET page
Here It Is
Saturday, November 24, 12

5. Let’s try a Live Chat
Saturday, November 24, 12

6. HTTP Live Chat
✤ All communication is mediated by server using HTTP
Tell Laura I Love Her
Saturday, November 24, 12

7. HTTP Live Chat
✤ But the server can only reply ...
Ok, got it
Saturday, November 24, 12

8. HTTP Live Chat
✤ Waiting...
Saturday, November 24, 12

9. HTTP Live Chat
✤ Meantime, on Laura’s side
Do I have any
messages ?
Tommy said he
loves you
Saturday, November 24, 12

10. A second later
Saturday, November 24, 12

11. HTTP Live Chat
Do I have any new
messages ?
No, sorry
Saturday, November 24, 12

12. A second later
Saturday, November 24, 12

13. HTTP Live Chat
Do I have any new
messages ?
No, sorry
Saturday, November 24, 12

14. A second later
Saturday, November 24, 12

15. HTTP Live Chat
Do I have any new
messages ?
No, sorry
Saturday, November 24, 12

16. HTTP Live Chat Dark Side
✤ Server is busy picking up requests
✤ Clients are busy polling
✤ Everyone loses
Saturday, November 24, 12

17. Real Time
Web
✤ Improved UX by allowing the
server to notify a client
Saturday, November 24, 12

18. What’s Available
✤ Plugins (usually flash) to open client/server sockets
✤ Comet
✤ Web Sockets (modern browsers)
Saturday, November 24, 12

19. Meet PocketIO
Perl implementation of Socket.IO written
by vti
Saturday, November 24, 12

20. The Good
✤ Chooses the best available
transport layer
✤ Manages active connections
and reconnections
✤ Awesome
Saturday, November 24, 12

21. Coding Time
Saturday, November 24, 12

22. What You Need
✤ Use Twiggy (or fliggy)
✤ Use Plack::Builder
Saturday, November 24, 12

23. What You Need
✤ /socket.io/socket.io.js should point to the client-side library
mount '/socket.io/socket.io.js' =>
Plack::App::File->new(
file => "$root/public/javascripts/socket.io.js");
Saturday, November 24, 12

24. What You Need
✤ /socket.io should return a new PocketIO object
mount '/socket.io' => PocketIO->new(
class => 'PocketHandler',
method => 'run',
);
Method that returns a subroutine
reference to bind socket actions
Saturday, November 24, 12

25. PocketIO::Run
✤ Demo 1: Echo Server
Saturday, November 24, 12

26. PocketIO Broadcasts
✤ notify all except sender:
$sender->broadcast->emit(‘message’, ‘text’);
✤ notify all (including sender)
$sender->sockets->emit(‘message’, ‘text’);
✤ send an object
$sender->sockets->emit(‘message’, {
message => ‘text’
});
Saturday, November 24, 12

27. PocketIO Broadcasts
✤ Demo2: Shared Echo (wall)
✤ Let’s turn our wall to multi-user wall
Saturday, November 24, 12

28. PocketIO Sharing Data
✤ Use an external data store (DB, Redis)
✤ Use Plack
Saturday, November 24, 12

29. External Data Store
Shared Data
Store
PocketIO Dancer
Saturday, November 24, 12

30. Plack
✤ Create a shared variable in Plack::Builder (or a middleware)
✤ Pass it to all apps
✤ Demo
Saturday, November 24, 12

31. PocketIO
Takeaways
✤ Bring users closer together by
allowing smooth collaboration
✤ Improve UX
✤ Multiplayer Zombie Slaying
games FTW
Saturday, November 24, 12

32. Thank You
✤ Keynote’s available at:
http://www.slideshare.net/YnonPerek
✤ Code available at:
https://github.com/ynonp/pm-nov-12
✤ Visit me on:
http://mobileweb.ynonperek.com
Saturday, November 24, 12