Open Source im professionellen Einsatz
Linux-Magazin 01/2012
757

Torten oder Balken

Die Listings 2 und 3 erzeugen für jede Tabelle der Klasse »pie« ein Tortendiagramm. Als ersten Parameter erwartet die Funktion »visualize()« ein Objekt mit Konfigurationsparametern. Den Diagrammtyp gibt »type« an (»pie« , »line« , »area« , »bar« ). Die Breite ist durch »width« , die Höhe durch »height« definiert.

Listing 2

Tortendiagramm mit Visualize

01 $('table.pie').visualize({type: 'pie', pieMargin: 10});

Der Parameter »parseDirection« legt fest, wie Visualize die Werte in der Tabelle interpretiert: In der Standardeinstellung »parseDirection=x« entnimmt es die Werte einer Datenreihe jeweils aus einer Zeile, bei »y« aus einer Spalte. Die erste Zelle bezeichnet die Datenreihe (etwa »Winter« in Listing 3). Visualize bietet noch eine Vielzahl weiterer Optionen [9]. Es kann auch Datenreihen filtern oder das Diagramm auf einen Auslöser (Trigger) hin aktualisieren. Wer sich ein Bild vom Funktionsumfang machen möchte, sollte die Beispiele aus der Distribution und den Quellcode der Bibliothek »visualize.jQuery.js« lesen.

Listing 3

Visualize-Beispiel

01 <!DOCTYPE HTML>
02 <html>
03 <head>
04   <link rel="stylesheet" href="css/combined.css"/>
05   <script src="js/jquery.min.js"></script>
06   <script src="js/visualize.jQuery.js"></script>
07   <script>
08     $(document).ready(function(){
09       $('table.pie').visualize({type: 'pie', pieMargin: 10});
10     });
11   </script>
12 </head>
13 <body>
14 <table class="pie">
15   <caption>Seitenaufrufe pro Jahreszeit</caption>
16   <thead>
17     <tr><td></td><th>Visits</th></tr>
18   </thead>
19   <tbody>
20   <tr><th>Winter</th><td>1100</td></tr>
21   <tr><th>Frühling</th><td>1100</td></tr>
22   <tr><th>Sommer</th><td>866</td></tr>
23   <tr><th>Herbst</th><td>1000</td></tr>
24   </tbody>
25 </table>
26 </body>
27 </html>

In Listing 3 wartet die Jquery-Methode »ready()« mit der Ausführung der übergebenen Funktion, bis das HTML-Dokument vollständig geladen ist. Abbildung 2 zeigt die HTML-Tabelle, Abbildung 3 das mit Visualize erzeugte Diagramm. In Abbildung 4 ist eine weitere HTML-Tabelle zu sehen, die Abbildungen 5 bis 7 zeigen die Visualisierung als Balken-, Bereichs- und Liniendiagramm.

Um das Übermitteln von Webseiten kümmert sich das HTTP-Protokoll: Der Client stellt eine Anfrage (Request) an einen HTTP-Server und erhält eine Antwort (Response). Deshalb blieben bisher Zustandsänderungen eines Dienstes so lange unbemerkt, bis der Client den Zustand vom HTTP-Server abfragte.

Gute Unterhaltung

Websockets [10] verwandeln nun das einseitige Frage-und-Antwort-Spiel zwischen Client und Server in bidirektionale Kommunikation. Zur Eröffnung eines Websockets sendet der Client dem Server eine Anfrage mittels HTTP (Listing 4). Erwidert der Server diese Anfrage mit einem Handschlag (Listing 5), so treten Client und Server in Verbindung – falls der Server in seinem Handshake die korrekte Antwort auf den mitgeschickten Websocket-Key gegeben hat.

Listing 4

Websocket-Anfrage des Clients

01 GET /chat HTTP/1.1
02 Host: server.example.com
03 Upgrade: websocket
04 Connection: Upgrade
05 Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
06 Origin: http://example.com
07 Sec-WebSocket-Protocol: chat, superchat
08 Sec-WebSocket-Version: 13

Listing 5

Server bestätigt Verbindung

01 HTTP/1.1 101 Switching Protocols
02 Upgrade: websocket
03 Connection: Upgrade
04 Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=

Dazu hängt der Server an den generierten zufälligen Client-Key den Globally Unique Identifier (GUID) »258EAFA5-E914-47DA-95CA-C5AB0DC85B11« an, bildet den Hashwert des Resultats und schickt ihn Base-64-kodiert zurück. So beweist er dem Client, dass ein geeigneter Endpunkt die Daten verarbeitet hat.

Die Kopfzeilen markieren außerdem das letzte Paket einer Nachricht, übertragen einen Schlüssel für die Maskierung der Daten und geben die Länge an. Für Nachrichten vom Typ Text wird eine Byte-Folge gemäß dem UTF-8-Zeichensatz erwartet. Wie bei HTTP lässt sich die Übertragung per SSL schützen.

Nach dem Beenden der Verbindung wird auch die TCP/IP-Verbindung wieder abgebaut. Abbildung 8 zeigt einen Vergleich der Protokolle Websockets und HTTP. Die Kommunikation des verbindungslosen HTTP-Protokolls ist nach der Antwort (Response) des HTTP-Servers beendet. Das Websocket-Protokoll hingegen durchläuft eine Serie von Zuständen, in denen die zugrunde liegende TCP/IP-Verbindung bis zum Erreichen des Zustands »closed« erhalten bleibt. Die Festschreibung des Websocket-Protokolls auf Basis eines RFC befindet sich derzeit noch in der Entwurfsphase.

Linux-Magazin kaufen

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

Deutschland

Ähnliche Artikel

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

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

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

  • Leserbriefe

    Haben Sie Anregungen, Statements oder Kommentare? Dann schreiben Sie an redaktion@linux-magazin.de. Die Redaktion behält es sich vor, die Zuschriften und Leserbriefe zu kürzen. Sie veröffentlicht alle Beiträge mit Namen, sofern der Autor nicht ausdrücklich Anonymität wünscht.

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

comments powered by Disqus

Ausgabe 09/2017

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