Dancing with websocket

1. Dancing with websockets

2. Dancer • You’ve heard about it • It’s simple, powerful, ﬂexible

3. This talk • Not an hello world • real life example • unusual web app • unusual technologies • goal: show easiness

4. The background

5. At $company, • Many Perl products • Lot of modules + deps • Come from CPAN

6. But, • CPAN = moving target • need to stay stable • local CPAN mirror • but we need to catch up, sometimes

7. • We have a CLI injecter • We want a web injecter • Let’s see the process

8. 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

9. no user no database but, no session a forking process

10. 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

11. W Status ire fra input me schedule conﬁrm cancel logs

12. 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

13. 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

14. 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

15. forked injection AnyEvent run_cmd process WebSocket logs + status javascript status server process logs server side client side

16. Show me the GUI

17. Show me the code

18. 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

19. 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...

20. 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 })); }

21. 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>' ); }

22. 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 }; }

23. 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(); }

24. 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"; } }}); }

25. Show me the video

Dancing with websocket

Du liest eine Vorschau.

Hier ansehen

Dancing with websocket

Weitere Verwandte Inhalte

Diashows für Sie (20)

Ähnlich wie Dancing with websocket (20)

Weitere von Damien Krotkine (6)

Aktuellste (20)