WebSockets verbindet.

HTML 5 brachte viel Neues in den Browser. Neben der nativen Unterstützung von Audio und Video auch die sogenannten WebSockets. Welche Vorteile diese bringen und wie man sie anwendet, das erfahrt ihr hier: Get web-socked!

Ein WebSocket dient der Verbindung mit einem anderen Rechner (meist einem Server) oder einem anderen Programm. Dabei taucht schnell der Begriff "bidirektionale Verbindung" auf - d.h. einfach ausgedrückt: Der Server kann Daten direkt an den Client (Browser) senden und umgekehrt.

WebSockets fragen also Daten von einem Server ab, nachdem die Website aufgerufen wurde. Vor der Einführung und Unterstützung von WebSockets im Browser wurden Daten meistens per Ajax nachgeladen. WebSockets- und Ajax-Anfragen werden beide in Javascript programmiert. Der wesentliche Unterschied ist, dass beim WebSocket die Verbindung zum Server bestehen bleibt. Bei der Ajax-Anfrage verbindet sich der Browser mit dem Server, schickt diesem die Anfrage - meist als POST oder GET - und bekommt vom Server die Daten. Die Verbindung wird wieder geschlossen.

Bei einer WebSocket bleibt die Verbindung zum Server bestehen. Und der Server hat jederzeit die Möglichkeit Daten an den Client (Browser) zu senden. Der einfachste Anwendungsfall ist ein Chat. Chats gab es schon vor WebSockets und wurden meist mit Polling umgesetzt - hierbei sendet der Client in bestimmten Abständen eine Anfrage nach neuen Daten an den Server. Bei jeder Anfrage wird eine neue Verbindung aufgebaut. Polling verursacht damit auf beiden Seiten - Server und Client - sehr viel Performance. WebSockets schafft Abhilfe und ressourcenschonende Web Applikationen können umgesetzt werden.

Serverseitig unterscheidet es sich auch von einem herkömmlichen Request an eine Webseite - hier wird ebenfalls ein Socket benötigt. Da PHP die übliche Sprache ist, um eine Webseite zu programmieren, bietet sich die auf ReactPHP aufgebaute Library Ratchet an. Eine andere Möglichkeit wäre zum Beispiel Socket.io mittels Node.js.

I. Installation von Ratchet PHP

Die aktuellste Version vom Ratchet PHP findet man auf https://github.com/cboden/Ratchet/. Diese Library kann man direkt Downloaden und über den Composer (ein für PHP entwickelter Dependency Manager) alle benötigten externen Libraries installieren - wie in unserem Beispiel ReactPHP. 

II. Ein einfacher Chat Server

Nun geht der Spaß erst richtig los: Auf geht´s zum Programmieren!

Als Erstes legen wir die Server.php Datei an, diese beinhaltet die benötigten Ratchet PHP Klassen.

use Ratchet\MessageComponentInterface;
use Ratchet\ConnectionInterface;
use Ratchet\Server\IoServer;
use Ratchet\WebSocket\WsServer;
require __DIR__.'/../../library/ratchet/vendor/autoload.php';

Im nächsten Schritt folgt eine Klasse von MessageComponentInterface mit einem $clients Objekt, das alle offenen Verbindungen verwaltet.

class Chat implements MessageComponentInterface {
     protected $clients;
     public function __construct() {
         $this->clients = new \SplObjectStorage;
     }
}

Diese Klasse benötigt 4 Grundfunktionen: onOpen, onClose, onMessage und onError.

public function onOpen(ConnectionInterface $conn) {
    // Verbindung wird akzeptiert und Client hinzugefügt
    $this->clients->attach($conn);
}

public function onClose(ConnectionInterface $conn) {
    // Verbindung wird geschlossen und Client entfernt
    $this->clients->detach($conn);
}

public function onMessage(ConnectionInterface $from,  $msg) {
    // Nachricht wird an alle anderen Clients weitergeleitet
   foreach ($this->clients as $client) {
       if ($from != $client) {
           $client->send(strip_tags($msg));
       }
    }
}

public function onError(ConnectionInterface $conn, \Exception $e) {
    // Verbindung wird geschlossen
    $conn->close();
}

Damit sind die Grundfunktionen des Chats geschaffen. Wichtig ist nun, dass dieser über eine IP + Port (Im Beispiel 4000) aufrufbar ist. In unserem Beispiel haben wir keine spezifische IP Adresse angegeben. D.h., der Server ist von allen Netzwerken, mit denen er verbunden ist, aufrufbar.

$server = IoServer::factory(new WsServer(new Chat), 4000);
$server->run();

Nun muss der Server nur noch über folgenden Befehl gestartet werden:

php Server.php

Wir können entspannt bleiben, der Aufbau des Clients ist noch einfacher, als den Server zu installieren. HTML/CSS lassen wir hier einmal weg und widmen uns dem Wesentlichem: Javascript.

I. Erstellung des Sockets.

var server = 'www.massiveart.com';
var port = 4000;
socket = new WebSocket('ws://' + server + ':' + port);

II. Zuweisung der Funktionen zur Abarbeitung der Verbindung.

socket.onopen = onopen;
socket.onclose = onclose;
socket.onmessage = onmessage;

III. Die Funktionen.

function output(message) {
     // Schreiben der Nachricht mit jQuery in den Chat
     $('#chat').append(message);
}

function onopen() {
     output('Verbindung aufgebaut');
}

function onclose() {
     output('Verbindung beendet');
}

function onmessage(msg) {
     output(msg);
}

IV. Senden von Nachrichten an den Server.

function send (message) {
     socket.send(message);
}

Die Funktionen "output" und "send" müssen jetzt nur noch ans HTML angepasst werden. Und fertig ist der Chat.

WebSocket wird von fast allen modernen Browsern unterstützt (Opera, Firefox, Chrome, Safari) - mit Ausnahme von Internet Explorer. Dieser Browser ist erst ab Version 10 kompatibel. Aber keine Sorge, wie für die meisten Neuerungen gibt es auch bei älteren Browsern eine Möglichkeit: Flash Polyfill. Damit benötigt die Verbindung zum Server Socket zwar meistens etwas länger, erspart einem aber die Programmierarbeit für einen Fallback auf Ajax requests.

Besonders in der WebApp Entwicklung schafft WebSockets viele neue Möglichkeiten. So können Applikationen entwickelt werden, bei denen man zu 100% davon ausgehen kann, dass die Daten, die der Benutzer im Browser sieht, auch aktuell sind - und sich bei Änderungen automatisch aktualisieren.

Für herkömmliche Webseiten machen WebSockets jedoch nur wenig Sinn. User schauen sich eine Seite im Durchschnitt 40 Sekunden lang an und dafür ist Ajax ausreichend, wie zum Beispiel bei einem Wetter-Widget.

WebSockets werden damit hauptsächlich in Web Applikationen wie Chats und Live-Datenvisualisierungen Anwendung finden.

----------------------------

Quelle: http://socketo.me/, http://de.wikipedia.org/wiki/WebSocket, http://de.wikipedia.org/wiki/Socket_(Software)