Creazione di un feed di notifiche in tempo reale

Un feed di notifiche in tempo reale combina uno stream SSE per le notifiche in arrivo con endpoint REST per contrassegnare gli elementi come letti. Il componente mantiene nello stato locale l'elenco delle notifiche, si iscrive allo stream del server tramite EventSource in un useEffect e gestisce le interazioni dell'utente (contrassegnare come letto, ignorare) con aggiornamenti ottimistici.

Un oggetto di notifica ha in genere questa struttura: { id: string, type: 'info' | 'warning' | 'success', message: string, timestamp: string, read: boolean }. Il campo type determina l'icona e il colore. Il campo read indica se l'utente ha preso visione della notifica. Il campo timestamp consente di raggruppare le notifiche per periodo.

In un useEffect, crei un EventSource connesso a /api/notifications/stream. A ogni evento message, analizzi il JSON e aggiungi la nuova notifica all'inizio dello stato: setNotifications(prev => [JSON.parse(e.data), ...prev]). L'inserimento all'inizio (comportamento di unshift) porta la notifica più recente in cima, secondo lo standard dei feed di notifiche.

Ricavi il conteggio delle notifiche non lette dall'array delle notifiche senza utilizzare uno stato aggiuntivo: const unreadCount = notifications.filter(n => !n.read).length. Mostri questo valore come badge sull'icona della campanella delle notifiche. Il conteggio si aggiorna automaticamente ogni volta che cambia lo stato delle notifiche: non è necessaria una gestione separata dello stato.

Quando l'utente fa clic su una notifica, applichi immediatamente un aggiornamento ottimistico che la contrassegna come letta: setNotifications(prev => prev.map(n => n.id === id ? { ...n, read: true } : n)). Invii quindi in background una richiesta PATCH a /api/notifications/:id con { read: true }. Ripristini l'aggiornamento ottimistico se la richiesta non riesce.

Raggruppi le notifiche per la visualizzazione: "Oggi" (stesso giorno di calendario), "Ieri" e "Meno recenti". Calcoli il gruppo utilizzando il timestamp della notifica e la data corrente: const today = new Date().toDateString(). Visualizzi ogni gruppo in una sezione separata con un'etichetta di intestazione. In questo modo è molto più semplice scorrere un lungo elenco di notifiche.

Quando l'utente si trova in un'altra pagina e arriva una nuova notifica tramite SSE, mostri una notifica toast invece di aggiornare l'elenco delle notifiche, oppure in aggiunta a tale aggiornamento. Utilizzi un contesto globale per le notifiche o uno store Zustand accessibile sia dal sottoscrittore SSE sia dal renderer dei toast. Il toast scompare dopo alcuni secondi, mentre la notifica rimane nell'elenco.

Per le notifiche visualizzate in tutta l'applicazione, le memorizzi in un contesto React o in uno store Zustand al livello radice dell'applicazione. La sottoscrizione SSE risiede in un componente provider vicino alla parte superiore dell'albero dei componenti. Qualsiasi componente può leggere le notifiche o inviarne di nuove tramite lo store condiviso, consentendo di visualizzare toast da qualsiasi pagina.

EventSource gestisce automaticamente la riconnessione quando la rete si interrompe, ma i cambiamenti di visibilità della scheda sono un caso diverso. Quando l'utente torna a una scheda dopo una lunga assenza, la connessione SSE potrebbe essere stata terminata dal server. EventSource si riconnette automaticamente e il meccanismo Last-Event-ID riproduce le notifiche perse mentre la scheda era in background.

Le applicazioni a pagina singola perdono lo stato delle notifiche in memoria quando si passa a un'altra pagina. Memorizzi le notifiche in localStorage dopo ogni aggiornamento: localStorage.setItem('notifications', JSON.stringify(notifications)). Al montaggio, inizializzi lo stato da localStorage prima che lo stream SSE stabilisca la connessione. In questo modo si conserva la cronologia delle notifiche durante la navigazione tra le pagine.

L'endpoint SSE lato server deve impostare intestazioni specifiche: Content-Type: text/event-stream, Cache-Control: no-cache e Connection: keep-alive. In Express/NestJS, scriva gli eventi come data: ${JSON.stringify(payload)}\n\n: noti la doppia nuova riga, che segnala la fine di un evento. Il server deve eseguire il flush dopo ogni scrittura per assicurarsi che il browser riceva immediatamente l'evento.

Qual è l'intestazione Content-Type corretta per un endpoint SSE (Server-Sent Events)?

I feed di notifiche combinano una sottoscrizione SSE (useEffect con la pulizia di EventSource) con mutazioni REST (PATCH per contrassegnare come letto). Struttura dei dati: {id, type, message, timestamp, read}. Ricavi unreadCount con filter e raggruppi le notifiche in oggi/ieri/meno recenti per la visualizzazione. Utilizzi un contesto globale o Zustand per i toast tra le pagine. Memorizzi i dati in localStorage per mantenere le notifiche durante la navigazione. L'endpoint SSE richiede Content-Type: text/event-stream, Cache-Control: no-cache e delimitatori degli eventi costituiti da una doppia nuova riga.