AnyMQ, Hippie, and the real-time web

AnyMQ, Hippie
and the real-time web

YAPC::Asia 2010 Tokyo
Chia-liang Kao clkao@clkao.org

• PSGI, Plack
• AnyEvent, AnyMQ, AMQP
• Server-push, comet
• Websocket
• Web::Hippie, Web::Hippie:Pipe

• PSGI, Plack
• AnyEvent, AnyMQ, AMQP
• Server-push, comet
• Websocket
• Web::Hippie, Web::Hippie::Pipe

$env

[
'200',
[ 'Content-Type' => 'text/plain' ],
[ "Hello World" ],
]

$env->{PATH_INFO}

$env

[
'200',
[ "Hello World" ],
]

$env->{PATH_INFO}

Plack::Request->new($env)->path_info
$env

[
'200',
[ "Hello World" ],
]

$env
Streaming Interface
sub {
my $responder = shift;
my $writer = $responder->([
'200',
[ 'Content-Type' => 'text/plain' ]);
# later, of in a callback
$writer->write(“Hello world!”);
$writer->close();
}

$env
Streaming Interface(Cont.)
sub {
my $responder = shift;
my $writer = $responder->([
'200',
[ 'Content-Type' => 'text/plain' ]);
# later, of in a callback
my $w; $w = AnyEvent->timer(after => 3,
cb => sub {
$writer->write(“Hello world!”);
$writer->close();
});
}

AnyEvent
•
•
use AnyEvent::HTTP;

http_get "http://yapc.asia/",
sub { print $_[1] };
# do something else

sub POE::Kernel::ASSERT_DEFAULT () { 1 }

use HTTP::Request;
use POE qw(Component::Client::HTTP);

POE::Component::Client::HTTP->spawn(
  Alias => 'ua', # defaults to 'weeble'
  Timeout => 20, # defaults to 180 seconds
);

POE::Session->create(
  inline_states => {
    _start => sub {
      POE::Kernel->post(
        'ua', # posts to the 'ua' alias
        'request', # posts to ua's 'request' state
        'response', # which of our states will receive the response
        HTTP::Request->new(GET => “http://osdc.tw”),
      );
    },
    _stop => sub {},
    response => &response_handler,
  },
);

POE::Kernel->run();
exit;

sub response_handler {
  my ($request_packet, $response_packet) = @_[ARG0, ARG1];
  my $request_object = $request_packet->[0];
  my $response_object = $response_packet->[0];
}

use AnyEvent::HTTP;

http_get "http://yapc.asia/",
sub { print $_[1] };

☺

AnyEvent::*
AnyEvent-AIO AnyEvent-APNS AnyEvent-Atom-Stream AnyEvent-BDB AnyEvent-
Beanstalk AnyEvent-Connection AnyEvent-CouchDB AnyEvent-DBI AnyEvent-DBI-
Abstract AnyEvent-EditText AnyEvent-FCGI AnyEvent-FCP AnyEvent-FIFO AnyEvent-
FastPing AnyEvent-Feed AnyEvent-Filesys-Notify AnyEvent-FriendFeed-Realtime
AnyEvent-GPSD AnyEvent-Gearman AnyEvent-Gearman AnyEvent-Gmail-Feed
AnyEvent-HTTP AnyEvent-HTTP-MXHR AnyEvent-HTTPD AnyEvent-I3 AnyEvent-IRC
AnyEvent-JSONRPC-Lite AnyEvent-Kanye AnyEvent-MP AnyEvent-MPRPC AnyEvent-
Memcached AnyEvent-Mojo AnyEvent-Monitor-CPU AnyEvent-Pcap AnyEvent-Plurk
AnyEvent-Postﬁx-Logs AnyEvent-RTPG AnyEvent-Redis AnyEvent-RetryTimer
AnyEvent-ReverseHTTP AnyEvent-Riak AnyEvent-Run AnyEvent-SCGI AnyEvent-SMTP
AnyEvent-SNMP AnyEvent-Subprocess AnyEvent-Superfeedr AnyEvent-Twitter
AnyEvent-Twitter-Stream AnyEvent-Watchdog AnyEvent-Worker AnyEvent-XMLRPC
AnyEvent-XMPP AnyEvent-mDNS

AnyMQ
• Tatsumaki::MessageQueue

AnyMQ
•

AnyMQ
•

• Moose

AnyMQ

my $bus = AnyMQ->new;
my $topic = $bus->topic("Foo");

my $sub = $bus->new_listener($topic);
$sub->poll(sub { my $msg = shift; })

$topic->publish($msg)

AnyMQ with AMQP
my $bus = AnyMQ->new_with_traits
( traits => [ ‘AMQP’],
# host => ..., port => ..);
my $topic = $bus->topic("Foo");

my $sub = $bus->new_listener($topic);
$sub->poll(sub { my $msg = shift; })

$topic->publish($msg)

AnyMQ with AMQP
my $bus = AnyMQ->new_with_traits my $bus = AnyMQ->new_with_traits
( traits => [ ‘AMQP’], ( traits => [ ‘AMQP’],
# host => ..., port => ..); # host => ..., port => ..);
my $topic = $bus->topic("Foo"); my $topic = $bus->topic("Foo");

my $sub = $bus->new_listener($topic); my $sub = $bus->new_listener($topic);
$sub->poll(sub { my $msg = shift; }) $sub->poll(sub { my $msg = shift; })

$topic->publish($msg) $topic->publish($msg)




AnyMQ with AMQP


AMQP
Server



Comet
The word comet came to English by way of the Latin word cometes. This word, in turn, came
from the Greek word κόμη, which means "hair of the head". The Greek scientist and
philosopher Aristotleﬁrst used the derived form of κόμη, κομήτης, to describe what he saw
as "stars with hair." Theastronomical symbol for comets is (☄), consisting of a small disc with
three hairlike extensions.

-

Comet
The word comet came to English by way of the Latin word cometes. This word, in turn, came
from the Greek word κόμη, which means "hair of the head". The Greek scientist and
philosopher Aristotleﬁrst used the derived form of κόμη, κομήτης, to describe what he saw
as "stars with hair." Theastronomical symbol for comets is (☄), consisting of a small disc with
three hairlike extensions.

-
• 2006

•

• gmail
• twitter
• facebook updates

!

• XHR

• iframe

• FF IE

•

ws://example.com

wss://example.com

Request:
GET /demo HTTP/1.1
Host: example.com
Connection: Upgrade
Sec-WebSocket-Key2: 12998 5 Y3 1 .P00
Sec-WebSocket-Protocol: sample
Upgrade: WebSocket
Sec-WebSocket-Key1: 4 @1 46546xW%0l 1 5
Origin: http://example.com

^n:ds[4U

Request:
GET /demo HTTP/1.1
Host: example.com
Connection: Upgrade
Upgrade: WebSocket

^n:ds[4U Response:
HTTP/1.1 101 WebSocket Protocol Handshake
Upgrade: WebSocket
Connection: Upgrade
Sec-WebSocket-Origin: http://example.com
Sec-WebSocket-Location: ws://example.com/demo

8jKS'y:G*Co,Wxa-

Request:
GET /demo HTTP/1.1
Host: example.com
Connection: Upgrade
Upgrade: WebSocket
New in draft#76
^n:ds[4U Response:
HTTP/1.1 101 WebSocket Protocol Handshake
Upgrade: WebSocket
Connection: Upgrade
Sec-WebSocket-Origin: http://example.com
Sec-WebSocket-Location: ws://example.com/demo

8jKS'y:G*Co,Wxa-

my @keys = map {
my $k = $env>{'HTTP_SEC_WEBSOCKET_KEY'.$_};
join('', $k =~ m/d/g) / scalar @{[$k =~ m/ /g]};
} (1,2);

md5(pack('NN', @keys) . $key3);

Messages surrounded
by x{00} and x{ff}

Websockets API

ws = new WebSocket("ws://foo.com:5000”));

ws.onopen = function(ev) { ... }
ws.onmessage = function(ev) { ... }
ws.onclose = function(ev) { ... }
ws.onerror = function(ev) { ... }

ws.send(....);

Websockets API

ws = new WebSocket("ws://foo.com:5000”));

ws.onopen = function(ev) { ... }
ws.onmessage = function(ev) { ... }
ws.onclose = function(ev) { ... }
ws.onerror = function(ev) { ... }

ws.send(....);
Can accept cross-site connection with Origin and Sec-
WebSocket-Origin headers

• : Websocket, MXHR

enable "+Web::Hippie";
sub { my $env = shift;
my $args = $env->{'hippie.args'};
my $handle = $env->{'hippie.handle'};

# Your handler based on PATH_INFO:
# /init, /error, /message
}

Just a normal PSGI-app!

}

mount it to /_hippie

}

Must use PSGI servers supporting
psgi.nonblocking:

Must use PSGI servers supporting
psgi.nonblocking:

twiggy
feersum

Hippie::Pipe
• :
Websocket MXHR poll AnyMQ support

Hippie::Pipe
• :
Websocket MXHR poll AnyMQ support
enable "+Web::Hippie::Pipe", bus => AnyMQ->new;
my $sub = $env->{'hippie.listener'};
my $bus = $env->{'hippie.bus'};
my $msg = $env->{'hippie.message'};
# /new_listener, /error, /message
}

Hippie::Pipe(Cont.)
my $topic = $bus->topic(‘news’);
# my $sub = $env->{'hippie.listener'};
if ($env->{PATH_INFO} eq ‘/new_listener’) {
$sub->subscribe($topic);
}

# $topic->publish({type => ‘news.yapc’,
message => ‘something’});

hpipe = new Hippie.Pipe();
$(hpipe)
.bind(“ready”, function() {
hpipe.send({type: ‘news.viewer’,
ident: ‘clkao’})
})
.bind(“disconnected”, function() {})
.bind(“message.news.yapc”,
function(e, data) {});
hpipe.init();

hpipe = new Hippie.Pipe();
$(hpipe)
.bind(“ready”, function() {
hpipe.send
hpipe.send({type: ‘news.viewer’,
ident: ‘clkao’})
})
.bind(“disconnected”, function() {})
.bind(“message.news.yapc”,
function(e, data) {});
hpipe.init();

Hippie::Pipe(Cont.)
# my $msg = $env->{'hippie.message'};

if ($env->{PATH_INFO} eq ‘/message’) {
if ($msg->{type} eq ‘news.viewer’) {
$topic->publish({type => ‘news.viewer’,
user => $msg->{user});
}
}

Hippie::Pipe(Cont.)
# my $msg = $env->{'hippie.message'};

if ($env->{PATH_INFO} eq ‘/message’) {
if ($msg->{type} eq ‘news.viewer’) {
$topic->publish({type => ‘news.viewer’,
user => $msg->{user});
}
}
# Client:
# bind(“message.news.viewer”, function(){..})

DEMO
at Jesse’s Talk 12:00
today

Thank you!
special thanks to Ishigaki-san and
Danjou-san for translations

AnyMQ, Hippie, and the real-time web

More Related Content

What's hot (20)

Similar to AnyMQ, Hippie, and the real-time web (20)

More from clkao (8)

Recently uploaded (20)

AnyMQ, Hippie, and the real-time web

Editor's Notes