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.
Abbildung 2: Die HTML-Tabelle aus Listing 3, wie sie im Webbrowser aussieht.
Abbildung 3: Das Tortendiagramm aus Listing 3 in der Browseransicht.
Abbildung 4: Diese HTML-Tabelle dient als Datenbasis für Visualize-Diagramme.
Abbildung 5: Aus den Daten in Abbildung 4 entsteht ein Balkendiagramm.
Abbildung 6: Die Webstatistik als Bereichsdiagramm.
Abbildung 7: Auch das Liniendiagramm gehört zum Visualize-Repertoire.
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.
Abbildung 8: Websockets (links) und HTTP (rechts) im Vergleich: Websockets nutzen die bestehende TCP/IP-Verbindung für die gesamte Sitzung.
Diesen Artikel als PDF kaufen
Express-Kauf als PDF
Umfang: 6 Heftseiten
Preis € 0,99
(inkl. 19% MwSt.)
Als digitales Abo
Weitere Produkte im Medialinx Shop »
Versandartikel
Onlineartikel
Alle Rezensionen aus dem Linux-Magazin
- Buecher/07 Bücher über 3-D-Programmierung sowie die Sprache Dart
- Buecher/06 Bücher über Map-Reduce und über die Sprache Erlang
- Buecher/05 Bücher über Scala und über Suchmaschinen-Optimierung
- Buecher/04 Bücher über Metasploit sowie über Erlang/OTP
- Buecher/03 Bücher über die LPI-Level-2-Zertifizierung
- Buecher/02 Bücher über Node.js und über nebenläufige Programmierung
- Buecher/01 Bücher über Linux-HA sowie über PHP-Webprogrammierung
- Buecher/12 Bücher über HTML-5-Apps sowie Computer Vision mit Python
- Buecher/11 Bücher über Statistik sowie über C++-Metaprogrammierung
- Buecher/10 Bücher zu PHP-Webbots sowie zur Emacs-Programmierung
Insecurity Bulletin
Im Insecurity Bulletin widmet sich Mark Vogelsberger aktuellen Sicherheitslücken sowie Hintergründen und Security-Grundlagen. mehr...