Utiliser Hotwire avec le protocole Mercure pour créer des pages web mises à jour en temps réel, sans JavaScript !
Publié le 19 janvier 2021
Read the English version of this article directly on Mercure’s and Hotwire’s websites.
Hotwire est un nouveau micro-framework front-end créé par l’équipe de Ruby On Rails qui permet de construire des sites et applications web bénéficiant d’une expérience utilisateur similaire à celle des Single-Page Applications, mais sans avoir à écrire de JavaScript. Au lieu d’écrire du code JavaScript pour récupérer les données encodées sous forme de documents JSON via une API web puis d’effectuer leur mise en forme côté client, Hotwire promeut le transfert direct de blocs de HTML contenant déjà ces données mises en forme. Ainsi, il est possible de continuer à utiliser les moteurs de templating traditionnels tels que ERB en Ruby ou Twig en PHP tout en bénéficiant de la rapidité et de la réactivité légendaires des SPA.
Hotwire Turbo (la bibliothèque au cœur du framework) est en soi impressionnante. Charger le script suffit à améliorer radicalement la fluidité de n’importe quelle application web traditionnelle, sans avoir à y apporter de modifications. Mais la fonctionnalité la plus décoiffante de l’outil est nommée Turbo Streams. Les Turbo Streams permettent aux serveurs de mettre à jour en temps réel les pages affichées dans les navigateurs des utilisateurs. Le serveur peut “pousser” aux clients les changements à appliquer au HTML déjà affiché.
Ça ne vous rappelle pas quelque chose ? Le protocole Mercure, une spécification ouverte développée par Les-Tilleuls.coop, permet de créer très facilement un canal de communication en temps réel entre un serveur et ses clients. Turbo Streams est agnostique du transport utilisé, c’est à vous de l’implémenter. Mercure comble ce manque, et permet de tirer parti au maximum de Hotwire en quelques lignes de code !
Commencez par installer Turbo ainsi qu’un hub Mercure. Utiliser Mercure pour alimenter un Turbo Stream est ensuite un jeu d’enfant :
import {connectStreamSource} from "@hotwired/turbo"; // The "topic" parameter can be any string or URI
const es = new EventSource("https://example.com/.well-known/mercure?topic=my-stream");
connectStreamSource(es);Comme vous pouvez le voir, aucune dépendance externe n’est nécessaire : la classe native EventSource est utilisée pour se connecter au point d’entrée SSE (Server-Sent Events) exposé par le hub Mercure.
Pour diffuser des messages via Turbo Streams, envoyez une simple requête HTTP POST au hub Mercure :
curl
-H 'Authorization: Bearer <snip>'
-d 'topic=my-stream'
-d 'data=<turbo-stream action=...'
-X POST
https://example.com/.well-known/mercure- topic doit être le même sujet que celui que nous avons utilisé dans le code JavaScript ;
- data contient les messages Turbo Streams à diffuser ;
- L'en-tête HTTP Authorization doit contenir un JWT de publication valide.
Toutes les autres fonctionnalités de Mercure, notamment la diffusion de mises à jour privées aux abonnés autorisés, sont également prises en charge.
Dans cet exemple, nous utilisons curl mais n’importe quel client HTTP ou bibliothèque client pour Mercure fonctionnera.
Pour déconnecter la source du flux, utilisez la fonction disconnectStreamSource() :
import { disconnectStreamSource } from "@hotwired/turbo";
disconnectStreamSource(es);Mercure fonctionne également très bien avec la bibliothèque Stimulus, un autre composant de Hotwire. Dans l'exemple suivant, nous créons un contrôleur Stimulus pour se connecter au flux SSE exposé par le hub Mercure lorsqu'un élément HTML est créé, et pour se déconnecter lorsqu'il est détruit :
// turbo_stream_controller.js
import {Controller} from "stimulus";
import {connectStreamSource, disconnectStreamSource} from "@hotwired/turbo";
export default class extends Controller {
static values = {url: String};
connect() {
this.es = new EventSource(this.urlValue);
connectStreamSource(this.es);
}
disconnect() {
this.es.close();
disconnectStreamSource(this.es);
}
}<div data-controller="stream" data-turbo-stream-url-value="https://example.com/.well-known/mercure?topic=my-stream">
<!-- ... -->
</div>Comme vous avez pu le voir dans cet article, utiliser Mercure avec Hotwire permet de transformer n’importe quel site web existant en application moderne, fluide et intuitive dont les données affichées aux utilisateurs peuvent être mises à jour en temps réel. Si vous souhaitez donner une nouvelle jeunesse à vos sites et applications existantes, n’hésitez pas à nous contacter pour en discuter avec nos experts !
Par ailleurs, ce n’est que le début de l’intégration entre Hotwire, Mercure, et les autres logiciels libres que nous réalisons. On vous prépare une grosse surprise pour bientôt !
