Maison > Article > interface Web > Événements envoyés par le serveur HTML
Événements envoyés par le serveur HTML
- WBOYoriginal
- 2024-09-04 16:38:17322parcourir
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.
Comment fonctionnent les événements envoyés par le serveur en HTML ?
- En tant qu'utilisateur, lorsque nous essayons d'organiser un événement et de le transmettre au serveur, comme en cliquant sur le bouton de connexion, les informations de connexion seront envoyées au serveur. Ainsi, lors de l'exécution de ce type d'événement, qui passe d'un navigateur Web au serveur Web, cet événement est appelé événement côté client.
- Mais nous faisons le contraire du processus ci-dessus, ce qui signifie que l'envoi de données ou d'événements du serveur au navigateur Web est appelé événements envoyés par le serveur. Par conséquent, ce type d'événements se produit dans le système lorsque le navigateur est automatiquement mis à jour depuis le serveur.
- Les événements envoyés par le serveur sont toujours traités comme unidirectionnels car ils n'effectuent le processus que dans une seule direction, du serveur vers le client. Par conséquent, l'un des principaux attributs de ce processus est l'attribut EventSource avec son objet.
- Cet objet est donc joint aux termes tels que l'URL, la demande, l'heure de reconnexion et la chaîne d'ID du dernier événement. Voyons donc cela un par un.
- Url : Ceci sera défini pendant le processus de construction.
- Demande : il faut l'initialiser à null pour le début.
- Temps de reconnexion : il s'agit de l'horodatage mesuré en millisecondes.
- Chaîne d'ID du dernier événement : Nous devons également initialiser la valeur de la chaîne comme une chaîne vide.
Recevoir une notification d'événements envoyés par le serveur
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.
Exemple
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>
- Dans l'exemple ci-dessus, nous définissons l'objet de l'attribut EventSource, y compris l'URL de la page via laquelle nous envoyons les mises à jour ; toutes les mises à jour sont reçues sur un événement appelé message, qui aide à définir un identifiant appelé démo.
Syntaxe :
- La première étape consiste à vérifier si notre navigateur prendra en charge ou non un événement envoyé par le serveur. Nous allons donc mettre un petit code dans notre programme pour vérifier si son navigateur est supporté ou non.
if(typeof(EventSource) !== "undefined") {
// Server-sent event supported code
// Program code
}
else {
//Oops! Server-sent event is not supported code
}
- Nous allons maintenant voir la syntaxe de réception des événements de l'événement envoyé par le serveur est la suivante :
Syntaxe :
if(typeof(EventSource) !== "undefined") {
var object = new EventSource("File_URL");
source.onmessage = function(event) {
document.getElementById("output").innerHTML += event.data + "<br>";
}
- Comme le montre la syntaxe ci-dessus, nous devons d'abord créer un nouvel objet de l'attribut EventSource et définir l'URL du fichier. Cela nous aidera à envoyer des mises à jour au navigateur Web.
- Ainsi, chaque fois qu'une mise à jour provient du serveur, l'événement se produira sur le message et imprimera un message requis sur le document Web.
Exemples d'événements HTML envoyés par le serveur
Des exemples d'événements envoyés par le serveur HTML sont donnés ci-dessous :
Exemple n°1
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.
Exemple n°2
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.
Exemple #3
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.
Conclusion
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!