From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/fr/web/api/server-sent_events/index.html | 107 +++++++++ .../using_server-sent_events/index.html | 264 +++++++++++++++++++++ 2 files changed, 371 insertions(+) create mode 100644 files/fr/web/api/server-sent_events/index.html create mode 100644 files/fr/web/api/server-sent_events/using_server-sent_events/index.html (limited to 'files/fr/web/api/server-sent_events') diff --git a/files/fr/web/api/server-sent_events/index.html b/files/fr/web/api/server-sent_events/index.html new file mode 100644 index 0000000000..6e128d7c6e --- /dev/null +++ b/files/fr/web/api/server-sent_events/index.html @@ -0,0 +1,107 @@ +--- +title: Server-sent events +slug: Web/API/Server-sent_events +tags: + - Server-sent events + - TopicStub +translation_of: Web/API/Server-sent_events +--- +

Habituellement, une page web doit envoyer une requête au serveur pour obtenir de nouvelles données. Avec les server-Sent events, le serveur peut envoyer de nouvelles données vers une page web à n'importe quel moment. La page web reçoit alors ces nouveaux messages qui peuvent être traités comme des événements contenant des données.

+ + + + + + + + +
+

Documentation

+ +
+
Utilisation des événements envoyés par le serveur
+
Un tutoriel sur l'écriture d'une partie côté serveur et côté client d'une application d'événements envoyée par le serveur.
+
EventSource référence
+
Une référence à l'API EventSource côté client.
+
+ +

Voir tout...

+ 		+

Outils

+ + + + + + +
+ +

Voir également

+ + + +

Spécification

+ + + +

Compatibilité des navigateurs

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FonctionnalitéChromeFirefox (Gecko)Internet ExplorerOperaSafari
EventSource support9{{CompatGeckoDesktop("6.0")}}{{CompatUnknown}}115
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FonctionnalitéAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
EventSource support{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/fr/web/api/server-sent_events/using_server-sent_events/index.html b/files/fr/web/api/server-sent_events/using_server-sent_events/index.html new file mode 100644 index 0000000000..3ca71f34a5 --- /dev/null +++ b/files/fr/web/api/server-sent_events/using_server-sent_events/index.html @@ -0,0 +1,264 @@ +--- +title: Utiliser les évènements envoyés par le serveur +slug: Web/API/Server-sent_events/Using_server-sent_events +translation_of: Web/API/Server-sent_events/Using_server-sent_events +--- +

Développer une application web qui utilise des server-sent events (évènements envoyés par le serveur) est assez facile. Vous aurez besoin d’un bout de code côté serveur pour transmettre des évènements en flux continu à l’application web ; mais côté client, les choses fonctionnent de manière quasiment identique à la gestion de n’importe quel autre type d’évènement.

+ +

Recevoir des évènements du serveur

+ +

L’API server-sent events est exposée par l’interface EventSource ; pour ouvrir une connexion vers le serveur afin de commencer à recevoir des évènements de celui-ci, vous devez créer un nouvel objet EventSource, en spécifiant l’URL d’un script côté serveur qui va générer les évènements. Par exemple :

+ +
var evtSource = new EventSource("ssedemo.php");
+
+ +

Si le script qui génère les évènements est hébergé sur un domaine différent, le nouvel objet EventSource doit être créé en spécifiant à la fois l’URI et un dictionnaire d’options. Par exemple, en supposant que le script client est sur example.com :

+ +
var evtSource = new EventSource("//api.example.com/ssedemo.php", { withCredentials: true } );
+ +
+

Note : l’utilisation d’EventSource n’est pas supportée par tous les navigateurs. Veuillez vérifier la section {{ anch("Compatibilité des navigateurs") }}.

+
+ +

Une fois que vous avez instancié votre source d’évènement, vous pouvez commencer à surveiller les messages du serveur, en écoutant l’évènement message :

+ +
evtSource.onmessage = function(e) {
+  var newElement = document.createElement("li");
+
+  newElement.innerHTML = "message: " + e.data;
+  eventList.appendChild(newElement);
+}
+
+ +

Ce code écoute les messages entrants (plus précisément, les notifications venant du serveur qui n’ont pas de champ event attaché) et ajoute le texte des messages à une liste dans le HTML du document.

+ +

Vous pouvez aussi écouter les évènements avec addEventListener() :

+ +
evtSource.addEventListener("ping", function(e) {
+  var newElement = document.createElement("li");
+
+  var obj = JSON.parse(e.data);
+  newElement.innerHTML = "ping at " + obj.time;
+  eventList.appendChild(newElement);
+}, false);
+
+ +

Ce code est similaire, à part qu’il sera appelé automatiquement si le serveur envoie un message dont le champ event est ping ; il analysera alors le JSON dans le champ data et l’affichera.

+ +

Envoyer un évènement depuis le serveur

+ +

Le script côté serveur qui envoie les évènements doit répondre en utilisant le type MIME text/event-stream. Chaque notification est envoyée sous la forme d’un bloc de texte se terminant par une paire de caractères saut de ligne (\n). Pour plus de détails sur le format du flux d’évènements, voir {{ anch("Format du flux d'évènements") }}.

+ +

Voici le code {{ Glossary("PHP") }} que nous utilisons pour notre exemple :

+ +
date_default_timezone_set("America/New_York");
+header("Content-Type: text/event-stream\n\n");
+
+$counter = rand(1, 10);
+while (1) {
+  // Chaque seconde, envoi d’un évènement "ping".
+
+  echo "event: ping\n";
+  $curDate = date(DATE_ISO8601);
+  echo 'data: {"time": "' . $curDate . '"}';
+  // Paire de sauts de ligne
+  echo "\n\n";
+
+  // Envoie un message simple à des intervalles aléatoires.
+
+  $counter--;
+
+  if (!$counter) {
+    echo 'data: This is a message at time ' . $curDate . "\n\n";
+    $counter = rand(1, 10);
+  }
+
+  ob_end_flush();
+  flush();
+  sleep(1);
+}
+
+ +

Ce code génère un évènement de type « ping » à chaque seconde. La donnée de chaque évènement est un objet JSON contenant un horodatage ISO 8601 qui correspond à l’heure à laquelle l’évènement a été généré. À des intervalles aléatoires, un message simple (sans type d’évènement) est envoyé.

+ +
+

Note : Vous pouvez trouver un exemple complet utilisant le code ci-dessus sur Github — voir Simple SSE demo using PHP.

+
+ +

Gestion des erreurs

+ +

Quand un problème survient (tel qu’un délai de réponse dépassé ou une erreur liée au contrôle d’accès), un évènement error est généré. Vous pouvez traiter ces cas d’erreur en implémentant la fonction de rappel onerror de l’objet EventSource.

+ +
evtSource.onerror = function(e) {
+  alert("EventSource failed.");
+};
+
+ +

À l’heure de Firefox 60, il ne semble pas exister de moyen de distinguer les différents types d’erreur.

+ +

Fermer un flux d’évènements

+ +

Par défaut, si la connexion entre le client et le serveur est rompue, elle sera relancée. Il est possible de la fermer explicitement à l’aide de la méthode .close().

+ +
evtSource.close();
+ +

Format du flux d’évènements

+ +

Le flux d’évènements est un simple flux de données de texte, qui doivent être encodées en UTF-8. Les messages dans le flux d’évènements sont séparés par une paire de sauts de ligne. Un caractère deux-points « : » en début de ligne est essentiellement un commentaire, et est ignoré.

+ +
+

Note : Une ligne de commentaire peut être utilisée pour empêcher les connexions d’expirer. Un serveur peut envoyer périodiquement des commentaires afin de garder la connexion ouverte.

+
+ +

Chaque message consiste en une ou plusieurs lignes de texte décrivant les champs de ce message. Chaque champ est représenté par le nom du champ, suivi d’un « : », suivi des données de texte pour la valeur de ce champ.

+ +

Champs

+ +

Chaque message reçu a une combinaison quelconque des champs suivants, un par ligne ·

+ +
+
event
+
Une chaîne identifiant le type d’évènement décrit. S’il est spécifié, un évènement sera envoyé dans le navigateur à l’écouteur défini pour l’évènement spécifié. Le code source de l’application doit utiliser addEventListener() pour écouter des évènements nommés. Le gestionnaire onmessage est appelé si aucun nom d’évènement n’est spécifié dans un message.
+
data
+
Le champ de données du message. Lorsque l’EventSource reçoit plusieurs lignes de message consécutives commençant par data:, il les concatène, en ajoutant un caractère saut de ligne entre chacune d’elles. Les sauts de ligne en fin de message sont supprimés.
+
id
+
L’ID d’évènement, qui sera mémorisé comme valeur d’ID du dernier évènement de l’objet EventSource.
+
+ +
+
retry
+
Le délai de reconnexion à utiliser lors de la tentative d’envoi de l’évènement. Il doit être un nombre entier, spécifiant le temps de reconnexion en millisecondes. Si une valeur non entière est spécifiée, le champ est ignoré.
+
+ +

Tous les autres noms de champs sont ignorés.

+ +
+

Note : Si une ligne ne contient aucun caractère deux-points, la ligne entière est considérée comme le nom du champ, avec un contenu vide.

+
+ +

Exemples

+ +

Messages de données seulement

+ +

Dans l’exemple suivant, trois messages sont envoyés. Le premier est simplement un commentaire, car il débute par un caractère deux-points. Comme mentionné précédemment, cela peut être utile pour maintenir la connexion si des messages doivent être transmis de façon irrégulière.

+ +

Le second message contient un champ data avec la valeur "some text". Le troisième message contient un champ data avec la valeur "another message\nwith two lines". Notez le caractère saut de ligne dans la valeur.

+ +
: this is a test stream
+
+data: some text
+
+data: another message
+data: with two lines
+
+ +

Évènements nommés

+ +

Cet exemple envoie une série d’évènements nommés. Chacun a un nom d’évènement spécifié par le champ event, et un champ data dont la valeur est une chaîne JSON appropriée avec les données nécéssaires au client pour réagir à l’évènement. Le champ data peut évidemment contenir n’importe quelles données de texte , il n’est pas obligatoirement au format JSON.

+ +
event: userconnect
+data: {"username": "bobby", "time": "02:33:48"}
+
+event: usermessage
+data: {"username": "bobby", "time": "02:34:11", "text": "Hi everyone."}
+
+event: userdisconnect
+data: {"username": "bobby", "time": "02:34:23"}
+
+event: usermessage
+data: {"username": "sean", "time": "02:34:36", "text": "Bye, bobby."}
+
+ +

Mélanger les messages

+ +

Il n’est pas obligatoire d’utiliser uniquement des messages sans nom ou des évènements nommés. Vous pouvez mélanger les deux dans un même flux d’évènements.

+ +
event: userconnect
+data: {"username": "bobby", "time": "02:33:48"}
+
+data: Ici un message système quelconque qui sera utilisé
+data: pour accomplir une tâche.
+
+event: usermessage
+data: {"username": "bobby", "time": "02:34:11", "text": "Hi everyone."}
+ +

Compatibilité des navigateurs

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Support de EventSource6{{ CompatNo }}{{ CompatGeckoDesktop("6.0") }}{{ CompatNo }}{{ CompatVersionUnknown }}5
Disponible dans les workers partagés et dédiés[1]{{ CompatVersionUnknown }}{{ CompatNo }}{{ CompatGeckoDesktop("53.0") }}{{ CompatNo }}{{ CompatVersionUnknown }}{{ CompatVersionUnknown }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Support de EventSource4.445{{ CompatNo }}124.1
Disponible dans les workers partagés et dédiés[1]{{ CompatVersionUnknown }}{{ CompatGeckoMobile("53.0") }}{{ CompatNo }}{{ CompatVersionUnknown }}{{ CompatVersionUnknown }}
+
+ +

[1] Mais pas dans les service workers pour le moment.

+ +

Références

+ +

Communauté WHATWG

+ +

https://html.spec.whatwg.org/multipage/comms.html#server-sent-events

+ +

Eric Bidelman sur le blog HTML5 ROCKS

+ +

http://www.html5rocks.com/en/tutorials/eventsource/basics/?redirect_from_locale=fr

-- cgit v1.2.3-54-g00ecf