Tutoriel HTML

ACCUEIL HTML Introduction HTML Éditeurs HTML HTML de base Éléments HTML Attributs HTML En-têtes HTML Paragraphes HTML Styles HTML Formatage HTML Citations HTML Commentaires HTML Couleurs HTML HTMLCSS Liens HTML Images HTML Icône de favori HTML Tableaux HTML Listes HTML Bloc HTML et Inline Cours HTML Identifiant HTML Iframes HTML HTMLJavaScript Chemins d'accès aux fichiers HTML Tête HTML Mise en page HTML HTML réactif Code informatique HTML Sémantique HTML Guide de style HTML Entités HTML Symboles HTML Émojis HTML Jeu de caractères HTML Encodage d'URL HTML HTML contre XHTML

Formulaires HTML

Formulaires HTML Attributs de formulaire HTML Éléments de formulaire HTML Types d'entrée HTML Attributs d'entrée HTML Attributs du formulaire de saisie HTML

Graphiques HTML

Canevas HTML HTML SVG

Médias HTML

Médias HTML Vidéo HTML Audio HTML Modules externes HTML YouTube HTML

API HTML

Géolocalisation HTML Glisser/déposer HTML Stockage Web HTML Travailleurs Web HTML HTML SSE

Exemples HTML

Exemples HTML Questionnaire HTML Exercices HTML Certificat HTML Résumé HTML Accessibilité HTML

Références HTML

Liste de balises HTML Attributs HTML Attributs globaux HTML Prise en charge du navigateur HTML Événements HTML Couleurs HTML Canevas HTML HTML Audio/Vidéo Doctypes HTML Jeux de caractères HTML Encodage d'URL HTML Codes de langue HTML Messagerie HTTP Méthodes HTTP Convertisseur PX en EM Raccourcis clavier

API HTML SSE


Les événements envoyés par le serveur (SSE) permettent à une page Web d'obtenir des mises à jour à partir d'un serveur.


Événements envoyés par le serveur - Messagerie unidirectionnelle

Un événement envoyé par le serveur se produit lorsqu'une page Web reçoit automatiquement des mises à jour d'un serveur.

C'était également possible auparavant, mais la page Web devait demander si des mises à jour étaient disponibles. Avec les événements envoyés par le serveur, les mises à jour sont automatiques.

Exemples : mises à jour Facebook/Twitter, mises à jour des cours boursiers, flux d'actualités, résultats sportifs, etc.


Prise en charge du navigateur

Les nombres dans le tableau indiquent la première version du navigateur qui prend entièrement en charge les événements envoyés par le serveur.

API
SSE 6.0 79.0 6.0 5.0 11.5

Recevoir des notifications d'événements envoyées par le serveur

L'objet EventSource est utilisé pour recevoir les notifications d'événements envoyées par le serveur :

Exemple

var source = new EventSource("demo_sse.php");
source.onmessage = function(event) {
  document.getElementById("result").innerHTML += event.data + "<br>";
};

Exemple expliqué :

  • Créez un nouvel objet EventSource et spécifiez l'URL de la page envoyant les mises à jour (dans cet exemple "demo_sse.php")
  • Chaque fois qu'une mise à jour est reçue, l'événement onmessage se produit
  • Lorsqu'un événement onmessage se produit, placez les données reçues dans l'élément avec id="result"

Vérifier la prise en charge des événements envoyés par le serveur

Dans l'exemple tryit ci-dessus, il y avait quelques lignes de code supplémentaires pour vérifier la prise en charge par le navigateur des événements envoyés par le serveur :

if(typeof(EventSource) !== "undefined") {
  // Yes! Server-sent events support!
  // Some code.....
} else {
  // Sorry! No server-sent events support..
}


Exemple de code côté serveur

Pour que l'exemple ci-dessus fonctionne, vous avez besoin d'un serveur capable d'envoyer des mises à jour de données (comme PHP ou ASP).

La syntaxe du flux d'événements côté serveur est simple. Définissez l'en-tête "Content-Type" sur "text/event-stream". Vous pouvez maintenant commencer à envoyer des flux d'événements.

Code en PHP (demo_sse.php) :

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

$time = date('r');
echo "data: The server time is: {$time}\n\n";
flush();
?>

Code en ASP (VB) (demo_sse.asp):

<%
Response.ContentType = "text/event-stream"
Response.Expires = -1
Response.Write("data: The server time is: " & now())
Response.Flush()
%>

Code expliqué :

  • Définissez l'en-tête "Content-Type" sur "text/event-stream"
  • Spécifiez que la page ne doit pas être mise en cache
  • Sortez les données à envoyer ( commencez toujours par "data:")
  • Vider les données de sortie vers la page Web

L'objet EventSource

Dans les exemples ci-dessus, nous avons utilisé l'événement onmessage pour obtenir des messages. Mais d'autres événements sont également disponibles :

Events Description
onopen When a connection to the server is opened
onmessage When a message is received
onerror When an error occurs