HTML - Server Sent Events

Hallo ihr angehenden Web-Entwickler! Heute tauchen wir ein in die aufregende Welt der Server-Sent Events (SSE). Keine Sorge, wenn ihr neu im Programmieren seid; ich werde euch Schritt für Schritt durch dieses Thema führen, genau wie ich es in den letzten Jahren für unzählige Schüler getan habe. Also, holt euch eine Tasse Kaffee und los geht's!

Was sind Server-Sent Events?

Bevor wir uns dem Code zuwenden, lassen Sie uns verstehen, was Server-Sent Events sind. Stellt euch vor, ihr schaut ein Livesportereignis online. Ihr wollt die Punktestände in Echtzeit sehen, ohne die Seite neu zu laden. Genau hier kommen SSE ins Spiel!

Server-Sent Events erlauben es einer Webseite, automatisch Updates von einem Server zu empfangen. Es ist, als hätte man eine direkte Telefonleitung zum Server, über die man Nachrichten senden kann, wannimmer man will, ohne dass man immer wieder nachfragen muss.

Wie verwendet man SSE in Webanwendungen?

Nun, da wir das Konzept verstanden haben, sehen wir uns an, wie wir SSE in unseren Webanwendungen implementieren können. Wir beginnen mit dem Client-seitigen Code, der in HTML und JavaScript geschrieben ist.

Schritt 1: Erstellen eines EventSource-Objekts

Zuerst müssen wir ein EventSource-Objekt in unserem JavaScript-Code erstellen. Dieses Objekt wird eine Verbindung zum Server herstellen.

<h1>Live Sportergebnisse</h1>
<div id="score"></div>

<script>
if(typeof(EventSource) !== "undefined") {
var source = new EventSource("score_updates.php");
source.onmessage = function(event) {
document.getElementById("score").innerHTML = event.data;
};
} else {
document.getElementById("score").innerHTML = "Entschuldigung, Ihr Browser unterstützt keine servergesendeten Ereignisse...";
}
</script>

Lassen Sie uns das durcharbeiten:

Wir erstellen eine Überschrift und ein Div-Element, in dem wir das Ergebnis anzeigen werden.
Im Skript überprüfen wir zunächst, ob der Browser EventSource unterstützt.
Wenn ja, erstellen wir ein neues EventSource-Objekt und geben die URL unseres serverseitigen Skripts an.
Wir konfigurieren dann einen onmessage-Event-Handler. Diese Funktion wird aufgerufen, wenn wir eine Nachricht vom Server empfangen.
Innerhalb der Funktion aktualisieren wir den Inhalt unseres "score"-Divs mit den vom Server empfangenen Daten.
Wenn der Browser SSE nicht unterstützt,显示一条消息通知用户。

Serverseitiges Skript für SSE

Nun sehen wir uns an, wie wir das serverseitige Skript einrichten, um Ereignisse zu senden. Wir verwenden PHP für dieses Beispiel, aber das Konzept ist in anderen serverseitigen Sprachen ähnlich.

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

function sendUpdate($score) {
echo "data: $score\n\n";
ob_flush();
flush();
}

$score = 0;
while (true) {
$score++;
sendUpdate("Aktueller Stand: $score");
sleep(5);  // Warte 5 Sekunden, bevor das nächste Update gesendet wird
}
?>

Lassen Sie uns diesen Skript analysieren:

Wir setzen die geeigneten Header für SSE.
Wir definieren eine Funktion sendUpdate, die Daten im richtigen Format für SSE sendet.
Wir starten eine unendliche Schleife (in einer realen Anwendung würdet ihr eine Bedingung haben, um diese zu stoppen).
In jeder Iteration erhöhen wir den Stand und senden ein Update.
Wir warten dann 5 Sekunden, bevor das nächste Update gesendet wird.

Behandlung von Server-Sent Events

Nun, da wir sowohl Client- als auch Server-seitigen Code haben, sehen wir uns an, wie wir verschiedene Arten von Ereignissen behandeln können.

<h1>Live Sportaktualisierungen</h1>
<div id="score"></div>
<div id="commentary"></div>

<script>
var source = new EventSource("sports_updates.php");

source.addEventListener('score', function(e) {
document.getElementById('score').innerHTML = e.data;
}, false);

source.addEventListener('commentary', function(e) {
document.getElementById('commentary').innerHTML = e.data;
}, false);

source.onerror = function(e) {
console.log("Fehler: " + e);
};
</script>

In diesem Beispiel:

Wir erstellen zwei Div-Elemente für den Stand und die Kommentierung.
Wir konfigurieren Event-Listener für zwei Arten von Ereignissen: 'score' und 'commentary'.
Jedes Ereignis aktualisiert ein anderes Element auf der Seite.
Wir fügen auch einen Fehler-Handler hinzu, um Fehler zu protokollieren.

Das entsprechende serverseitige Skript könnte wie folgt aussehen:

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

function sendEvent($event, $data) {
echo "event: $event\n";
echo "data: $data\n\n";
ob_flush();
flush();
}

$score = 0;
$commentary = ["Große Parade!", "Knapper Schuss!", "Gelbe Karte!"];

while (true) {
$score++;
sendEvent('score', "Aktueller Stand: $score");

if ($score % 3 == 0) {
$randomComment = $commentary[array_rand($commentary)];
sendEvent('commentary', $randomComment);
}

sleep(5);
}
?>

Dieses Skript sendet ein 'score'-Ereignis alle 5 Sekunden und ein 'commentary'-Ereignis alle 15 Sekunden (wenn der Stand durch 3 teilbar ist).

Methodentabelle

Hier ist eine Tabelle, die die wichtigsten Methoden zusammenfasst, die wir verwendet haben:

Methode	Beschreibung
`new EventSource(url)`	Erzeugt eine neue Verbindung zum Server
`EventSource.onmessage`	Handelt Nachrichten ohne einen bestimmten Ereignisnamen
`EventSource.addEventListener(event, callback)`	Handelt Nachrichten mit einem bestimmten Ereignisnamen
`EventSource.onerror`	Handelt Fehler in der Verbindung

Schlussfolgerung

Und da habt ihr es! Wir haben die Grundlagen der Server-Sent Events abgedeckt, von der Einrichtung des Client-seitigen Codes bis hin zur Erstellung eines Servers, der Updates sendet. Denkt daran, SSE ist ein leistungsstarkes Werkzeug für die Erstellung von Echtzeit-Webanwendungen, aber es ist nur eine einseitige Kommunikation. Wenn ihr bidirektionale Kommunikation benötigt, könntet ihr in Zukunft WebSockets in Betracht ziehen.

Wie bei jedem Programmierkonzept ist der beste Weg zum Lernen das Tun. Versucht, eure eigene SSE-Anwendung zu erstellen - vielleicht ein Live-Chat-System oder ein Börsen-Ticker. Die Möglichkeiten sind endlos!

Frohes Coden, zukünftige Web-Entwickler! Denkt daran, jeder Experte war einmal ein Anfänger, also lasst euch nicht entmutigen, wenn Dinge nicht sofort klar werden. Übt weiter, und ihr werdet很快 ein Profi sein!

Credits: Image by storyset