Heim >Web-Frontend >HTML-Tutorial >Vom HTML-Server gesendete Ereignisse
Vom HTML-Server gesendete Ereignisse
- WBOYOriginal
- 2024-09-04 16:38:17410Durchsuche
Vom Server gesendete HTML-Ereignisse sind eines der in der HTML-API enthaltenen Szenarien zum automatischen Abrufen von Updates vom Server über eine Webseite. Dieses Konzept umfasst eine Art von Ereignis, das zwischen einem Webserver und einem Webbrowser funktioniert und als vom Server gesendetes Ereignis bezeichnet wird.
Wir möchten zunächst Code hinzufügen, um zu prüfen, ob unser Browser ein vom Server gesendetes Ereignis unterstützt oder nicht. Danach verarbeiten wir anderen Code, um die genaue Ausgabe zu erhalten. Im Gegensatz zu WebSockets ist die Entwicklung von Webanwendungen, die vom Server gesendete Ereignisse verwenden, immer einfacher.
Wie funktionieren vom Server gesendete Ereignisse in HTML?
- Wenn wir als Benutzer versuchen, ein Ereignis auszuführen und es an den Server weiterzuleiten, z. B. wenn wir auf die Anmeldeschaltfläche klicken, werden Anmeldedaten an den Server gesendet. Bei der Ausführung dieser Art von Ereignis, das von einem Webbrowser an den Webserver weitergeleitet wird, wird dieses Ereignis als clientseitiges Ereignis bezeichnet.
- Aber wir machen das Gegenteil des oben genannten Prozesses, was bedeutet, dass das Senden von Daten oder Ereignissen vom Server an den Webbrowser als vom Server gesendete Ereignisse bezeichnet wird. Daher treten solche Ereignisse im System auf, wenn der Browser automatisch vom Server aktualisiert wird.
- Vom Server gesendete Ereignisse werden immer als unidirektional behandelt, da der Prozess nur in eine Richtung erfolgt, vom Server zum Client. Daher ist eines der Hauptattribute dieses Prozesses das EventSource-Attribut mit seinem Objekt.
- An dieses Objekt werden also Begriffe wie URL, Anfrage, Wiederverbindungszeit und letzte Ereignis-ID-Zeichenfolge angehängt. Sehen wir uns das also einzeln an.
- URL: Dies wird während des Bauprozesses festgelegt.
- Anfrage:Wir müssen es für den Anfang auf Null initialisieren.
- Wiederverbindungszeit: Dies ist der Zeitstempel, gemessen in Millisekunden.
- Letzte Ereignis-ID-Zeichenfolge:Wir müssen auch den Zeichenfolgenwert als leere Zeichenfolge initialisieren.
Benachrichtigung über vom Server gesendete Ereignisse erhalten
Zuvor haben wir das EventSource-Attribut besprochen; Es wird auch mit seinem Objekt zum Empfangen von Serverereignisbenachrichtigungen verwendet.
Beispiel
Die tatsächliche Verwendung des EventSource-Attributs ist im folgenden Beispiel dargestellt:
Code:
<!DOCTYPE html>
<html>
<body>
<h1>Receive Sever-sent Event</h1>
<div id="demo"></div>
<script>
if(typeof(EventSource) !== "undefined") {
var source = new EventSource("ssedemo.html");
source.onmessage = function(event) {
document.getElementById("demo").innerHTML += event.data + "<br>";
};
} else {
document.getElementById("demo").innerHTML = "Oops, your browser is not going to support Secure-sent event";
}
</script>
</body>
</html>
- Im obigen Beispiel definieren wir das Objekt des EventSource-Attributs, einschließlich der URL der Seite, über die wir Updates senden; Alle Aktualisierungen werden über ein Ereignis namens „Nachricht“ empfangen, das über eine definierte ID namens „Demo“ verfügt.
Syntax:
- Der erste Schritt besteht darin, zu prüfen, ob unser Browser ein vom Server gesendetes Ereignis unterstützt oder nicht. Deshalb werden wir einen kleinen Code in unser Programm einfügen, um zu überprüfen, ob sein Browser unterstützt wird oder nicht.
if(typeof(EventSource) !== "undefined") {
// Server-sent event supported code
// Program code
}
else {
//Oops! Server-sent event is not supported code
}
- Jetzt sehen wir, dass die Syntax zum Empfangen von Ereignissen vom vom Server gesendeten Ereignis wie folgt lautet:
Syntax:
if(typeof(EventSource) !== "undefined") {
var object = new EventSource("File_URL");
source.onmessage = function(event) {
document.getElementById("output").innerHTML += event.data + "<br>";
}
- Wie in der obigen Syntax gezeigt, müssen wir zunächst ein neues Objekt des EventSource-Attributs erstellen und gleichzeitig die URL der Datei definieren. Dies wird uns helfen, Updates an den Webbrowser zu senden.
- Wenn also ein Update vom Server kommt, tritt das Ereignis in einer Nachricht auf und es wird eine erforderliche Nachricht im Webdokument gedruckt.
Beispiele für vom HTML-Server gesendete Ereignisse
Beispiele für vom HTML-Server gesendete Ereignisse sind unten aufgeführt:
Beispiel #1
In diesem ersten Beispiel prüfen wir, ob unser Browser das Server-Send-Ereignis unterstützt oder nicht. Wenn alles in Ordnung ist, wird die Uhrzeit im Ausgabefenster angezeigt. Wenn der Browser den Browser nicht unterstützt, wird eine Fehlermeldung im Browserfenster gedruckt. Code:
<!DOCTYPE html>
<html>
<head>
<title>HTML Server-sent Event</title>
</head>
<body>
<div id="sse_demo">
</div>
<script type="text/javascript">
if(typeof(EventSource)!=="undefined")
{
alert("Yes Your browser is going to support Server-Sent Event");
}
else
{
alert("Sorry! Yes Your browser is not going to support Server-
Sent Event");
}
</script>
</body>
</html><strong> </strong>
Ausgabe:
Auf dem Ausgabebildschirm werden die Zeiten in Zahlen angezeigt, was bedeutet, dass unser Browser HTML Server-Send Event unterstützt.
Beispiel #2
Dieses Beispiel gilt für vom Server gesendete Ereignisse, bei denen wir die erforderliche Zeit zum Laden des vom Server gesendeten Ereignisses im Browser zählen. Dieser Zeitstempel ist in Sekunden angegeben.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML API _ Server-Sent Events</title>
<script>
window.onload = function()
{
var path = new EventSource("server_time.html");
path.onmessage = function(event)
{
document.getElementById("sse_output").innerHTML += "Required
timestamp received from web server: " + event.data + "<br>";
};
};
</script>
</head>
<body>
<div id="sse_output">
<!--This will display required time of server to load contents-->
</div>
</body>
</html>
Ausgabe:
Wie im folgenden Ausgabebildschirm zu sehen ist, wird als Ladezeit 1 Sekunde angezeigt.
Beispiel #3
In diesem Beispiel versuchen wir den Verbindungsaufbau darzustellen. Lassen Sie uns den Code ausführen und sehen, was ausgegeben wird:
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, height=device-height" />
<title> Server-Sent Events </title>
<style type="text/css">
font-family: ‘Times new Roman’;
</style>
</head>
<body>
<h4> Server-Sent Events Example </h4>
<ul></ul>
<script>
(function()
{ "use strict";
var ev_check = document.querySelector('ul');
var ssl = new EventSource('/events');
function li(text) {
var li = document.createElement('li');
li.innerText = text;
ev_check.appendChild(li);
}
ssl.addEventListener('open', function()
{
li('Server connection done succussfully.');
});
ssl.addEventListener('my-custom-event', function(event)
{
li(event.data);
});
ssl.addEventListener('error', function()
{
li('Server connection failed.');
});
})();
</script>
</body>
</html>
Ausgabe:
Sobald der obige Code im Browserfenster ausgeführt wird, wird eine Ausgabe generiert, bei der die Serververbindung fehlschlägt.
Fazit
Aus all den oben genannten Informationen geht hervor, dass das HTML-Server-Send-Ereignis eine neue API ist, die als monodirektionaler Ereignisprozess verwendet wird, bei dem Benutzer ein Ereignis von einem Webserver an einen Webbrowser erstellen können. Es verwendet das Attribut EventSource. Man kann damit die Ladezeit von Ereignissen sehen. Dies wird auf Facebook, Newsfeeds, Aktienkursaktualisierungen usw. verwendet.
Das obige ist der detaillierte Inhalt vonVom HTML-Server gesendete Ereignisse. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!