Einen Echtzeit-Benachrichtigungsfeed erstellen

Ein Echtzeit-Benachrichtigungs-Feed kombiniert einen SSE-Stream für eingehende Benachrichtigungen mit REST-Endpunkten zum Markieren von Einträgen als gelesen. Die Komponente verwaltet den lokalen Zustand der Benachrichtigungsliste, abonniert den Server-Stream über EventSource in einem useEffect und verarbeitet Benutzerinteraktionen (als gelesen markieren, ausblenden) mit optimistischen Aktualisierungen.

Ein Benachrichtigungsobjekt hat typischerweise folgende Struktur: { id: string, type: 'info' | 'warning' | 'success', message: string, timestamp: string, read: boolean }. Das Feld type bestimmt Symbol und Farbe. Das Feld read gibt an, ob der Benutzer die Benachrichtigung zur Kenntnis genommen hat. timestamp ermöglicht die Gruppierung nach Zeiträumen.

Erstellen Sie in einem useEffect eine EventSource-Verbindung zu /api/notifications/stream. Analysieren Sie bei jedem message-Ereignis das JSON und fügen Sie die neue Benachrichtigung am Anfang des Zustands ein: setNotifications(prev => [JSON.parse(e.data), ...prev]). Das Einfügen am Anfang (das Verhalten von unshift) platziert die neueste Benachrichtigung oben, was bei Benachrichtigungs-Feeds üblich ist.

Leiten Sie die Anzahl ungelesener Benachrichtigungen ohne zusätzlichen Zustand aus dem Benachrichtigungsarray ab: const unreadCount = notifications.filter(n => !n.read).length. Zeigen Sie sie als Badge am Glockensymbol für Benachrichtigungen an. Die Anzahl wird automatisch aktualisiert, sobald sich der Benachrichtigungszustand ändert – eine separate Zustandsverwaltung ist nicht erforderlich.

Wenn der Benutzer auf eine Benachrichtigung klickt, wenden Sie sofort eine optimistische Aktualisierung des Lesestatus an: setNotifications(prev => prev.map(n => n.id === id ? { ...n, read: true } : n)). Senden Sie anschließend im Hintergrund eine PATCH-Anfrage an /api/notifications/:id mit { read: true }. Machen Sie die optimistische Aktualisierung rückgängig, wenn die Anfrage fehlschlägt.

Gruppieren Sie Benachrichtigungen für die Anzeige in „Heute“ (derselbe Kalendertag), „Gestern“ und „Älter“. Ermitteln Sie die Gruppe anhand des Zeitstempels der Benachrichtigung und des aktuellen Datums: const today = new Date().toDateString(). Rendern Sie jede Gruppe als separaten Abschnitt mit einer Überschrift. Dadurch lässt sich eine lange Benachrichtigungsliste deutlich leichter überblicken.

Wenn sich der Benutzer auf einer anderen Seite befindet und über SSE eine neue Benachrichtigung eintrifft, zeigen Sie zusätzlich zur Aktualisierung der Benachrichtigungsliste oder an ihrer Stelle eine Toast-Benachrichtigung an. Verwenden Sie einen globalen Benachrichtigungskontext oder einen Zustandsspeicher von Zustand, auf den sowohl der SSE-Abonnent als auch der Toast-Renderer zugreifen können. Der Toast verschwindet nach einigen Sekunden, während die Benachrichtigung in der Liste erhalten bleibt.

Für Benachrichtigungen, die in der gesamten Anwendung erscheinen, speichern Sie diese auf der obersten Ebene der Anwendung in einem React-Kontext oder einem Zustand-Speicher. Das SSE-Abonnement befindet sich in einer Provider-Komponente nahe der Wurzel des Komponentenbaums. Jede Komponente kann Benachrichtigungen lesen oder über den gemeinsamen Speicher neue Benachrichtigungen auslösen, sodass Toasts von jeder Seite aus dargestellt werden können.

EventSource stellt die Verbindung bei einem Netzwerkausfall automatisch wieder her, Änderungen der Tab-Sichtbarkeit verhalten sich jedoch anders. Wenn der Benutzer nach längerer Abwesenheit zu einem Tab zurückkehrt, wurde die SSE-Verbindung möglicherweise vom Server beendet. EventSource stellt die Verbindung automatisch wieder her, und der Mechanismus mit Last-Event-ID überträgt alle Benachrichtigungen erneut, die der Benutzer verpasst hat, während der Tab im Hintergrund war.

Single-Page-Anwendungen verlieren den im Arbeitsspeicher gehaltenen Benachrichtigungszustand, wenn Sie von der Seite weg navigieren. Speichern Sie die Benachrichtigungen nach jeder Aktualisierung in localStorage: localStorage.setItem('notifications', JSON.stringify(notifications)). Initialisieren Sie den Zustand beim Mounten aus localStorage, bevor der SSE-Stream eine Verbindung herstellt. Dadurch bleibt der Benachrichtigungsverlauf beim Navigieren zwischen Seiten erhalten.

Der serverseitige SSE-Endpunkt muss bestimmte Header setzen: Content-Type: text/event-stream, Cache-Control: no-cache und Connection: keep-alive. In Express/NestJS schreiben Sie Ereignisse als data: ${JSON.stringify(payload)}\n\n – beachten Sie den doppelten Zeilenumbruch, der das Ende eines Ereignisses signalisiert. Der Server muss nach jedem Schreibvorgang flush aufrufen, damit der Browser das Ereignis sofort empfängt.

Wie lautet der korrekte Content-Type-Header für einen SSE-Endpunkt (Server-Sent Events)?

Benachrichtigungs-Feeds kombinieren ein SSE-Abonnement (useEffect mit Bereinigung von EventSource) mit REST-Mutationen (PATCH zum Markieren als gelesen). Datenstruktur: {id, type, message, timestamp, read}. Leiten Sie unreadCount mit filter ab und gruppieren Sie die Benachrichtigungen für die Anzeige nach heute/gestern/älter. Verwenden Sie einen globalen Kontext oder Zustand für seitenübergreifende Toasts. Speichern Sie die Daten in localStorage, damit sie beim Navigieren erhalten bleiben. Der SSE-Endpunkt erfordert Content-Type: text/event-stream, Cache-Control: no-cache und doppelte Zeilenumbrüche als Ereignis-Trennzeichen.