Tutoriel Yii : Affichage en temps réel de données en provenance du serveur à l’aide des Server-Side Events (SSE)
A. Bennouna 36682 vues 0 commentaire
tutoriel, Yii, HTML5, SSE, push, polling, Ajax
Grâce à HTML5 et aux SSE, rafraîchissez les pages Web de manière dynamique à partir du serveur.
Les technologies « push » à partir des serveurs Web
Il existe plusieurs méthodes et techniques très pratiques dans le cas où vous avez besoin d’appeler en asynchrone une ressource serveur périodiquement ou si vous êtes en attente d’éléments envoyés (« poussés ») par le serveur, mais nous vous en présentons ici une plutôt facile et simple à appliquer en utilisant HTML5 et ses événements initiés par le serveur : « Server-Sent Events », ou SSE.
Pour ce tutoriel, nous prenons l’exemple d’un système de messagerie interne à votre webapp Yii, et nous allons montrer comment afficher les nouveaux messages reçus de manière dynamique et en temps réel à destination de chaque utilisateur concerné.
Structure de la table des messages
Pour simplifier, nous utiliserons un modèle Utilisateur dont la table n’est pas représentée ici, et un modèle Message basé sur la structure de table suivante :
Modèle associé à la table des messages
Le modèle Message de base sera comme suit :
La vue dans laquelle nous allons afficher dynamiquement les messages
Si nous voulons afficher les messages dans toutes les pages de la webapp, nous pouvons utiliser le layout principal de l’application layouts/main.php, y inclure un div vide et un simple code jQuery (ou Zepto !) qui effectue l’appel SSE comme suit :
Vous remarquerez que le code JavaScript précise d’abord l’url appelée, qui consiste en l’action getMessage du contrôleur principal Site.
Nous restons à l’écoute de la réponse via l’événement onmessage, prenons ensuite la réponse de cette url (event.data) et l’ajoutons à notre div.
Le contrôleur à partir duquel nous allons « pousser » les messages
Nous mettrons la logique de l’application dans le contrôleur principal Site. L’action getMessage vérifiera à intervalle défini par l’appel JavaScript s’il y a un (ou des) nouveau(x) message(s), et renvoie un bloc HTML prêt qui sera ajouté à notre message div, comme suit :
Vous remarquerez que contrairement à un appel Ajax classique, la méthode SSE permet au serveur de garder les commandes et il n’est pas nécessaire d’avoir une quelconque intelligence au niveau du client JavaScript.
Dans notre exemple, et suite au premier appel, le serveur commande au client via le paramètre retry de lui renvoyer des requêtes toutes les 10 secondes (précisées en milliers de secondes), même en cas de succès.
Le paramètre retry est facultatif, et la valeur par défaut du navigateur sera utilisée s’il n’est pas spécifié par le serveur en réponse à l’appel SSE.
Bien entendu, vous pouvez avoir un code plus élaboré que nous essaierons de démontrer dans un billet ultérieur. Notamment, la mise à jour de la table Message devrait être plus précise : avec le code simpliste ci-dessus, certains messages auraient pu être envoyés à l’utilisateur pendant l’exécution de l’action getMessage, et ils seraient marqués comme lus mais non affichés pour autant.
N’oubliez pas de préciser éventuellement les règles d’accès à l’action getMessage !
Qu’en est-il du support SSE dans les différents navigateurs ?
Pour le moment, aucune version d’Internet Explorer ni du navigateur maison d’Android ne supporte les Server-Sent Events en standard. Les anciennes versions de Firefox (< 6), Chrome (< 6), Safari (< 5), Safari sur iOS (< 4), ou Opera (< 11) ne les supportent pas non plus.
Que faire en attendant qu’IE et Android supportent les SSE ?
Il y a un polyfill qui ajoute le support des SSE/EventSource à Internet Explorer (versions supérieures à IE 8) et Firefox (versions supérieures à 3.5).
Pour en savoir plus
Vous pouvez consulter les liens ci-dessous pour plus de détails sur les SSE, les Websockets et les autres techniques de « push » serveur :
- Spécifications CR du W3C pour les SSE
- HTML5 and Server-Sent Events
- WebSockets vs Server-Sent Events vs Long-polling
- Stream Updates with Server-Sent Events - aka Server-Sent Events vs. Websockets
Ce tutoriel a été publié pour la première fois en anglais par l’auteur le 3 mai 2012 en tant que Wiki sur le site communautaire de Yii : Real-time display of server push data using Server-Sent Events (SSE).