Vom HTML5- Server gesendete Ereignisse

In diesem Lernprogramm erfahren Sie, wie Sie mit der Funktion "Vom HTML5-Server gesendete Ereignisse" eine unidirektionale und dauerhafte Verbindung zwischen einer Webseite und einem Server herstellen.

Was ist ein vom Server gesendetes Ereignis?

Das vom HTML5-Server gesendete Ereignis ist eine neue Möglichkeit für die Webseiten, mit dem Webserver zu kommunizieren. Mit dem XMLHttpRequest-Objekt ist es auch möglich, dass Ihr JavaScript-Code eine Anforderung an den Webserver sendet. Es handelt sich jedoch um einen Eins-zu-Eins-Austausch. Sobald der Webserver seine Antwort bereitgestellt hat, ist die Kommunikation beendet. Das XMLHttpRequest-Objekt ist der Kern aller Ajax- Operationen.

Es gibt jedoch Situationen, in denen Webseiten eine längerfristige Verbindung zum Webserver erfordern. Ein typisches Beispiel sind Börsenkurse auf Finanzwebsites, bei denen der Preis automatisch aktualisiert wird. Ein weiteres Beispiel ist ein Newsticker, der auf verschiedenen Medienwebsites ausgeführt wird.

Sie können solche Dinge mit den vom HTML5-Server gesendeten Ereignissen erstellen. Auf dieser Webseite kann eine offene Verbindung zu einem Webserver hergestellt werden, sodass der Webserver jederzeit automatisch eine neue Antwort senden kann. Es ist nicht erforderlich, erneut eine Verbindung herzustellen und dasselbe Serverskript immer wieder von Grund auf neu auszuführen.

Hinweis: Vom Server gesendete Ereignisse (SSE) sind unidirektional. Dies bedeutet, dass Daten in eine Richtung vom Server zum Client übertragen werden. Ein Client ist normalerweise ein Webbrowser.

Tipp: Die vom Server gesendete Ereignisfunktion von HTML5 wird in allen wichtigen modernen Webbrowsern wie Firefox, Chrome, Safari und Opera mit Ausnahme von Internet Explorer unterstützt.

Senden von Nachrichten mit einem Serverskript

Erstellen wir eine PHP-Datei mit dem Namen "server_time.php" und geben Sie das folgende Skript ein. In regelmäßigen Abständen wird lediglich die aktuelle Uhrzeit der integrierten Uhr des Webservers angezeigt. Wir werden diese Zeit abrufen und die Webseite später in diesem Tutorial entsprechend aktualisieren.

Beispiel

<?php
header("Content-Type: text/event-stream");
header("Cache-Control: no-cache");
 
// Get the current time on server
$currentTime = date("h:i:s", time());
 
// Send it in a message
echo "data: " . $currentTime . "\n\n";
flush();
?>

Die ersten beiden Zeilen des PHP-Skripts setzen zwei wichtige Header. Zunächst wird der MIME-Typ auf festgelegt text/event-stream, der vom serverseitigen Ereignisstandard gefordert wird. In der zweiten Zeile wird der Webserver angewiesen, das Caching zu deaktivieren, da sonst die Ausgabe Ihres Skripts zwischengespeichert werden kann.

Jede Nachricht, die über vom HTML5-Server gesendete Ereignisse gesendet wird, muss mit dem Text beginnen, data:gefolgt vom tatsächlichen Nachrichtentext und der neuen Zeilenzeichenfolge ( \n\n).

Und schließlich haben wir die PHP- flush()Funktion verwendet, um sicherzustellen, dass die Daten sofort gesendet und nicht gepuffert werden, bis der PHP-Code vollständig ist.


Nachrichten auf einer Webseite verarbeiten

Das EventSourceObjekt wird zum Empfangen von vom Server gesendeten Ereignismeldungen verwendet.

Erstellen wir nun ein HTML-Dokument mit dem Namen "demo_sse.html" und legen es in demselben Projektverzeichnis ab, in dem sich die Datei "server_time.php" befindet. Dieses HTML-Dokument empfängt einfach die vom Webserver gemeldete aktuelle Zeit und zeigt sie dem Benutzer an.

Beispiel

<!DOCTYPE html>
<html lang="en">
<head>
<title>Using Server-Sent Events</title>
<script>
    window.onload = function() {
        var source = new EventSource("server_time.php");
        source.onmessage = function(event) {
            document.getElementById("result").innerHTML += "New time received from web server: " + event.data + "<br>";
        };
    };
</script>
</head>
<body>
    <div id="result">
        <!--Server response will be inserted here-->
    </div>
</body>
</html>