Kategorien
JavaScript & jQuery Programmierung

HTML5 Server-Sent-Events: Per JavaScript auf Server-Requests reagieren

Mit dem XMLHttpRequest-Objekt ist es bereits möglich, mit dem Webserver zu kommunizieren, ohne dass das HTML-Dokument neu geladen werden muss. Das Server-Sent-Event, das mit HTML5 eingeführt wurde, erlaubt es, ohne Neuladen des Dokumentes auf Server-Requests zu reagieren. Auf diese Weise ist es beispielsweise sehr einfach möglich, einen Artikelbestand aktuell zu halten oder eine terminierte Ausgabe (mit Server- statt Clientzeit) ohne Neuladen zu realisieren.

serversentevents

Server-Sent-Events: Event definieren und darauf reagieren

Zunächst muss eine Quelle für das Server-Sent-Event definiert werden. Dies kann zum Beispiel eine PHP-Datei sein, die für die serverseitige Ausgabe sorgt und auf die reagiert werden soll:

var quelle = new EventSource("demo.php");

Über den Event-Handler onmessage oder die Methode addEventListener() geben wir eine Funktion an, die immer dann aufgerufen wird, wenn sich der Inhalt der Quelle (hier demo.php) verändert:

quelle.onmessage = demo;

Vorzuziehen ist die DOM-Standard-Variante mit addEventListener():

quelle.addEventListener("ping", demo, false);

Die Variante mit addEventListener() hat den Vorteil, dass neben der Funktion auch ein Event-Name (hier „ping“) angeben werden kann. Somit ist es möglich, dass eine Event-Quelle auf mehrere unterschiedliche Ereignisse reagiert.

Wie auf das Ereignis reagiert werden soll, wird in der Funktion festgelegt. Die einfachste Variante ist, den Inhalt der Quelle einfach auszugeben:

function demo(e) {
  document.getElementById("demoausgabe").firstChild.nodeValue = e.data;
}

Über .data hat man Zugriff auf den Inhalt der Event-Quelle. Statt den Inhalt der Quelle auszugeben, besteht die Möglichkeit, wesentlich komplexere Funktionen für die Reaktion auf das Ereignis zu definieren.

Server-Sent-Events: Vorgaben für die Event-Quelle

Die Event-Quelle muss einige Vorgaben berücksichtigen. So  ist auf die Verwendung des richtigen Content-Types zu achten, der per PHP wie folgt ausgegeben wird:

header("Content-Type: text/event-stream");

Außerdem muss der Inhalt UTF-8-kodiert sein. Da neben dem eigentlichen Inhalt ein Name für das Event festgelegt werden kann, sind folgende Feldbezeichnungen den Werten voranzustellen:

event: ping
data: Hier steht der Ausgabetext.

Das Feld event beschreibt den Event-Namen, der in der addEventListener()-Methode angegeben ist, data beinhaltet den auszugebenden Text. Sind mehrere Ereignisdaten definiert, werden diese mit zwei Zeilenumbrüchen voneinander getrennt. Hat man statt der addEventListener()-Methode den Event-Handler onmessage verwendet, kann man pro Event-Quelle nur auf ein Ereignis reagieren.

Das Server-Sent-Event wird unterstützt von Chrome ab Version 9, Firefox ab Version 6, Safari ab Version 5 und Opera ab Version 11. Der Internet Explorer ist – wie üblich – außen vor.

(dpe)