RealTime Web with PocketIO

Tel Aviv Perl Mongers

Realtime Web with PocketIOYnon Perek

Wednesday, November 28, 12

Whoami

✤ Ynon Perek

✤ ynonperek.com

✤ [email protected]


mailto:[email protected]

mailto:[email protected]

Agenda

✤ What’s wrong with HTTP

✤ Real Time Web - Concepts

✤ PocketIO Coding Demos


What is wrong with HTTP ?

Here It Is

GET page


Let’s try a Live Chat


HTTP Live Chat

✤ All communication is mediated by server using HTTP

Tell Laura I Love Her


HTTP Live Chat

✤ But the server can only reply ...

Ok, got it


HTTP Live Chat

✤ Waiting...


HTTP Live Chat

✤ Meantime, on Laura’s side

Do I have any messages ?

Tommy said he loves you


A second later


HTTP Live Chat

Do I have any new messages ?

No, sorry


A second later


HTTP Live Chat


No, sorry


A second later


HTTP Live Chat


No, sorry


HTTP Live Chat Dark Side

✤ Server is busy picking up requests

✤ Clients are busy polling

✤ Everyone loses


Real Time Web

✤ Improved UX by allowing the server to notify a client


What’s Available

✤ Plugins (usually flash) to open client/server sockets


What’s Available

✤ Comet


What’s Available

✤ Web Sockets (modern browsers)


Meet PocketIOPerl implementation of Socket.IO written by vti


The Good

✤ Chooses the best available transport layer

✤ Manages active connections and reconnections

✤ Awesome


PocketIO Components

Server Side Backend(perl)

Client Side Library(JavaScript)


Coding Time


PocketIO Architecture

Twiggy Web Server

PocketIO Service

“Normal” Web Service


What You Need

✤ cpanm PocketIO

✤ Use Twiggy (or fliggy)

✤ Use Plack::Builder


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");


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


PocketIO::Run

✤ Demo 1: Echo Server


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’});


PocketIO Broadcasts

✤ Demo2: Shared Echo (wall)

✤ Let’s turn our wall to multi-user wall


PocketIO Sharing Data

✤ Use an external data store (DB, Redis)

✤ Use Plack


External Data Store

Shared Data Store

PocketIO Dancer


Plack

✤ Create a shared variable in Plack::Builder (or a middleware)

✤ Pass it to all apps

✤ Demo


PocketIO Takeaways

✤ Bring users closer together by allowing smooth collaboration

✤ Improve UX

✤ Multiplayer Zombie Slaying games FTW


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


http://www.slideshare.net/YnonPerek

http://www.slideshare.net/YnonPerek

https://github.com/ynonp/pm-nov-12

https://github.com/ynonp/pm-nov-12

http://mobileweb.ynonperek.com

http://mobileweb.ynonperek.com

RealTime Web with PocketIO

Technology

Transcript of RealTime Web with PocketIO