Discussion :

[Jarodd]

Bonjour,

Je suis en train de découvrir les Server-Sent Events (SSE) pour faire du push. Or je n'arrive pas à obtenir un simple affichage d'un message.

Mon code JS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
var sse = new EventSource('12_eventsource.php');
 
sse.addEventListener('message', function(event) {
    console.log(event.data);
}, false);
 
// J'ai aussi essayé avec :
sse.onmessage = function(event) {
    console.log(event.data);
}
 
sse.addEventListener('open', function(event) {
    console.log('Connection is opened');
}, false);
 
sse.addEventListener('error', function(event) {
    if (event.readyState == EventSource.CLOSED) {
        console.log('Connection was closed');
    }
}, false);

Mon code php (encodé en UTF-8) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
echo 'data : ' . time() . PHP_EOL;

J'ai bien le log de l'event open, mais pas les autres.
J'ai testé sous Firefox et Chromium, d'après Caniuse et MDN ces deux navigateurs supportent bien le SSE.

Voyez-vous ce qui cloche dans ce code ?

Merci pour votre aide.

[SylvainPV]

Hello

Bonne idée les Server Sent Events, c'est moins populaire que les WebSockets et pourtant très utile.

Est-ce que tu vois tes requêtes arriver via l'inspecteur de développement ? Je ne me souviens plus exactement où ça se trouve, mais avec les Webkit Developer Tools je me rappelle qu'on pouvait voir arriver les push de data en temps réel, ce qui était pratique pour déboguer.

Sinon le problème provient peut-être de l'implémentation côté serveur. Tu places bien ce code PHP dans une boucle infinie ? Il faut garder le canal ouvert.

regarde le code PHP d'exemple sur https://developer.mozilla.org/en-US/...er-sent_events

[p3ga5e]

Salut

Il faut respecter scrupuleusement le format du flux SSE !
Tu as oublié les 2 "LineFeed" (0x0A) et tu as un espace en trop entre data et :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
function (request, response)
{
    response.writeHead(200,{ "Content-Type":"text/event-stream"});
    setTimeout(function()
    {
        response.write('data: ' + (new Date()).toString() +'\n\n');
    },2000)
}

[Jarodd]

Merci pour vos réponses.

@SylvainPV : pourquoi faut-il une boucle ? J'ai repris le code d'un bouquin, il ne parle pas de boucle, mais indique ceci :

C'est bien le navigateur qui initie la connexion, et qui reste à l'écoute du serveur.

J'en comprends que c'est mon code JS qui est "bouclé". D'ailleurs dans mes logs dans la console, j'ai bien un appel toutes les 3 secondes environ, sans avoir défini de boucle.

@p3ga5e : je ne comprends pas ta remarque. le "data :" est une chaîne que je renvoie, que je mette "data" ou "plop" ne change rien, c'est une string à interprêter telle quelle, il n'y a pas de convention là dessus. Et s'il y en a une, elle est grammaticale, en français on met bien un espace avant un double-point.
Concernant les line-feed je mets bien un PHP_EOL à la fin de mon retour.

[Bovino]

Stream Updates with Server-Sent Events.

[Jarodd]

[SylvainPV]

pegase a raison, il y a un format à respecter scrupuleusement pour les SSE. Il est documenté ici : https://developer.mozilla.org/en-US/..._stream_format

Je ne sais pas si une boucle infinie est nécessaire en PHP, j'utilisais Node.js personnellement. Il faudrait vérifier que PHP ne ferme pas la connexion une fois la première réponse envoyée.

[Jarodd]