web & mobile DEVELOPER 01 / 2015

wmd_201501

 

Einführung in WebSockets

Das HTTP-Protokoll ist verbindungslos. Damit sind „Echtzeit-Anwendungen“ wie Chats, Spiele oder Kollaborationen kaum zu realisieren. Was dazu benötigt wird, ist eine bidirektionale Kommunikation über eine TCP-Verbindung. Dies liefert der Standard RFC6455 – The WebSocket Protocoll.

Von Patrick Lobacher

Bei einer normalen HTTP-Verbindung erfordert jede Aktion des Servers eine vorhergehende Anfrage des Clients. Beim WebSocket-Protokoll reicht es allerdings, wenn der Client die Verbindung öffnet und der Server die dann offene Verbindung aktiv im Folgenden verwendet.

Der Server muss also nicht mehr auf Anfragen des Clients warten, sondern kann direkt neue Informationen ausliefern. Weiterhin entfallen bei WebSockets die durch den HTTP-Header verursachten zusätzlichen Daten, die bei jeder Anfrage einige Hundert Bytes umfassen können.

Das WebSocket-Protokoll startet – technisch gesehen – also eine Anfrage vom Client und nach der Übertragung der Daten zum Verbindungsaufbau bleibt die zugrundeliegende TCP-Verbindung bestehen und ermöglicht somit eine Übertragungen in beide Richtungen.
Basis-Kommunikation

Um die Basis-Kommunikation zu verstehen, setzen wir ein Minimal-Setup auf. Der Client wird dazu den Server konnektieren und dort eine Meldung absetzen. Sobald der Server dem Client antwortet, wird dieser eine Meldung in der JavaScript-Konsole ausgeben.

Um das Basis-Setup aufzusetzen benötigen wir Node.js und socket.io. Node.js ist ein Webserver auf JavaScript-Basis. Die Implementierung der WebSockets übernimmt socket.io – das ist eine JavaScript-Bibliothek für Realtime Web Applications.
Installation

Für die Installation von Node.js muss man auf die Website http://nodejs.org gehen und dort auf den Button „Install“ klicken.

Den erhaltenen Download installiert man dann wie gewohnt. Unter Mac OS X beispielsweise wurde nun Node unter /usr/local/bin/node installiert und npm (der Node Package Manager) unter /usr/local/bin/npm.

Wir legen nun zunächst einen Projektordner websockets an und wechseln in diesen.

Nun legen wir eine Datei index.html an, die den Client-Part übernimmt:

 

socket.io wird absolut referenziert und damit von Node.js automatisch aufgelöst.

 

Nun stellt der Client über io.connect() eine Verbindung zum Server her und meldet sich via socket.on() am Server an. Dieser liefert ein Event „welcome“ an den Client, der dies in der Konsole ausgibt. Nun wird per socket.emit() vom Client ein Event „user agent“ (mit dem aktuellen User Agent als Inhalt) an den Server geschickt, welches dieser in der Kommandozeile mit Ausgabe eine Meldung bestätigt.

Der Server wiederum wird in der Datei server.js realisiert:

 

Hier wird zunächst ein Webserver auf Port 8888 aufgemacht und anschließend socket.io geladen. Nun wird im folgenden dafür gesorgt, dass sowohl auf die Datei index.html zugegriffen werden kann und diese dann bei einem Aufruf des Servers mit http://127.0.0.1:8888/ auch ausgeliefert wird. Hierfür werden wir im nächsten Beispiel „Express“ verwenden.

Schließlich müssen wir den Server noch starten, indem wir node server.js im Terminal eingeben.

 

Beispielapplikation Chat

Wir wollen im Folgenden einen Web-Chat realisieren, mit dem jeder Client in Echtzeit kommunizieren kann – die Anleitung basiert dabei auf einem Tutorial von NodeCode welches am Ende verlinkt ist.

Zum Einsatz kommen dabei wieder Node.js (Webserver auf JavaScript-Basis), Express (Web Application Framework für Node.js), socket.io (eine JavaScript-Bibliothek für Realtime Web Applications die WebSockets implementiert) und jQuery.

Sobald der fertige Chat läuft, bekommt jeder Client ein Formular angezeit, indem der Nutzer sich einen Namen geben kann und eine Nachricht posten kann. Alle anderen Clients sehen die Nachrichten dann in Echtzeit.

In Erweiterung zum ersten Beispiel benötigen wir nun noch Express. Zur Installation legen wir einen neuen Projektordner chat an und starten die Installation:

 

Schließlich legen wir noch einen Ordner public an und speichern dort eine Kopie von jQuery (minified) – beispielsweise heruntergeladen unter http://code.jquery.com/jquery-2.1.1.min.js.

 

Server Setup & WebSockets

Der Node.js-Server besteht aus zwei Dateien: einerseits server.js (diese enthält den Server-Code) und andererseits server-config.json (die die Konfiguration aufnimmt). Beide Dateien befinden sich im Hauptverzeichnis chat.

Die Konfiguration hat folgenden Inhalt:

Hier kann der Port konfiguriert warden, unter dem der Server erreichbar ist.

Nun füllen wir den Server mit Leben:

Anfangs werden die Module express und socket.io geladen, sowie die Server-Konfiguration ausgelesen.

Anschließend wird der Port für den Server mit dem, in der Konfiguration enthaltenen, festgelegt.

Nun folgen Anweisungen um einerseits statischen Inhalt auszuliefern (aus dem public Verzeichnis) und andererseits eine Weiterleitung zu etablieren, die von / auf /index.html führt.

Der wichtigste Teil kommt nun: Über io.sockets.on()wird eine permanente Verbindung zum Server über WebSockets etabliert.

Verbindet sich ein Client, wird das Event connection ausgelöst. Nach diesem Event steht ein socket zur Verfügung über den mit dem Client kommuniziert werden kann.

Per socket.emit() wird nun ein Event mit dem Namen “chat” an alle Clients gesendet und diesem sowohl die aktuelle Zeit, wie auch den Namen (oder – falls dieser nicht gesetzt sein sollte “Unbekannt”) und der Nachrichten-Text übermittelt. Sobald das Script gestartet wurde, wird zudem die Uhrzeit und die Nachricht “Verbindung zum Server besteht!” ausgegeben, wenn dem auch so sein sollte.

Schließlich wird auf der Konsole beim Start des Servers eine Meldung ausgegeben, unter welcher URL der Server erreichbar ist.

 

Test des Setups

Wir können nun eine beliebige index.html ins public Verzeichnis legen und anschließend den Server wie folgt starten:

Nun können wir den Server im Browser unter http://127.0.0.1:8888/ aufrufen und sollten den Inhalt der Datei index.html sehen.

 

Client Setup

Für den Client brauchen wir letztlich drei Dateien, die allesamt im Verzeichnis public liegen:

  • hml
    HTML5-Datei, die das Formular für den Chat enthält
  • css
    Das zugehörige Stylesheet
  • js
    jQuery-Code um den Server zu kontaktieren

 

Hier wird ein Header-Bereich (mit der Überschrift) und ein Footer-Bereich (mit dem Formular) aufgebaut. Dazwischen befindet sich ein noch leerer Content-Bereich, der anschließend dynamisch gefüllt wird.

Eine Besonderheit hier ist die Einbindung von socket.io – diese wird von Node.js richtig aufgelöst und muss daher absolut referenziert werden.

Nun muss das HTML noch gestylt werden:

Schließlich können wir uns an den Client machen – dieser wird in der Datei client.js implementiert:

Der Client ist inline kommentiert – sodaß der Ablauf daraus klar werden sollte. Im Grunde konnektiert er sich zum Server um sich dort anzumelden. Sobald man nun in die Eingabefelder Chat-Name und Chat-Test etwas eingibt und absendet (entweder über den Button oder schlicht mit Enter) wird dieser Text an den Server gesendet und dort wieder an alle Clients als Chat-Nachricht versendet.

 

Fazit

Um bidirektionale Echtzeitkommunikation zu realisieren sind WebSockets als HTML5-Standard das Tool der Wahl. Damit lassen sich Anwendungen wie kollaborative Websites, Web-Support, Spiele (auf Basis von HTML5), Echtzeit-Finanzanwendungen, Server-Monitoring-Anwendungen im Web, Chats und vieles andere mehr realisieren. In der Linkliste finden Sie zudem noch weitere serverseitige Setups mit denen auch dort keine Wünsche offen bleiben.

[pl]

 

Autor

Patrick Lobacher ist Digital-Native, Entwickler, Berater, Trainer und Autor zahlreicher Fachbücher und -Artikel zum Thema Webdevelopment. Er ist Geschäftsführer der +Pluswerk GmbH die an 10 Standorten mit über 130 Mitarbeitern digitale Kommunikationslösungen mit Leidenschaft im Enterprise-Bereich mit Fokus Open Source (TYPO3, Magento, Akeneo, OroCRM) für anspruchsvolle Kunden konzipiert, umsetzt und betreut.

Links zum Thema

RFC 6455
http://tools.ietf.org/html/rfc6455

 

Node.js Website
http://nodejs.org

Socket.io Dokumentation
http://socket.io/docs/

RFC 6455
http://tools.ietf.org/html/rfc6455

WebSocket.org
https://www.websocket.org/

Tutorial Chat
http://nodecode.de/chat-nodejs-websocket

Webserver Implementierungen
http://www.html5rocks.com/de/tutorials/websockets/basics/

 

Webserver Implementierungen
http://www.html5rocks.com/de/tutorials/websockets/basics/

WebSocket-Implementierung mit PHP
http://phpmagazin.de/WebSocket-Implementierung-mit-PHP-3816.html

Die Killerapplikation mit Node.js, Socket.io und AngularJS
http://www.interaktionsdesigner.de/2013/die-killerapplikation-mit-node.js-socket.io-und-angularjs/

 

Leave a Comment.