IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)

Vous êtes nouveau sur Developpez.com ? Créez votre compte ou connectez-vous afin de pouvoir participer !

Vous devez avoir un compte Developpez.com et être connecté pour pouvoir participer aux discussions.

Vous n'avez pas encore de compte Developpez.com ? Créez-en un en quelques instants, c'est entièrement gratuit !

Si vous disposez déjà d'un compte et qu'il est bien activé, connectez-vous à l'aide du formulaire ci-dessous.

Identifiez-vous
Identifiant
Mot de passe
Mot de passe oublié ?
Créer un compte

L'inscription est gratuite et ne vous prendra que quelques instants !

Je m'inscris !

L'API EventSource ce que c'est et comment l'utiliser

Le , par TiranusKBX

0PARTAGES

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 :
  1. Remontée de message uniquement ;
  2. 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.
Dans ce cas de figure, on utilisera le code suivant :
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
Dans ce cas de figure, on utilisera le code suivant :
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

Une erreur dans cette actualité ? Signalez-le nous !