Utilisation d'EventSource avec Node.js et React Query
Afficher les mises à jour du back instantanément dans votre app React
Introduction
Lorsqu'il s'agit de mettre en place des mises à jour en temps réel dans une application web, deux technologies se distinguent : WebSockets et EventSource (Server-Sent Events). Bien que WebSockets fournisse une connexion bidirectionnelle, EventSource est souvent un choix plus simple et efficace pour des flux de données unidirectionnels (du serveur vers le client). EventSource est également plus facile à implémenter, fonctionne nativement avec les navigateurs sans bibliothèque supplémentaire, et gère automatiquement les reconnections en cas de défaillances du réseau. Dans cet article, nous allons explorer comment implémenter EventSource à la fois sur le backend avec Node.js et sur le frontend avec React Query.
Le code présenté est volontairement naïf afinc de vous montrer rapidement comment implémenter. A vous d'adapter cela à votre propre architecture.
Configuration du Backend avec Node.js
Commencez par installer Express.js :
Ensuite, créez un serveur Node.js pour envoyer des événements côté serveur :
Configuration du Frontend avec React Query
Commencez par installer les dépendances :
Ensuite, créez un composant React pour consommer les événements côté client :
Intégration de React Query Provider
Assurez-vous que votre App.jsx ou index.jsx ressemble à ceci pour inclure le React Query Provider :
Voilà, vous avez maintenant un système d'EventSource fonctionnant avec Node.js côté backend et React Query côté frontend. Cette configuration vous permet de recevoir des mises à jour en temps réel depuis le serveur, tout en simplifiant significativement la gestion et la mise en œuvre par rapport aux WebSockets.