Comment utiliser des événements de serveur HTML5

La première chose à remarquer ici est que nous avons appelé le entête fonction dans les lignes 2-3: c'est une fonction utilisée pour envoyer En-têtes HTTP bruts. Dans ce cas, nous l'appelons deux fois: le premier dans les lignes 2 pour configurer le Contrôle du cache champ d'en-tête et spécifiez les directives de mise en cache (pas de mise en cache de page), la seconde dans les lignes 3, pour définir le Type de contenu pour Texte / flux d'événements. Ces en-têtes sont nécessaires pour que notre script fonctionne correctement. Il est également important de remarquer que pour fonctionner correctement, le entête La fonction doit toujours être appelée avant toute autre sortie.

Après avoir configuré les en-têtes HTML, nous avons juste utilisé le Demandez une fois instruction dans les lignes 6 pour exiger le contenu du animaux.php fichier, qui contient le tableau que nous avons écrit avant. Dans un scénario réel, cela aurait été remplacé par un Requête SQL Pour récupérer ces informations à partir d'une base de données.

Enfin dans les lignes 9-11, nous avons envoyé notre réponse au client: le encopté en JSON Array «Animals». Une chose très importante à remarquer: le format des événements côté serveur nécessite que chaque réponse envoyée par le serveur soit préfixée par le données: chaîne et suivi de deux personnages de Newline. Dans ce cas, nous avons utilisé le \ n Le personnage de Newline parce que nous fonctionnons sur une plate-forme de type Unix; Pour assurer la compatibilité multiplateforme, nous aurions utilisé le Php_eol constant.

Il est même possible de briser le message de réponse sur plusieurs lignes: dans ce cas, chaque ligne, comme dit précédemment, doit commencer par «données», et doit être suivie d'un seul caractère Newline. La nouvelle ligne supplémentaire n'est requise que sur la dernière ligne.

Le serveur peut également contrôler la fréquence à laquelle le client doit essayer de se reconnecter (par défaut est 3 secondes), et le nom du événement (par défaut est «message») envoyé au client. Pour personnaliser le premier, nous devons utiliser le recommencez directive suivie de l'intervalle de temps souhaité, exprimé en millisecondes. Par exemple, pour configurer un intervalle de 1 seconde:

Echo "Retry: 1000 \ n";

Notez que même ici, une nouvelle ligne de traîne est requise. Pour changer le nom de l'événement, nous devons plutôt utiliser le événement directif:

Echo "Event: Customevent \ n";

L'événement par défaut est «Message»: ceci est important car l'événement doit être spécifié dans le code JavaScript client lors de l'ajout de l'écouteur de l'événement, comme nous le verrons dans un instant.

Après avoir envoyé notre réponse, nous avons appelé le affleurer Fonction: Ceci est nécessaire pour ouvrir les données au client.

Code côté client

La première chose que nous allons faire le côté client est de préparer notre fichier HTML avec la liste des animaux disponibles:

C'est vraiment un HTML de base avec un peu de PHP pour afficher la liste des animaux au moment du chargement de la page et pour inclure notre .Fichier JS (script.js), mais servira notre objectif. Maintenant, voyons comment nous pouvons réellement utiliser les événements côté serveur. La première chose que nous devons faire est d'instancier un Objet source d'événement. Dans notre fichier javascript, écrivez:

Laissez eventsource = new Eventsource ('script.php '); 

Comme vous pouvez le voir, nous avons passé le chemin d'accès à notre script de serveur comme argument dans le Eventsource constructeur d'objets. Cet objet ouvrira une connexion au serveur. Maintenant, nous devons ajouter un auditeur d'événements, afin que nous puissions effectuer certaines actions lorsqu'un message est reçu du serveur:

Laissez eventsource = new Eventsource ('script.php '); Eventsource.addEventListener ("message", fonction (événement) let data = json.analyse analyse (événement.données); Laissez les listes = document.getElementsByTagName ("li"); pour (soit i = 0; i < listElements.length; i++)  let animal = listElements[i].textContent; if (!data.includes(animal))  listElements[i].style.color = "red";   ); 

Lorsqu'un message est reçu, nous utilisons le Json.analyse Méthode dans la ligne 4 pour transformer les données envoyées par le serveur (une chaîne, contenue dans le données propriété de l'objet de l'événement), dans un tableau javascript.

Après cela, nous bouclent dans les lignes 7-11 à travers tous les éléments avec le

Eventsource.fermer()