Événements envoyés par le serveur HTML
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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
1666
14
1425
52
1327
25
1273
29
1252
24
Bordure de tableau en HTML
Sep 04, 2024 pm 04:49 PM
Guide de la bordure de tableau en HTML. Nous discutons ici de plusieurs façons de définir une bordure de tableau avec des exemples de bordure de tableau en HTML.
Tableau imbriqué en HTML
Sep 04, 2024 pm 04:49 PM
Ceci est un guide des tableaux imbriqués en HTML. Nous discutons ici de la façon de créer un tableau dans le tableau ainsi que des exemples respectifs.
Marge gauche HTML
Sep 04, 2024 pm 04:48 PM
Guide de la marge HTML gauche. Nous discutons ici d'un bref aperçu de la marge gauche HTML et de ses exemples ainsi que de son implémentation de code.
Disposition du tableau HTML
Sep 04, 2024 pm 04:54 PM
Guide de mise en page des tableaux HTML. Nous discutons ici des valeurs de la mise en page des tableaux HTML ainsi que des exemples et des résultats en détail.
Espace réservé d'entrée HTML
Sep 04, 2024 pm 04:54 PM
Guide de l'espace réservé de saisie HTML. Nous discutons ici des exemples d'espace réservé d'entrée HTML ainsi que des codes et des sorties.
Comment analysez-vous et traitez-vous HTML / XML dans PHP?
Feb 07, 2025 am 11:57 AM
Ce tutoriel montre comment traiter efficacement les documents XML à l'aide de PHP. XML (Language de balisage extensible) est un langage de balisage basé sur le texte polyvalent conçu à la fois pour la lisibilité humaine et l'analyse de la machine. Il est couramment utilisé pour le stockage de données et
Liste ordonnée HTML
Sep 04, 2024 pm 04:43 PM
Guide de la liste ordonnée HTML. Ici, nous discutons également de l'introduction de la liste et des types HTML ordonnés ainsi que de leur exemple respectivement.
Bouton HTML onclick
Sep 04, 2024 pm 04:49 PM
Guide du bouton HTML onclick. Nous discutons ici de leur introduction, de leur fonctionnement, des exemples et de l'événement onclick dans divers événements respectivement.
