Les événements HTML envoyés par le serveur sont l'un des scénarios inclus dans l'API HTML pour obtenir automatiquement des mises à jour à partir du serveur à l'aide d'une page Web. Ce concept inclut un type d'événement qui fonctionne entre un serveur Web et un navigateur Web, appelé événement envoyé par le serveur.
Nous souhaitons d'abord ajouter du code pour vérifier si notre navigateur prendra en charge ou non un événement envoyé par le serveur ; après cela, nous traiterons un autre code pour obtenir le résultat exact. Contrairement aux WebSockets, développer des applications Web qui utilisent des événements envoyés par le serveur est toujours plus simple.
Plus tôt, nous avons discuté de l'attribut EventSource ; il est également utilisé avec son objet pour recevoir des notifications d'événements du serveur.
L'utilisation réelle de l'attribut EventSource est dans l'exemple suivant :
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>Syntaxe :
if(typeof(EventSource) !== "undefined") {
// Server-sent event supported code
// Program code
}
else {
//Oops! Server-sent event is not supported code
}Syntaxe :
if(typeof(EventSource) !== "undefined") {
var object = new EventSource("File_URL");
source.onmessage = function(event) {
document.getElementById("output").innerHTML += event.data + "<br>";
}Des exemples d'événements envoyés par le serveur HTML sont donnés ci-dessous :
Dans ce premier exemple, nous allons vérifier si notre navigateur va prendre en charge ou non l'événement Server-send. Si tout va bien, il affichera l'heure dans la fenêtre de sortie, et s'il ne prend pas en charge le navigateur, il imprimera un message d'erreur sur la fenêtre du navigateur. 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>Sortie :
Nous voyons les heures en chiffres sur l'écran de sortie, ce qui signifie que notre navigateur prendra en charge l'événement HTML Server-Send.
Cet exemple concerne les événements envoyés par le serveur, où nous comptons le temps requis pour charger l'événement envoyé par le serveur sur le navigateur. Cet horodatage est en secondes.
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>Sortie :
Comme le montre l'écran de sortie ci-dessous, il affiche 1 seconde comme temps de chargement.
C'est l'exemple où nous essayons de montrer l'établissement de la connexion. Exécutons le code et quel sera le résultat :
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>Sortie :
Dès que le code ci-dessus s'exécute dans la fenêtre du navigateur, il générera une sortie là où la connexion au serveur échoue.
D'après toutes les informations ci-dessus, l'événement HTML Server-send est une nouvelle API utilisée comme processus d'événement monodirectionnel où les utilisateurs peuvent créer un événement depuis un serveur Web vers un navigateur Web. Il utilise l'attribut EventSource. On peut voir le temps de chargement des événements en l'utilisant. Ceci est utilisé sur Facebook, les flux d'actualités, la mise à jour du cours des actions, etc.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
