L'API EventSource introduite dans les spécificités accompagnant le HTML5 sert à récupérer et traiter des événements/messages renvoyés par un serveur sur une connexion HTTP continue.Les données sont retournées au format "text/event-stream".
Une source d’événement peut être déclarée de la façon suivante :
| Code Javascript : | Sélectionner tout |
var sourceEvents = new EventSource("http://urlsite/events.php");
Il y a deux utilisations possibles de cette connexion :
- Remontée de message uniquement ;
- Remontée d’événement avec ou sans données.
Dans tous les cas, les "messages" doivent être séparés par deux mises à la ligne servant à distinguer les blocs, dans le cas contraire cela signifie que la mise à la ligne fait partie des données.
Exemple de données message uniquement :
data: This is the first message.
data: This is the second message, it
data: has two lines.
data: This is the third message.
| Code Javascript : | Sélectionner tout |
1 2 3 4 | sourceEvents.onmessage = function (event) { console.log(event.data); //traitement à effectuer }; |
Voici maintenant un cas avec des événements :
event: add
data: 73857293
event: remove
data: 2153
event: add
data: 113411
| Code Javascript : | Sélectionner tout |
1 2 3 4 | sourceEvents.addEventListener("change", function (event) { console.log(event.data); //traitement à effectuer }, false); |
Dans le cas plus que probable où vous auriez une erreur, vous pouvez créer votre propre gestionnaire :
| Code Javascript : | Sélectionner tout |
1 2 3 4 5 6 7 8 9 | sourceEvents.onerror = function (e) { console.log(e); if (sourceEvents.readyState == 2) { // traitement en cas de déconnexion définitive } if (sourceEvents.readyState == 0) { //traitement dans le cas d'une déconnexion temporaire } }; |
/!\ En cas de déconnexion, celle-ci est relancée automatiquement au bout de 3 secondes par le navigateur.
Sources