Open Source im professionellen Einsatz
Linux-Magazin 08/2011
© picsfive, 123RF.com

© picsfive, 123RF.com

Perl-Skript nutzt neue HTML-5-Features

Gleich spricht er

HTML 5 bringt Websockets, über die Webserver mit ihren Clients in einen Dialog treten können. Die im Folgenden vorgestellte kleine Webapplikation zeigt in Echtzeit im Browser, welche Seiten beliebige User von einem Webserver im Moment aufrufen.

695

Statt des simplen Frage-Antwort-Spiels im traditionellen HTTP-Protokoll versetzen die im HTML-5-Standard enthaltenen Websockets jeden neueren Standardbrowser in die Lage, über persistente Verbindungen bidirektional mit dem Webserver zu kommunizieren.

Dazu nimmt Javascript-Code auf einer heruntergeladenen Seite im Browser eine Websocket-Verbindung zur URL »ws://Server/Pfad« auf und definiert einen Callback, den der Code jedes Mal sofort anspringt, sobald der Server eine Nachricht über den Socket sendet. Die Browserapplikation reagiert damit sofort auf Signale des Servers, ohne ihn in regelmäßigen Abständen pollen zu müssen.

Kann's der Browser?

Ob ein Browser Websockets unterstützt, lässt sich in Javascript leicht feststellen: Nur falls das DOM-Element »window.WebSocket« existiert, sind Websockets implementiert und aktiviert. Die Webseite Websocket.org bietet auf [2] eine kleine Applikation, die die Browserfertigkeiten mit grüner oder oranger Farbe anzeigt und mit einer kleinen Echo-Applikation zum Spielen anregt. Die Abbildungen 1 und 2 zeigen Firefox 4 erst mit deaktiviertem, dann mit aktiviertem Websocket-Modus.

Abbildung 2: Aktiviert der User die im Abschnitt "Sicherheitslücken" weiter unten erklärte Konfiguration, nutzt Firefox 4 das Websocket-API nach dem alten Protokoll.

Abbildung 1: Websocket.org bestätigt, dass Firefox 4 ohne network.websocket.enabled nicht über Websockets kommunizieren kann. Hier ist also erst ein Eingriff des Benutzers erforderlich, um die fragliche Fähigkeit zu aktivieren.

Derzeit unterstützen nur Firefox 4 und Google Chrome das Protokoll zumindest eingeschränkt (siehe Abschnitt "Sicherheitslücken" weiter unten), für eine vollständige Implementierung nach dem neuesten Standard muss es sogar Firefox 6 (Aurora) sein.

Websockets im Test

Abbildung 3 zeigt eine Testapplikation, bei der der Browser in unregelmäßigen Abständen absteigende Zählerwerte vom Server empfängt. Der Server zählt dabei von 10 an abwärts, schickt den jeweiligen Zählerstand über einen Websocket zur dargestellten Browserseite und schläft einen per »rand()« gesteuerten zufälligen Sekundenbruchteil lang bis zum nächsten Schleifendurchgang. Bei Null angelangt, sendet der Server statt einer Ziffer die Zeichenkette »BOOM!« und beendet sofort darauf die Websocket-Kommunikation. Im Browser erscheinen die Nachrichten des Servers verzögerungsfrei und in Echtzeit, an die Applikation ausgeliefert über einen effizienten Callback-Mechanismus, der funktioniert, ohne dass der Client jedes Mal um Nachschlag bitten müsste.

Abbildung 3: Das Websocket-Testskript zählt einen ruckelnden Countdown.

Zum Implementieren des Testservers greift Listing 1 auf das bereits im vorigen Snapshot vorgestellte Framework Mojolicious::Lite zu, mit dem experimentierfreudige Programmierer in Minuten ganze Webapplikationen zusammenklopfen können. Es unterstützt neben normalen Webprotokollen auch Websockets und hält den Zustand jedes Websocket-Clients mittels einer Closure im Speicher.

Listing 1

cntdwn-random

01 #!/usr/local/bin/perl -w
02 use strict;
03 use Mojolicious::Lite;
04 use Mojo::IOLoop;
05
06 my $listen = "http://localhost:8083";
07 @ARGV = (qw(daemon --listen), $listen);
08
09 my $loop = Mojo::IOLoop->singleton();
10
11 ###########################################
12 websocket "/myws" => sub {
13 ###########################################
14   my($self) = @_;
15
16   my $timer_cb;
17   my $counter = 10;
18
19   $timer_cb = sub {
20     $self->send_message( "$counter" );
21     if( $counter-- > 0 ) {
22         $loop->timer(rand(1), $timer_cb);
23     } else {
24         $self->send_message( "BOOM!" );
25     }
26   };
27
28   $timer_cb->();
29 };
30
31 ###########################################
32 get '/' => sub {
33 ###########################################
34   my ($self) = @_;
35
36   ( my $ws_url = $listen ) =~ s/^http/ws/;
37   $ws_url .= "/myws";
38   $self->{stash}->{ws_url} = $ws_url;
39 } => 'index';
40
41 app->start();
42
43 __DATA__
44 @@ index.html.ep
45 % layout 'default';
46 Random counter:
47 <font size=+2 id="counter"></font>
48
49 @@ layouts/default.html.ep
50 <!doctype html><html>
51   <head><title>Random Countdown</title>
52     <script type="text/Javascript">
53       var socket = new WebSocket(
54                      "<%== $ws_url %>" );
55       socket.onmessage = function (msg) {
56         document.getElementById(
57           "counter").innerHTML = msg.data;
58       };
59     </script>
60   </head>
61   <body> <%== content %> </body>
62 </html>

Die Eventschleife Mojo::IOLoop bietet einer Applikation ein Timer-gesteuertes Hook-Framework, um in einem laufenden Mojolicious-Prozess hin und wieder die Kontrolle zu erlangen, kleine Aufgaben zu erledigen und das nächste Update zu planen.

Statt eines Konstruktors »new()« nutzt Zeile 9 die Methode »singleton()« , die eine weitere Referenz auf eine Eventschleife liefert, falls vorher schon eine definiert war. Das ist wichtig, denn verschiedene Eventschleifen würden jeweils ihre Vorgänger auslöschen.

Diesen Artikel als PDF kaufen

Express-Kauf als PDF

Umfang: 5 Heftseiten

Preis € 0,99
(inkl. 19% MwSt.)

Linux-Magazin kaufen

Einzelne Ausgabe
 
Abonnements
 
TABLET & SMARTPHONE APPS
Bald erhältlich
Get it on Google Play

Deutschland

Ähnliche Artikel

  • Galileo Send: Dateien per Websockets übertragen

    Der Entwickler Joel Berger hat ein neues Protokoll namens Galileo Send vorgestellt, mit dem sich Dateien über Websockets übertragen lassen.

  • WebSocket4J 1.2 implementiert Client und Server

    Websocket4J, eine freie Umsetzung des bidirektionalen Websocket-Protokolls in Java, ist in Version 1.2 erhältlich. Erstmals setzt sie neben dem Server auch den Client-Part um.

  • HTML 5

    Dank HTML 5 lassen sich Client-Server-Anwendungen mit grafischer Oberfläche programmieren, wie sie das Web bisher nicht kannte. Dieser Artikel zeigt, wie das mit Canvas, SVG und Websockets geht. Die Bibliotheken Jquery, Visualize und Autobahn helfen bei der Arbeit.

  • Websockets

    Wer den Raspberry Pi über eine Android-App zum Tanz auffordern möchte, bringt am besten Websockets mit auf den Ball. Sie erleichtern die gepflegte Konversation mit dem graziösen Minirechner.

  • Screencast: Webanwendungen mit Websockets

    In einem Screencast zum Linux-Magazin-Artikel "Blühende Oberflächen" zeigt der Autor Andreas Möller Server- und Client-Komponente für die Anwendung.

comments powered by Disqus

Ausgabe 09/2017

Artikelserien und interessante Workshops aus dem Magazin können Sie hier als Bundle erwerben.