Download - RealTime Web with PocketIO
![Page 1: RealTime Web with PocketIO](https://reader034.vdocuments.site/reader034/viewer/2022052618/554f700ab4c905c8088b5502/html5/thumbnails/1.jpg)
Tel Aviv Perl Mongers
Realtime Web with PocketIOYnon Perek
Wednesday, November 28, 12
![Page 2: RealTime Web with PocketIO](https://reader034.vdocuments.site/reader034/viewer/2022052618/554f700ab4c905c8088b5502/html5/thumbnails/2.jpg)
Whoami
✤ Ynon Perek
✤ ynonperek.com
Wednesday, November 28, 12
![Page 3: RealTime Web with PocketIO](https://reader034.vdocuments.site/reader034/viewer/2022052618/554f700ab4c905c8088b5502/html5/thumbnails/3.jpg)
Agenda
✤ What’s wrong with HTTP
✤ Real Time Web - Concepts
✤ PocketIO Coding Demos
Wednesday, November 28, 12
![Page 4: RealTime Web with PocketIO](https://reader034.vdocuments.site/reader034/viewer/2022052618/554f700ab4c905c8088b5502/html5/thumbnails/4.jpg)
What is wrong with HTTP ?
Here It Is
GET page
Wednesday, November 28, 12
![Page 5: RealTime Web with PocketIO](https://reader034.vdocuments.site/reader034/viewer/2022052618/554f700ab4c905c8088b5502/html5/thumbnails/5.jpg)
Let’s try a Live Chat
Wednesday, November 28, 12
![Page 6: RealTime Web with PocketIO](https://reader034.vdocuments.site/reader034/viewer/2022052618/554f700ab4c905c8088b5502/html5/thumbnails/6.jpg)
HTTP Live Chat
✤ All communication is mediated by server using HTTP
Tell Laura I Love Her
Wednesday, November 28, 12
![Page 7: RealTime Web with PocketIO](https://reader034.vdocuments.site/reader034/viewer/2022052618/554f700ab4c905c8088b5502/html5/thumbnails/7.jpg)
HTTP Live Chat
✤ But the server can only reply ...
Ok, got it
Wednesday, November 28, 12
![Page 8: RealTime Web with PocketIO](https://reader034.vdocuments.site/reader034/viewer/2022052618/554f700ab4c905c8088b5502/html5/thumbnails/8.jpg)
HTTP Live Chat
✤ Waiting...
Wednesday, November 28, 12
![Page 9: RealTime Web with PocketIO](https://reader034.vdocuments.site/reader034/viewer/2022052618/554f700ab4c905c8088b5502/html5/thumbnails/9.jpg)
HTTP Live Chat
✤ Meantime, on Laura’s side
Do I have any messages ?
Tommy said he loves you
Wednesday, November 28, 12
![Page 10: RealTime Web with PocketIO](https://reader034.vdocuments.site/reader034/viewer/2022052618/554f700ab4c905c8088b5502/html5/thumbnails/10.jpg)
A second later
Wednesday, November 28, 12
![Page 11: RealTime Web with PocketIO](https://reader034.vdocuments.site/reader034/viewer/2022052618/554f700ab4c905c8088b5502/html5/thumbnails/11.jpg)
HTTP Live Chat
Do I have any new messages ?
No, sorry
Wednesday, November 28, 12
![Page 12: RealTime Web with PocketIO](https://reader034.vdocuments.site/reader034/viewer/2022052618/554f700ab4c905c8088b5502/html5/thumbnails/12.jpg)
A second later
Wednesday, November 28, 12
![Page 13: RealTime Web with PocketIO](https://reader034.vdocuments.site/reader034/viewer/2022052618/554f700ab4c905c8088b5502/html5/thumbnails/13.jpg)
HTTP Live Chat
Do I have any new messages ?
No, sorry
Wednesday, November 28, 12
![Page 14: RealTime Web with PocketIO](https://reader034.vdocuments.site/reader034/viewer/2022052618/554f700ab4c905c8088b5502/html5/thumbnails/14.jpg)
A second later
Wednesday, November 28, 12
![Page 15: RealTime Web with PocketIO](https://reader034.vdocuments.site/reader034/viewer/2022052618/554f700ab4c905c8088b5502/html5/thumbnails/15.jpg)
HTTP Live Chat
Do I have any new messages ?
No, sorry
Wednesday, November 28, 12
![Page 16: RealTime Web with PocketIO](https://reader034.vdocuments.site/reader034/viewer/2022052618/554f700ab4c905c8088b5502/html5/thumbnails/16.jpg)
HTTP Live Chat Dark Side
✤ Server is busy picking up requests
✤ Clients are busy polling
✤ Everyone loses
Wednesday, November 28, 12
![Page 17: RealTime Web with PocketIO](https://reader034.vdocuments.site/reader034/viewer/2022052618/554f700ab4c905c8088b5502/html5/thumbnails/17.jpg)
Real Time Web
✤ Improved UX by allowing the server to notify a client
Wednesday, November 28, 12
![Page 18: RealTime Web with PocketIO](https://reader034.vdocuments.site/reader034/viewer/2022052618/554f700ab4c905c8088b5502/html5/thumbnails/18.jpg)
What’s Available
✤ Plugins (usually flash) to open client/server sockets
Wednesday, November 28, 12
![Page 19: RealTime Web with PocketIO](https://reader034.vdocuments.site/reader034/viewer/2022052618/554f700ab4c905c8088b5502/html5/thumbnails/19.jpg)
What’s Available
✤ Comet
Wednesday, November 28, 12
![Page 20: RealTime Web with PocketIO](https://reader034.vdocuments.site/reader034/viewer/2022052618/554f700ab4c905c8088b5502/html5/thumbnails/20.jpg)
What’s Available
✤ Web Sockets (modern browsers)
Wednesday, November 28, 12
![Page 21: RealTime Web with PocketIO](https://reader034.vdocuments.site/reader034/viewer/2022052618/554f700ab4c905c8088b5502/html5/thumbnails/21.jpg)
Meet PocketIOPerl implementation of Socket.IO written by vti
Wednesday, November 28, 12
![Page 22: RealTime Web with PocketIO](https://reader034.vdocuments.site/reader034/viewer/2022052618/554f700ab4c905c8088b5502/html5/thumbnails/22.jpg)
The Good
✤ Chooses the best available transport layer
✤ Manages active connections and reconnections
✤ Awesome
Wednesday, November 28, 12
![Page 23: RealTime Web with PocketIO](https://reader034.vdocuments.site/reader034/viewer/2022052618/554f700ab4c905c8088b5502/html5/thumbnails/23.jpg)
PocketIO Components
Server Side Backend(perl)
Client Side Library(JavaScript)
Wednesday, November 28, 12
![Page 24: RealTime Web with PocketIO](https://reader034.vdocuments.site/reader034/viewer/2022052618/554f700ab4c905c8088b5502/html5/thumbnails/24.jpg)
Coding Time
Wednesday, November 28, 12
![Page 25: RealTime Web with PocketIO](https://reader034.vdocuments.site/reader034/viewer/2022052618/554f700ab4c905c8088b5502/html5/thumbnails/25.jpg)
PocketIO Architecture
Twiggy Web Server
PocketIO Service
“Normal” Web Service
Wednesday, November 28, 12
![Page 26: RealTime Web with PocketIO](https://reader034.vdocuments.site/reader034/viewer/2022052618/554f700ab4c905c8088b5502/html5/thumbnails/26.jpg)
What You Need
✤ cpanm PocketIO
✤ Use Twiggy (or fliggy)
✤ Use Plack::Builder
Wednesday, November 28, 12
![Page 27: RealTime Web with PocketIO](https://reader034.vdocuments.site/reader034/viewer/2022052618/554f700ab4c905c8088b5502/html5/thumbnails/27.jpg)
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");
Wednesday, November 28, 12
![Page 28: RealTime Web with PocketIO](https://reader034.vdocuments.site/reader034/viewer/2022052618/554f700ab4c905c8088b5502/html5/thumbnails/28.jpg)
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
Wednesday, November 28, 12
![Page 29: RealTime Web with PocketIO](https://reader034.vdocuments.site/reader034/viewer/2022052618/554f700ab4c905c8088b5502/html5/thumbnails/29.jpg)
PocketIO::Run
✤ Demo 1: Echo Server
Wednesday, November 28, 12
![Page 30: RealTime Web with PocketIO](https://reader034.vdocuments.site/reader034/viewer/2022052618/554f700ab4c905c8088b5502/html5/thumbnails/30.jpg)
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’});
Wednesday, November 28, 12
![Page 31: RealTime Web with PocketIO](https://reader034.vdocuments.site/reader034/viewer/2022052618/554f700ab4c905c8088b5502/html5/thumbnails/31.jpg)
PocketIO Broadcasts
✤ Demo2: Shared Echo (wall)
✤ Let’s turn our wall to multi-user wall
Wednesday, November 28, 12
![Page 32: RealTime Web with PocketIO](https://reader034.vdocuments.site/reader034/viewer/2022052618/554f700ab4c905c8088b5502/html5/thumbnails/32.jpg)
PocketIO Sharing Data
✤ Use an external data store (DB, Redis)
✤ Use Plack
Wednesday, November 28, 12
![Page 33: RealTime Web with PocketIO](https://reader034.vdocuments.site/reader034/viewer/2022052618/554f700ab4c905c8088b5502/html5/thumbnails/33.jpg)
External Data Store
Shared Data Store
PocketIO Dancer
Wednesday, November 28, 12
![Page 34: RealTime Web with PocketIO](https://reader034.vdocuments.site/reader034/viewer/2022052618/554f700ab4c905c8088b5502/html5/thumbnails/34.jpg)
Plack
✤ Create a shared variable in Plack::Builder (or a middleware)
✤ Pass it to all apps
✤ Demo
Wednesday, November 28, 12
![Page 35: RealTime Web with PocketIO](https://reader034.vdocuments.site/reader034/viewer/2022052618/554f700ab4c905c8088b5502/html5/thumbnails/35.jpg)
PocketIO Takeaways
✤ Bring users closer together by allowing smooth collaboration
✤ Improve UX
✤ Multiplayer Zombie Slaying games FTW
Wednesday, November 28, 12
![Page 36: RealTime Web with PocketIO](https://reader034.vdocuments.site/reader034/viewer/2022052618/554f700ab4c905c8088b5502/html5/thumbnails/36.jpg)
Thank You
✤ Slides are available at:http://www.slideshare.net/YnonPerek
✤ Code is available at:https://github.com/ynonp/pm-nov-12
✤ I’m available at:http://mobileweb.ynonperek.com
Wednesday, November 28, 12