So verwenden Sie HTML5-Server-Sent-Ereignisse

Das erste, was wir hier bemerken müssen, ist, dass wir das angerufen haben Header Funktion in Zeilen 2-3: Dies ist eine Funktion, die zum Senden verwendet wird rohe HTTP -Header. In diesem Fall nennen wir es zweimal: die erste in Zeilen 2, um die einzurichten Cache-Kontroll Headerfeld und Geben Sie Caching -Direktiven an (kein Seiten zwischen Seite), die zweite in den Zeilen 3, um die festzulegen Inhaltstyp Zu Text/Ereignisstrom. Diese Header -Setups sind erforderlich, damit unser Skript korrekt funktioniert. Es ist auch wichtig zu bemerken, dass das richtige funktioniert, die Header Die Funktion muss immer aufgerufen werden, bevor eine andere Ausgabe erstellt wird.

Nachdem wir die HTML -Header eingerichtet hatten, haben wir einfach die verwendet einmalig benötigt Anweisung in Zeilen 6, um den Inhalt der zu verlangen Tiere.Php Datei, die das Array enthält, das wir zuvor geschrieben haben. In einem realen Szenario wäre dies durch a ersetzt worden SQL -Abfrage Um solche Informationen aus einer Datenbank abzurufen.

Schließlich haben wir in den Zeilen 9-11 unsere Antwort an den Kunden gesendet: die JSON-codiert "Tiere" Array. Eine sehr wichtige Sache zu bemerken: Server -Side -Ereignis -Format erfordert, dass jede vom Server gesendete Antwort von der vorangestellt wird Daten: Saite und gefolgt von zwei Newline -Charaktere. In diesem Fall haben wir die verwendet \N Newline-Charakter, weil wir auf einer Unix-ähnlichen Plattform laufen; Um die plattformübergreifende Kompatibilität sicherzustellen, hätten wir die verwendet Php_eol Konstante.

Es ist sogar möglich, die Antwortnachricht in mehreren Zeilen zu brechen: In diesem Fall muss jede Zeile, wie bereits gesagt, mit „Daten“ beginnen: und muss von einem einzelnen neuen Zeilenzeichen folgen. Die zusätzliche Newline ist nur in der letzten Zeile erforderlich.

Der Server kann auch steuern, wie oft der Client versuchen sollte, sich wieder zu verbinden 3 Sekunden) und der Name der Fall (Standard ist "Nachricht") an den Client gesendet. Um das erstere anzupassen, müssen wir die verwenden wiederholen Richtlinie gefolgt von dem gewünschten Zeitintervall, ausgedrückt in Millisekunden. Zum Beispiel ein Intervall von 1 Sekunde einrichten:

Echo "RETRY: 1000 \ n";

Beachten Sie, dass selbst hier eine nachfolgende Newline erforderlich ist. Um den Ereignisnamen zu ändern, müssen wir stattdessen die verwenden Fall Richtlinie:

Echo "Ereignis: CustomEvent \ n";

Das Standard -Ereignis ist „Nachricht“: Dies ist wichtig, da das Ereignis beim Hinzufügen des Ereignishörers im Client Javascript -Code angegeben werden muss.

Nachdem wir unsere Antwort gesendet hatten, haben wir das angerufen spülen Funktion: Dies ist erforderlich, um die Daten an den Client zu übergeben.

Client -Seitencode

Das erste, was wir Client -Seite machen, ist die Vorbereitung unserer HTML -Datei mit der Liste der verfügbaren Tiere:

Dies ist wirklich ein grundlegendes HTML mit ein wenig PHP, um die Liste der Tiere zum Zeitpunkt des Ladens der Seite anzuzeigen und unsere einzuschließen .JS -Datei (Skript.JS), wird aber unserem Zweck servieren. Lassen Sie uns nun sehen, wie wir tatsächlich Server -Seitenereignisse verwenden können. Das erste, was wir tun müssen, ist, eine zu instanziieren Ereignisquellobjekt. Schreiben Sie in unserer JavaScript -Datei:

Lassen Sie EventSource = New EventSource ('Skript.PHP '); 

Wie Sie sehen können, haben wir den Pfad an unser Serverskript als Argument in der Eventource Objektkonstruktor. Dieses Objekt öffnet eine Verbindung zum Server. Jetzt müssen wir eine hinzufügen Event -Hörer, Damit können wir einige Aktionen ausführen, wenn eine Nachricht vom Server empfangen wird:

Lassen Sie EventSource = New EventSource ('Skript.PHP '); Eventource.AddEventListener ("Nachricht", Funktion (Ereignis) let data = json.analysieren (Ereignis.Daten); Lassen Sie ListElements = Dokument.GetElementsByTagName ("li"); für (lass i = 0; i < listElements.length; i++)  let animal = listElements[i].textContent; if (!data.includes(animal))  listElements[i].style.color = "red";   ); 

Wenn eine Nachricht empfangen wird, verwenden wir die JSON.analysieren Methode in Zeile 4, um die vom Server gesendeten Daten zu transformieren (eine Zeichenfolge, die in der enthalten ist Daten Eigenschaft des Ereignisobjekts) in ein JavaScript -Array.

Danach schleifen wir in den Zeilen 7-11 durch alle Elemente mit dem

Eventource.schließen()