Créer un flux de notifications en temps réel

Un fil de notifications en temps réel combine un flux SSE pour les notifications entrantes et des points de terminaison REST pour marquer les éléments comme lus. Le composant conserve localement la liste des notifications, s’abonne au flux du serveur via EventSource dans un useEffect et gère les interactions de l’utilisateur (marquage comme lu, suppression) avec des mises à jour optimistes.

Un objet de notification possède généralement la structure suivante : { id: string, type: 'info' | 'warning' | 'success', message: string, timestamp: string, read: boolean }. Le champ type détermine l’icône et la couleur. Le champ read indique si l’utilisateur a pris connaissance de la notification. Le champ timestamp permet de regrouper les notifications par période.

Dans un useEffect, créez un EventSource connecté à /api/notifications/stream. À chaque événement de message, analysez les données JSON et ajoutez la nouvelle notification au début de l’état : setNotifications(prev => [JSON.parse(e.data), ...prev]). Ajouter la notification au début place la plus récente en tête, ce qui est la présentation habituelle des fils de notifications.

Déduisez le nombre de notifications non lues du tableau des notifications, sans état supplémentaire : const unreadCount = notifications.filter(n => !n.read).length. Affichez ce nombre sous forme de badge sur l’icône de cloche des notifications. Il se met automatiquement à jour chaque fois que l’état des notifications change : aucune gestion d’état distincte n’est nécessaire.

Lorsque l’utilisateur clique sur une notification, appliquez immédiatement une mise à jour optimiste indiquant qu’elle est lue : setNotifications(prev => prev.map(n => n.id === id ? { ...n, read: true } : n)). Envoyez ensuite en arrière-plan une requête PATCH vers /api/notifications/:id avec { read: true }. Annulez la mise à jour optimiste si la requête échoue.

Regroupez les notifications pour l’affichage : « Aujourd’hui » (même jour calendaire), « Hier » et « Plus anciennes ». Calculez le groupe à partir de l’horodatage de la notification et de la date actuelle : const today = new Date().toDateString(). Affichez chaque groupe dans une section distincte avec un libellé d’en-tête. Cela facilite considérablement la lecture d’une longue liste de notifications.

Lorsque l’utilisateur se trouve sur une autre page et qu’une nouvelle notification arrive via SSE, affichez une notification éphémère plutôt que de mettre à jour la liste des notifications, ou en complément de cette mise à jour. Utilisez un contexte global de notifications ou un magasin Zustand auquel l’abonné SSE et le composant d’affichage des notifications éphémères peuvent accéder. La notification éphémère disparaît après quelques secondes, tandis que la notification reste dans la liste.

Pour les notifications qui apparaissent dans toute l’application, stockez-les dans un contexte React ou un magasin Zustand au niveau racine de l’application. L’abonnement SSE se trouve dans un composant fournisseur situé près du sommet de l’arbre. N’importe quel composant peut lire les notifications ou en envoyer de nouvelles via le magasin partagé, ce qui permet d’afficher des notifications éphémères depuis n’importe quelle page.

EventSource gère automatiquement la reconnexion lorsque le réseau est interrompu, mais les changements de visibilité d’un onglet sont différents. Lorsque l’utilisateur revient sur un onglet après une longue absence, le serveur peut avoir mis fin à la connexion SSE. EventSource se reconnecte automatiquement et le mécanisme de reprise à partir de l’identifiant du dernier événement restitue les notifications que l’utilisateur a manquées pendant que l’onglet était en arrière-plan.

Les applications monopages perdent l’état des notifications conservé en mémoire lorsque l’utilisateur quitte la page. Stockez les notifications dans localStorage après chaque mise à jour : localStorage.setItem('notifications', JSON.stringify(notifications)). Lors du montage, initialisez l’état depuis localStorage avant la connexion au flux SSE. L’historique des notifications est ainsi conservé lors de la navigation entre les pages.

Le point de terminaison SSE côté serveur doit définir des en-têtes précis : Content-Type: text/event-stream, Cache-Control: no-cache et Connection: keep-alive. Dans Express/NestJS, écrivez les événements sous la forme data: ${JSON.stringify(payload)} — remarquez le double saut de ligne qui signale la fin d’un événement. Le serveur doit vider le tampon après chaque écriture afin que le navigateur reçoive immédiatement l’événement.

Quelle valeur doit avoir l’en-tête indiquant le type de contenu d’un point de terminaison SSE (Server-Sent Events) ?

Les fils de notifications combinent un abonnement SSE (useEffect avec nettoyage d’EventSource) et des modifications REST (PATCH pour marquer comme lu). La structure des données comprend un identifiant, un type, un message, un horodatage et un indicateur de lecture. Déduisez unreadCount par filtrage, puis regroupez les notifications par aujourd’hui, hier ou plus anciennes pour l’affichage. Utilisez un contexte global ou Zustand pour les notifications éphémères accessibles depuis toutes les pages. Conservez les données dans localStorage pour résister aux changements de page. Le point de terminaison SSE doit indiquer un flux d’événements textuels, désactiver la mise en cache et utiliser des délimiteurs d’événements constitués de deux sauts de ligne.