Dancing with websocket

Dancer

• You’ve heard about it

• It’s simple, powerful,
ﬂexible

This talk
• Not an hello world

• real life example

• unusual web app

• unusual technologies

• goal: show easiness

At $company,

• Many Perl products

• Lot of modules + deps

• Come from CPAN

But,

• CPAN = moving target

• need to stay stable

• local CPAN mirror

• but we need to catch up,
sometimes

• We have a CLI injecter

• We want a web injecter

• Let’s see the process

The process

• mirror created with minicpan
• it’s «single threaded»
• managed with CPAN::Mini
• one mirror at a time
• injecting = calling
• one injection at a time
CPAN::Mini::Inject::inject
• one command to perform
• with the mirror’s conﬁg ﬁle

no user no database

but,
no session
a forking process

The web interface
• everything on a single page

• input a string, verify

• get corresponding CPAN module

• check there is a newer version

• conﬁrm/cancel

• inject the module in the mirror

• display the process log

• keep track of the log and the status

W
Status ire
fra
input me
schedule conﬁrm cancel

logs

Technologies
We need We choose

• « instantaneous » update
of the logs • WebSockets

• every user see the same • Event programming
thing
• MetaCPAN::API
• info about the module

Dancer in one sentence
• « Dancer allows you to easily create web applications where you
can associate http routes to code, which usually end up sending
back data via a template engine »

• dancer -a plop creates a new application

• templating system:

• a layout, with a [% content %] placeholder

• views, template page, that are injected as content

WebSocket
• What are WebSockets ? bidirectional web communication

• The server can push to the client (e.g. add more log lines)

• Dancer::Plugin::WebSocket

• uses Web::Hippie, websocket/comet Plack implementation

• which uses AnyEvent

• so we need an AnyEvent Plack web server : Twiggy

forked injection AnyEvent run_cmd
process WebSocket
logs + status javascript

status
server process
logs

server side client side

bin/app.pl conﬁg.yml
use Dancer; layout: "main"
use My::Mirror::Injector; template: "template_toolkit"
dance; engines:
template_toolkit:
encoding: 'utf8'
views/layouts/main.tt start_tag: '[%'
<html> end_tag: '%]'
<head>
<title>My cool Injector</title>
<script src="...">jquery</script>
</head>
<body>
[% content %]
</body>
</html>
launch.sh
plackup -s Twiggy ./bin/app.pl -p 5005

views/index.tt
<b>Status</b> : <span id="status">
<span id="status_text">[% status %]</span>
</span>

<form action="/" method="post">
Module names (space seperated):
<input type="text" name="module_name"
value="[% module_name %]">
<br/>
<input type="submit" name="schedule" value="Schedule">
<input type="submit" name="confirm" value="Confirm">
<input type="submit" name="cancel" value="Cancel">
</form>

<pre>
<div id="injection_log">[% log %]</div>
</pre>

then some javascript...

setup the websocket, handle logs

var socket = new WebSocket(
"ws://[% server_host %]:[% server_port %]/_hippie/ws"
);

socket.onmessage = function(e) {
var data = JSON.parse(e.data);
if (data.msg) {
$('#injection_log').append(data.msg);
}
};

function send_msg(message) {
socket.send(JSON.stringify({ msg: message }));
}

handle status change

var status_regex = /__STATUS_CHANGED:/;
if (status_regex.test(data.msg)) {
var new_status = data.msg;
new_status
= new_status.replace(/__STATUS_CHANGED:(.*)__/, "$1");
$('#status_text').remove();
$('#status').append(
'<span id="status_text">' + new_status + '</span>'
);
}

package My::Mirror::Injector;
use Dancer;
use Dancer::Plugin::FlashMessage; # for status message
use Dancer::Plugin::WebSocket; # for WebSocket write
use AnyEvent::Util; # for run_cmd

my $status = 0;
my $log = ''; # OMG GLOBAL VARIABLES !!!111
my $module_name;

get '/' => &display_page;
sub display_page {
my $uri = request->uri_base; my $scheme = request->scheme;
my $host = $uri =~ m|$scheme://(.*?):|;
template index => {
status => $status,
module_name => $module_name,
server_host => $host,
server_port => request->port,
log => $log
};
}

post '/' => sub {
param 'confirm' or $module_name = param 'module_name';

if (defined param 'schedule') {
$status = 1; flash info => "Scheduled injection";
$log = '';
launch_command(
"mirror-inject --autoflush --dryrun --module $module_name"
);
} elsif (defined param 'confirm') {
# Same, but status = 2
# and run command with no --dryrun
} elsif (defined param 'cancel') {
# User clicked on Cancel
$status = 0;
flash info => "Cancelled injection";
}
display_page();
}

my $next_status;
sub launch_command {
my ($cmd) = @_;
run_cmd( $cmd ,
'>' => sub {
my ($data) = @_;
if ( defined $data ) {
$data =~ s/__CONFIRM__// and $next_status = 2;
$data =~ s/__FINISHED__// and $next_status = 0;
$log .= $data;
ws_send $data;
} else {
# End of execution
if (defined $next_status) {
$status = $next_status;
$next_status = undef;
ws_send '__STATUS_CHANGED:' . $status . "__n";
}
}});
}

Dancing with websocket

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Dancing with websocket

Similar to Dancing with websocket (20)

More from Damien Krotkine

More from Damien Krotkine (6)

Recently uploaded

Recently uploaded (20)

Dancing with websocket

Editor's Notes