Live stream entre PHP et JavaScript

Nous voulons ici communiquer un flux du serveur vers le client, la meilleure solution que j’ai trouvé pour ça, c’est l’EventSource, c’est une classe javascript qui utilise le protocole Event Stream.
Ce protocole utilise un format statique assez simple, il est reconnu par la majorité des grands navigateurs et il permet d’envoyer continuellement des données au client sous forme d’événement. On en entend peu parler sur l’internet français, c’est dommage, c’est facile à utiliser et vraiment pratique. Nous allons voir comment l’utiliser avec PHP et Javascript.

 

L’Event Stream

Ces événements peuvent posséder 4 propriétés, nous n’utiliserons que les champs type et data ici, si vous le souhaitez, vous pouvez retrouver toutes les propriétés d’un event sur mozilla.org.

Le champs data est le plus important, il peut fonctionner tout seul, il contient les données à envoyer.
Voici un exemple simple:

data: Des données\n\n

Sur plusieurs lignes:

data: Des données\n
data: sur plusieurs lignes\n\n

Avec un type spécifié:

type: status\n
data: Nouveau statut\n\n

Vous pouvez ainsi remarquer que pour fermer un événement, on utiliser un double \n alors que pour terminer une ligne, on n’en met qu’un.

Le champs type permet de faire varier le type d’événement envoyé au navigateur et ainsi, on pourra envoyer des événements sous des formats totalement différents sans aucun soucis. Par défaut, le type est « message ».

 

Son implémentation en PHP

On veut à présent permettre à un script PHP accéder par une page web de diffuser un flux Event Stream en continu avec pour seule condition d’arrêt la déconnexion de l’utilisateur.

On commence par configurer PHP.

Voici un exemple de flux en PHP.

Je l’ai utilisé pour renvoyer une console SSH vers mon navigateur, pour ça, je vous conseille de voir cet article sur le Live stream d’une console SSH en PHP.

 

L’Event Source en JavaScript

Côté JavaScript, l’event source fonctionne entièrement en programmation orientée événement, ce qui signifie que vous n’allez pas interagir avec, juste réagir aux événements.

Il y a des événements qui peuvent être retournés par l’API, comme « error » et « open » mais autrement, vous pouvez enregistrer un événement selon le type que vous pouvez recevoir, si aucun listener n’est trouvé pour un type de message, le message est ignoré.
Ainsi, si mon serveur envoie des événements de type « status », je pourrais faire :

Il est ainsi très simple de recevoir des événements depuis notre application PHP mais il faut garder à l’idée que c’est unidirectionnel et que vous ne pouvez ni interagir avec le flux, ni le modifier, c’est le serveur qui décide ce qu’il envoie.
Après vous pouvez faire des scripts plus complexes qui vont permettre au script PHP de récupérer des commandes via un autre appel en AJAX.

 

Sources

Utilisation des envois d’événements côté serveur (server-sent events) sur mozilla.org
Stream Updates with Server-Sent Events sur html5rocks.com [en]

Facebook Profile photo
Florent

Je suis un développeur web à mon compte et je m'intéresse à beaucoup de choses en informatique...

Aucun commentaire

Poster un commentaire