RealTime Web with PocketIO

Tel Aviv Perl Mongers

Realtime Web with PocketIOYnon Perek

Wednesday, November 28, 12

Whoami

✤ Ynon Perek

✤ ynonperek.com

✤ [email protected]

Wednesday, November 28, 12

Agenda

✤ What’s wrong with HTTP

✤ Real Time Web - Concepts

✤ PocketIO Coding Demos

Wednesday, November 28, 12

What is wrong with HTTP ?

Here It Is

GET page

Wednesday, November 28, 12

Let’s try a Live Chat

Wednesday, November 28, 12

HTTP Live Chat

✤ All communication is mediated by server using HTTP

Tell Laura I Love Her

Wednesday, November 28, 12

HTTP Live Chat

✤ But the server can only reply ...

Ok, got it

Wednesday, November 28, 12

HTTP Live Chat

✤ Waiting...

Wednesday, November 28, 12

HTTP Live Chat

✤ Meantime, on Laura’s side

Do I have any messages ?

Tommy said he loves you

Wednesday, November 28, 12

A second later

Wednesday, November 28, 12

HTTP Live Chat

Do I have any new messages ?

No, sorry

Wednesday, November 28, 12

A second later

Wednesday, November 28, 12

HTTP Live Chat

Do I have any new messages ?

No, sorry

Wednesday, November 28, 12

A second later

Wednesday, November 28, 12

HTTP Live Chat

Do I have any new messages ?

No, sorry

Wednesday, November 28, 12

HTTP Live Chat Dark Side

✤ Server is busy picking up requests

✤ Clients are busy polling

✤ Everyone loses

Wednesday, November 28, 12

Real Time Web

✤ Improved UX by allowing the server to notify a client

Wednesday, November 28, 12

What’s Available

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

Wednesday, November 28, 12

What’s Available

✤ Comet

Wednesday, November 28, 12

What’s Available

✤ Web Sockets (modern browsers)

Wednesday, November 28, 12

Meet PocketIOPerl implementation of Socket.IO written by vti

Wednesday, November 28, 12

The Good

✤ Chooses the best available transport layer

✤ Manages active connections and reconnections

✤ Awesome

Wednesday, November 28, 12

PocketIO Components

Server Side Backend(perl)

Client Side Library(JavaScript)

Wednesday, November 28, 12

Coding Time

Wednesday, November 28, 12

PocketIO Architecture

Twiggy Web Server

PocketIO Service

“Normal” Web Service

Wednesday, November 28, 12

What You Need

✤ cpanm PocketIO

✤ Use Twiggy (or fliggy)

✤ Use Plack::Builder

Wednesday, November 28, 12

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

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

PocketIO::Run

✤ Demo 1: Echo Server

Wednesday, November 28, 12

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

PocketIO Broadcasts

✤ Demo2: Shared Echo (wall)

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

Wednesday, November 28, 12

PocketIO Sharing Data

✤ Use an external data store (DB, Redis)

✤ Use Plack

Wednesday, November 28, 12

External Data Store

Shared Data Store

PocketIO Dancer

Wednesday, November 28, 12

Plack

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

✤ Pass it to all apps

✤ Demo

Wednesday, November 28, 12

PocketIO Takeaways

✤ Bring users closer together by allowing smooth collaboration

✤ Improve UX

✤ Multiplayer Zombie Slaying games FTW

Wednesday, November 28, 12

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