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.
Zuvor haben wir das EventSource-Attribut besprochen; Es wird auch mit seinem Objekt zum Empfangen von Serverereignisbenachrichtigungen verwendet.
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>Syntax:
if(typeof(EventSource) !== "undefined") {
// Server-sent event supported code
// Program code
}
else {
//Oops! Server-sent event is not supported code
}Syntax:
if(typeof(EventSource) !== "undefined") {
var object = new EventSource("File_URL");
source.onmessage = function(event) {
document.getElementById("output").innerHTML += event.data + "<br>";
}Beispiele für vom HTML-Server gesendete Ereignisse sind unten aufgeführt:
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.
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.
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.
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!
