Vom HTML-Server gesendete Ereignisse
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!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1677
14
1431
52
1334
25
1279
29
1257
24
Tabellenrahmen in HTML
Sep 04, 2024 pm 04:49 PM
Anleitung zum Tabellenrahmen in HTML. Hier besprechen wir verschiedene Möglichkeiten zum Definieren von Tabellenrändern anhand von Beispielen für den Tabellenrand in HTML.
Verschachtelte Tabelle in HTML
Sep 04, 2024 pm 04:49 PM
Dies ist eine Anleitung für verschachtelte Tabellen in HTML. Hier diskutieren wir anhand der entsprechenden Beispiele, wie man eine Tabelle innerhalb der Tabelle erstellt.
HTML-Rand links
Sep 04, 2024 pm 04:48 PM
Anleitung zum HTML-Rand links. Hier besprechen wir einen kurzen Überblick über HTML margin-left und seine Beispiele sowie seine Code-Implementierung.
HTML-Tabellenlayout
Sep 04, 2024 pm 04:54 PM
Leitfaden zum HTML-Tabellenlayout. Hier besprechen wir die Werte des HTML-Tabellenlayouts zusammen mit den Beispielen und Ausgaben im Detail.
HTML-Eingabeplatzhalter
Sep 04, 2024 pm 04:54 PM
Leitfaden für HTML-Eingabeplatzhalter. Hier besprechen wir die Beispiele für HTML-Eingabeplatzhalter zusammen mit den Codes und Ausgaben.
Wie analysiert und verarbeitet man HTML/XML in PHP?
Feb 07, 2025 am 11:57 AM
Dieses Tutorial zeigt, wie XML -Dokumente mit PHP effizient verarbeitet werden. XML (Extensible Markup-Sprache) ist eine vielseitige textbasierte Markup-Sprache, die sowohl für die Lesbarkeit des Menschen als auch für die Analyse von Maschinen entwickelt wurde. Es wird üblicherweise für die Datenspeicherung ein verwendet und wird häufig verwendet
HTML-Onclick-Button
Sep 04, 2024 pm 04:49 PM
Anleitung zum HTML-OnClick-Button. Hier diskutieren wir deren Einführung, Funktionsweise, Beispiele und Onclick-Events in verschiedenen Veranstaltungen.
Text in HTML verschieben
Sep 04, 2024 pm 04:45 PM
Anleitung zum Verschieben von Text in HTML. Hier besprechen wir eine Einführung, wie Marquee-Tags funktionieren, mit Syntax und Beispielen für die Implementierung.
