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.
Die neue Generation der Hypertext Markup Language heißt HTML 5 [1] und ist mehr als nur eine Auszeichnungssprache. Im Zuge ihrer Spezifikation ist eine Reihe von Technologien entstanden, die Webanwendungen einen Innovationsschub bescheren. Besonders vielversprechend sind das Element Canvas und das Websocket-Protokoll.
Canvas eröffnet die Möglichkeit, Grafiken mittels Javascript zu zeichnen – und das Hardware-beschleunigt. So lassen sich beispielsweise Diagramme aus Benutzereingaben oder veränderlichen Daten direkt im Browser generieren. Dank des Websocket-Protokolls können Server und Browser sich unabhängig voneinander Nachrichten schicken. Damit lösen Websockets das einseitige Frage-und-Antwort-Spiel zwischen Client und Server gemäß HTTP-Protokoll ab. Diese Starrheit war bisher ein Hemmnis für alle Anwendungsfälle, in denen der Client auf eine Statusänderung der Servers wartet, etwa bei einem Chat.
Online PLUS
Einen Screencast zur Arbeit mit Websockets finden Sie unter https://www.linux-magazin.de/plus/2012/01.
GUI mit Socket
Dieser Artikel demonstriert die Techniken anhand eines Beispiels, das die Speicherauslastung eines entfernten Servers grafisch im Browser anzeigt. Dabei kommen Canvas für die Grafik und Websockets als Netzwerkprotokoll zum Einsatz. Außerdem zeigen die praktischen Bibliotheken Visualize und Autobahn, was sie können. Das HTML-5-Element Canvas [2] liefert eine bemalbare Leinwand, als Zeichenwerkzeug dient Javascript. Dabei sind verschiedene Maltechniken, Kontexte genannt, im Angebot. Derzeit gibt es einen Kontext zum Zeichnen in zwei Dimensionen [3] sowie einen für drei Dimensionen: Web GL [4].
Das Ergebnis ist eine rechteckige Leinwand aus kleinen, eingefärbten Quadraten – eine Bitmapgrafik. Sie ist allerdings nicht skalierbar. Diesem Mangel begegnet aber ein anderes HTML-5-Feature: Es besteht die Möglichkeit, SVG-Grafiken in Dokumente einzubetten. SVG, Scalable Vector Graphics [5], ist ein XML-Vokabular für die Beschreibung von Vektorgrafiken.
Canvas wie auch SVG nutzen ähnliche Konzepte, um Grafiken aufzubauen. Sie können beispielsweise Pfade mit geraden oder gebogenen Begrenzungen anlegen, schließen, füllen und umranden. Das Bitmapverfahren überträgt das Bild einmalig auf eine Leinwand mit einer festen Anzahl von Quadraten (feste Auflösung). Es färbt dabei durch Maloperationen eingeschlossene oder überstrichene Quadrate ein.
Die Vektorgrafik dagegen wird auf eine Leinwand mit einer variablen Anzahl von Quadraten skalierbar gemalt. Listing 1 zeichnet zweimal den gleichen Kegel, per Canvas und per SVG. Die Ausführung der Canvas-Grafik geschieht im »script« -Bereich des HTML-Dokuments. Nach Auswahl des Canvas-Elements selektiert der Javascript-Code den »2d« -Kontext und zeichnet.
Listing 1
Kegel-Grafik mittels Canvas und SVG
01 <!DOCTYPE HTML>
02 <html>
03 <head>
04 <script>
05 window.onload = function() {
06 var cv = document.getElementsByTagName("canvas")[0];
07 cv.width = cv.height = 25;
08 var ctx = cv.getContext("2d");
09 ctx.beginPath();
10 ctx.fillStyle='#0000ff';
11 ctx.moveTo(10, 0);
12 ctx.lineTo(0, 20);
13 ctx.quadraticCurveTo(10,25,20,20)
14 ctx.closePath();
15 ctx.fill();
16 }
17 </script>
18 </head>
19 <body>
20 <canvas></canvas>
21 <svg><path fill="#0000ff" d="M10,0 L0,20 Q10,25 20,20 Z"/></svg>
22 </body>
23 </html>
Die SVG-Grafik dagegen ist nach dem Canvas-Element im Körper des HTML-Dokuments eingebettet. Die Pfadbeschreibung »d=”M10,0 L0,20 Q10,25 20,20 Z”« fällt im Vergleich zu den Canvas-Befehlen äußerst kompakt aus. Die Buchstaben der Maloperation entsprechen ungefähr den Canvas-Funktionsaufrufen. Die Ausgabe ist in Abbildung 1 zu sehen, die beim genauen Hinsehen den Qualitätsunterschied offenbart.
Effekte
Neben Pfaden bieten der 2-D-Kontext von Canvas und SVG noch viele weitere Gestaltungsmöglichkeiten, beispielsweise Farbverläufe, Schatten, Transparenzeffekte, Gruppierungen, Transformationen sowie einfache Formen wie Quadrate, Kreisbögen, kubische und quadratische Bézierkurven (Splines). Canvas-2-D kann Grafiken zudem Pixel für Pixel behandeln. Einen sehr guten Einblick in die Verwendung des Canvas-Elements und von SVG in HTML 5 gibt Peter Kreußels Artikel “Malkasten” aus dem Linux-Magazin 11/11 [6].
Dem sei noch hinzugefügt, dass beim Canvas-Element in HTML 5 alle Browser erstmals von Hardwarebeschleunigung Gebrauch machen. Die Rechenoperationen für Grafiken laufen dabei auf der Grafikkarte statt auf der CPU ab. Zudem referenziert die HTML-5-Spezifikation SVG 1.2 (Tiny). Tiny ist eine Teilmenge von SVG 1.1. Dieses Profil wurde mit Rücksicht auf die einheitliche Verwendbarkeit von SVG auf vielen Geräteklassen zusammengestellt.
Obwohl die Spezifikation von HTML 5 noch nicht abgeschlossen ist, gibt es bereits Anwendungen für das Canvas-Element. Ein gutes Beispiel ist das Jquery-Plugin Visualize [7], das aus HTML-Tabellen automatisch Diagramme erzeugt. Visualize ist ein Plugin für die Javascript-Bibliothek Jquery [8]. Sie verdeckt viele Schwächen von Javascript und unterstützt neuere Versionen gängiger Webbrowser wie Firefox 2.0+, Google Chrome, Opera 9.0+, Safari 3.0+ und Microsofts Internet Explorer 6.0+.
Die Bibliothek adressiert die Elemente eines HTML-Dokuments mittels der kompakten CSS-Selektoren anstelle der schwer handhabbaren DOM-Schnittstelle und bietet für die so ausgewählten Elemente eine Vielzahl praktischer Funktionen. Unter anderem vereinfacht Jquery die Ereignis-Behandlung, ermöglicht Animationen und bietet Ajax-Methoden. Beispielsweise kann der Programmierer mit dem kompakten Ausdruck
$('.story').click(function() {alert($(this).text())})
für jedes HTML-Element mit der Eigenschaft »class=”story”« einen Eventhandler vereinbaren. Klickt der Anwender dann auf eines dieser Elemente, hebt Javascript dessen Inhalt mit einer Meldung hervor.
Getreu dem Motto “Write less, do more” verwendet die Bibliothek für Methoden einfache Bezeichner wie »each()« , »map()« , »click()« oder »bind()« . Zusätzlich ist Jquery durch eine Vielzahl von Plugins erweiterbar. Die Bibliothek wurde für den Einsatz in der Produktion bestmöglich komprimiert. Außerdem unterstützt Jquery den Standard CSS 3. Jquery und Visualize sind unter MIT- sowie GPL-Lizenz verfügbar.
Um ein Diagramm mittels Visualize darzustellen, wendet der Webentwickler die gleichnamige Methode auf eine Menge von mit Jquery ausgewählten Tabellen an. Für jede Tabelle liest Visualize die Daten aus und erstellt daraus ein Linien-, Torten-, Bereichs- oder Balken-Diagramm. Dazu zeichnet Jquery das Diagramm in ein Canvas-Element, das es standardmäßig nach der Tabelle einfügt. Die Form der Diagramme lässt sich durch Parameter des Funktionsaufrufs sowie durch CSS-Regeln beeinflussen.
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.
Sockets per Javascript
HTML-5-Dokumente bieten eine Schnittstelle [11], um Websockets mit Javascript zu nutzen. Um ein Websocket-Objekt in Javascript zu initialisieren, muss der Programmierer die Adresse des Websocket-Servers angegeben. Websocket-Server adressiert man mit URLs, anstelle des »http« steht jedoch der Schemabezeichner »ws« am Anfang, etwa in »ws://localhost:9000« in Listing 6.
Listing 6
Nutzung von Websockets per Javascript
01 // Initialisiere Websocket-Objekt
02 var ws = new Websocket('ws://localhost:9000');
03 // Notiere Status des Websockets alle 5s
04 var oiv = setInterval(function() { console.log(ws.readyState) }, 5000);
05 // Sende lokale Zeit zum Server
06 ws.onopen = function() {
07 ws.send(time.toLocaleTimeString());
08 }
09 // Notiere Fehler
10 ws.onerror = function() {
11 console.log('Error!');
12 }
13 // Notiere eingehende Nachricht und schließe Verbindung
14 ws.onmessage = function(e) {
15 console.log(e.data);
16 ws.close(99, 'First message closes connection.');
17 }
18 // Beende Notation des Status
19 ws.onclose = function() {
20 clearInterval(oiv);
21 }
Ist die Websocket-Verbindung aufgebaut, kann der Entwickler Eventhandler nutzen. Der Javascript-Interpreter ruft sie beim Eintreten bestimmter Ereignisse auf: »onopen« nach eröffneter Verbindung, »onerror« bei einem Fehler, »onmessage« , wenn ein Nachricht eingetroffen ist, und »onclose« , wenn die Verbindung erfolgreich geschlossen wurde.
Zum Senden einer Nachricht dient die Methode »send()« , die als Parameter die Nachricht entgegennimmt. Die Methode »close()« beendet die Verbindung. Sie kann zwei optionale Parameter aufnehmen: einen numerischen Code sowie einen Text als Begründung für das Schließen der Verbindung. Das Websocket-Objekt besitzt zudem schreibgeschützte Attribute. So speichert »readyState« den aktuellen Status der Verbindung (»CONNECTION: 0« , »OPEN: 1« , »CLOSING: 2« , »CLOSED: 3« ), »bufferedAmount« die Anzahl noch nicht versandter Bytes und »protocol« die verwendete Version des Protokolls. Das Attribut »extension« informiert über die vom Server vorgegebenen Erweiterungen.
Die Websockets sind in den Browsern Chrome 14+, Firefox 7+ und MSIE 10 am besten implementiert [12]. Für die Initialisierung eines Websocket-Objekts im Mozilla-Browser 7 und 8 ist bisher noch die Vorsilbe »Moz« erforderlich. Die Funktion »websocket()« in Listing 7 gleicht diese Ausnahme aus, indem sie im Fehlerfall die Initialisierung für den Mozilla-Browser ausprobiert.
Listing 7
Funktion websocket()
01 function websocket(url) {
02 try {
03 return new WebSocket(url);
04 } catch (e) {
05 try {
06 return new MozWebSocket(url);
07 } catch(e) {
08 return null;
09 }
10 }
11 }
Autobahn
Das Open-Source-Projekt Autobahn [13] bietet Bibliotheken zum Anlagen von Websocket-Clients für Jquery, Python und Android, daneben ein Python-Framework für Websocket-Server sowie eine Protokoll-Testsuite, die auch einen detaillierten Überblick über den Stand der Implementierung [14] von Websockets in Browsern gibt. Alle Quelltexte sind unter der Apache-2-Lizenz veröffentlicht. Das Server-Framework basiert auf Twisted [15], einer ereignisgesteuerten Netzwerkmaschine. Das Python-Framework Twisted macht es einfach, robuste Netzwerkanwendungen, beispielsweise Server, zu implementieren, und ist unter der MIT-Lizenz verfügbar.
Die Installation von Autobahn zusammen mit Twisted unter Ubuntu Linux 11.04 zeigt Listing 8. Websockets eignen sich gut für Serverdienste, auf die der Anwender per Webbrowser zugreift. Im Folgenden soll mit Hilfe von Autobahn und HTML 5 ein Dienst im Stil der Standard-Netzwerkdienste von Linux entstehen.
Listing 8
Installation von Autobahn
01 sudo apt-get install python-dev 02 sudo apt-get install python-setuptools 03 wget http://pypi.python.org/packages/2.7/a/autobahn/autobahn-0.4.2-py2.7.egg 04 sudo easy_install autobahn-0.4.2-py2.7.egg
Meminfo-Dienst
Der zu erstellende Dienst Meminfo soll periodisch Daten über die Speicherauslastung des Hosts aus der Datei »/proc/meminfo« auslesen und per Netzwerk zur Verfügung stellen. Der Browser stellt sie mittels Visualize grafisch dar.
Zur Datenübermittlung kommt das Json-Format zum Einsatz. Die Javascript Object Notation (Json, [16]), ist eine der Sprache Javascript entnommene Beschreibung von Objekten. Beispielsweise beschreibt »{“Jahreszeit”:”Fr\u0 0fchling”,”Monate”:[” M\u00e4rz”,”April”,”Mai”],”Durchschnitt”: 8.6}« das Objekt »Frühling« bestehend aus drei Schlüssel-Wert-Paaren. Der Wert des Feldes »Jahreszeit« enthält die Zeichenkette »Frühling« , »Monate« eine Liste von Zeichenketten und der Wert des Feldes »Durchschnitt« die Fließkommazahl »8.6« . Json kodiert Sonderzeichen gemäß Unicode als vierstellige hexadezimale Zahl mit Präfix »\u« .
Beim Umsetzen des Meminfo-Servers mit Autobahn (Listing 9) lassen sich fehlende Funktionen durch den Import von Python-Modulen nachrüsten. Der Websocket-Server »MeminfoServerFactory« leitet sich von der Klasse »WebSocketServerFactory« ab. Diese Klasse enthält die Methode »meminfo()« , die Daten mit dem CSV-Reader aus der Datei »/proc/meminfo« ausliest und in ein so genanntes Dictonary überführt (Zeilen 14 bis 16). Das Programm übersetzt dieses Dictonary in eine Json-formatierte Zeichenkette (Zeilen 17 und 18) und überträgt sie dann mit »sendMessage()« an den verbundenen Client. Nach fünf Sekunden wird die Funktion erneut aufgerufen (Zeile 20).
Listing 9
Meminfo-Server
01 import sys, csv, json
02 from twisted.internet import reactor
03 from autobahn.websocket import WebSocketServerFactory, WebSocketServerProtocol
04
05 class MeminfoServerProtocol(WebSocketServerProtocol):
06
07 def onOpen(self):
08 self.factory.meminfo(self)
09
10 class MeminfoServerFactory(WebSocketServerFactory):
11
12 protocol = MeminfoServerProtocol
13
14 def meminfo(self, client):
15 reader = csv.reader(open('/proc/meminfo'), delimiter=':', skipinitialspace=True)
16 dic=dict()
17 for row in reader:
18 dic[row[0]] = row[1]
19 client.sendMessage(json.dumps(dic))
20 reactor.callLater(5, self.meminfo, client)
21
22 if __name__ == '__main__':
23
24 factory = MeminfoServerFactory()
25 reactor.listenTCP(9000, factory)
26 reactor.run()
Die Klasse »MeminfoServerProtocol« ist ebenfalls eine Ableitung einer Autobahn-Klasse – von »WebSocketServerProtocol« . Diese Klasse definiert Eventhandler analog zur Websocket-Schnittstelle in Javascript. Hier wird nach der Neueröffnung einer Verbindung (»onOpen« ) die Methode »meminfo()« aus der Klasse »MeminfoServerFactory« aufgerufen. Zusätzlich ließen sich noch Eventhandler für die Ereignisse »onMessage« , »onError« oder »onClose« definieren. Die Main-Methode des Python-Programms (Zeile 22) bindet eine Instanz von »MeminfoServerFactory« mit »reactor« an die lokale Rechneraddresse sowie TCP-Port 9000 und startet sie.
Die HTML-Seite zum Abfragen des Dienstes ist in Listing 10 zu sehen. Diese bindet die notwendigen CSS- und Javascript-Ressourcen ein. Im »script« -Bereich des Dokuments startet die Funktion »meminfo()« aus der Datei »js/meminfo.js« die Abfrage. Die Funktion »meminfo()« ist in Listing 11 zu sehen. Sie initialisiert eine Verbindung durch Aufrufen der Funktion »websocket()« .
Listing 10
HTML-5-Seite als Speicher-Monitor
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 src="js/meminfo.js"></script>
08 <script>
09 $(document).ready(function() { meminfo() } )
10 </script>
11 </head>
12 <body></body>
13 </html>
Listing 11
Funktion meminfo() fragt Meminfo-Server ab
01 function meminfo(url, cont) {
02 url = url?url:"ws://localhost:9000";
03 var count = 0;
04 var ws = websocket(url);
05
06 if (ws === null) {
07 return null;
08 }
09
10 // Erstellen des Ausgabetabletts
11 ws.onopen = function(e) {
12 $(cont?cont:'body').append('<table id="meminfo" style="float:left" \
13 class="line"><caption>Meminfo von '+url+'</caption><thead>\
14 <tr><td></td><th>MemFree</th><th>Shmem</th>\
15 <th>SwapFree</th></tr></thead><tbody></tbody></table>\
16 <div style="float:left" class="visualize" id="meminfochart"></div>');
17 }
18
19 // Empfangene Daten einfügen
20 ws.onmessage = function(e) {
21 count++; // closure
22 try {
23 var obj = jQuery.parseJSON(e.data);
24 $('#meminfo tbody').append('<tr><th>'+count+'</th>'+
25 $('#meminfo thead th').map(function() { return '<td>'+
26 (Math.round(parseInt(obj[$(this).text()])/1000))+'</td>';}
27 ).get().join('')+'</tr>');
28 if (count > 20) {
29 $('#meminfo tr:eq(1)').remove();
30 }
31 } catch(e) {
32 console.log('Protokoll-Fehler');
33 }
34 $('#meminfochart').empty()
35 $('#meminfo.line').visualize({type: 'line', parseDirection: 'y',
36 'height':'200px', 'width':'500px'}, $('#meminfochart'));
37 }
38 }
Nach erfolgreicher Eröffnung (»onopen« ) hängt der Code dem HTML-Dokument mit der Jquery-Methode »append()« eine leere Tabelle sowie einen Bereich zur Ausgabe des Diagramms an. Beim Eintreffen einer Nachricht (»onmessage« ) übersetzt das Skript die Json-formatierte Zeichenkette in ein Javascript-Objekt. Falls dies gelingt, bekommt die Tabelle eine weitere Zeile aus Werten der Nachricht angehängt. Die Auswahl der Werte aus dem Objekt geschieht durch das Auslesen der Schlüssel aus dem Kopf der Tabelle. Sobald die Tabelle mehr als 20 Zeilen enthält, löscht der Code die jeweils erste Zeile.
Falls die Rückübersetzung der Json-formatierten Zeichenkette fehlschlägt, wird ein Fehler notiert. Abschließend löscht Javascript das bestehende Diagramm und erstellt es neu, indem es die Funktion »visualize()« aufruft. Abbildung 9 zeigt den Meminfo-Client bei der Arbeit.
Ausblick
HTML 5 beschert dem Web eine ganze Reihe von Neuerungen, die es nachhaltig verändern dürften. Das Canvas-Element wird mehr kontextbezogene Grafiken hervorbringen. Websockets bieten eine Schnittstelle zu einer bisher unbekannten Zahl von Diensten. Der in diesem Artikel implementierte Meminfo-Dienst deutet an, wie sich Daten verschiedener Dienste im Web zusammenführen lassen.
Damit geht HTML 5 gut gerüstet in die Zukunft, in der Herausforderungen wie beispielsweise das “Web der Dinge” warten. Auch die weitere Entwicklung von Javascript bleibt spannend. Mit der Ausweitung seiner Schnittstellen auf lokale Ressourcen des Clients entwickeln sich HTML-5-Dokumente zu Bausteinen verteilter Anwendungen weiter. (mhu)
Infos
- HTML 5: http://www.w3.org/TR/html5/
- Canvas: http://www.w3.org/TR/html5/the-canvas-element.html#the-canvas-element
- 2-D-Kontext: http://dev.w3.org/html5/2dcontext/
- Web GL: http://www.khronos.org/registry/webgl/specs/latest/#2
- SVG: http://www.w3.org/TR/SVGTiny12/
- Peter Kreußel, “Malkasten”: Linux-Magazin 11/11, S. 46
- Visualize: https://github.com/filamentgroup/jQuery-Visualize/zipball/master
- Jquery: http://jquery.com
- Weitere Visualize-Optionen: http://www.filamentgroup.com/lab/update_to_jquery_visualize_accessible_charts_with_html5_from_designing_with/
- Websockets: http://tools.ietf.org/html/draft-ietf-hybi-thewebsocketprotocol-17
- Websockets in HTML-5-Dokumenten: http://dev.w3.org/html5/websockets/
- Websocket-Unterstützung in Browsern: http://en.wikipedia.org/wiki/WebSocket#Browser_support
- Autobahn: http://www.tavendo.de/autobahn/
- Testergebnisse zu Websocket-Implementierungen: http://www.tavendo.de/autobahn/testsuite/report/clients/index.html
- Python-Framework Twisted: http://twistedmatrix.com/trac/
- Json: http://www.json.org
- Quelltext zum Artikel: https://www.linux-magazin.de/static/listings/magazin/2012/01/html-5/
