Budowanie kanału powiadomień w czasie rzeczywistym

Kanał powiadomień w czasie rzeczywistym łączy strumień SSE z przychodzącymi powiadomieniami i endpointy REST służące do oznaczania elementów jako przeczytane. Komponent przechowuje lokalnie stan listy powiadomień, subskrybuje strumień serwera za pomocą EventSource w useEffect i obsługuje interakcje użytkownika (oznaczanie jako przeczytane, odrzucanie) za pomocą optymistycznych aktualizacji.

Obiekt powiadomienia zwykle ma następującą strukturę: { id: string, type: 'info' | 'warning' | 'success', message: string, timestamp: string, read: boolean }. Pole type określa ikonę i kolor. Pole read informuje, czy użytkownik potwierdził zapoznanie się z powiadomieniem. Pole timestamp umożliwia grupowanie według przedziałów czasowych.

W useEffect należy utworzyć EventSource połączony z /api/notifications/stream. Przy każdym zdarzeniu message należy przetworzyć kod JSON i dodać nowe powiadomienie na początku stanu: setNotifications(prev => [JSON.parse(e.data), ...prev]). Dodawanie na początku (zachowanie unshift) umieszcza najnowsze powiadomienie na górze, co jest standardem w kanałach powiadomień.

Liczbę nieprzeczytanych należy wyliczać z tablicy powiadomień bez dodatkowego stanu: const unreadCount = notifications.filter(n => !n.read).length. Należy wyświetlić ją jako plakietkę przy ikonie dzwonka powiadomień. Liczba aktualizuje się automatycznie za każdym razem, gdy zmienia się stan powiadomień — nie jest potrzebne oddzielne zarządzanie stanem.

Po kliknięciu powiadomienia przez użytkownika należy natychmiast zastosować optymistyczną aktualizację odczytania: setNotifications(prev => prev.map(n => n.id === id ? { ...n, read: true } : n)). Następnie w tle należy wysłać żądanie PATCH do /api/notifications/:id z wartością { read: true }. Jeśli żądanie się nie powiedzie, należy wycofać optymistyczną aktualizację.

Powiadomienia można grupować na potrzeby wyświetlania: „Dzisiaj” (ten sam dzień kalendarzowy), „Wczoraj” i „Starsze”. Grupę należy obliczyć na podstawie znacznika czasu powiadomienia i bieżącej daty: const today = new Date().toDateString(). Każdą grupę należy renderować jako oddzielną sekcję z etykietą nagłówka. Znacznie ułatwia to przeglądanie długiej listy powiadomień.

Gdy użytkownik znajduje się na innej stronie i przez SSE nadejdzie nowe powiadomienie, należy wyświetlić toast zamiast aktualizowania listy powiadomień lub dodatkowo obok tej aktualizacji. Należy użyć globalnego kontekstu powiadomień albo magazynu Zustand, do którego mogą mieć dostęp zarówno subskrybent SSE, jak i renderer toastów. Toast znika po kilku sekundach, a powiadomienie pozostaje na liście.

Powiadomienia wyświetlane w całej aplikacji należy przechowywać w kontekście React lub magazynie Zustand na poziomie głównym aplikacji. Subskrypcja SSE powinna znajdować się w komponencie providera blisko szczytu drzewa. Każdy komponent może odczytywać powiadomienia lub wysyłać nowe za pośrednictwem współdzielonego magazynu, co umożliwia renderowanie toastów na dowolnej stronie.

EventSource automatycznie obsługuje ponowne łączenie po utracie sieci, ale zmiany widoczności karty to inny przypadek. Gdy użytkownik wróci do karty po dłuższej nieobecności, serwer mógł zakończyć połączenie SSE. EventSource ponownie połączy się automatycznie, a mechanizm Last-Event-ID odtworzy wszystkie powiadomienia, które użytkownik przegapił, gdy karta działała w tle.

Aplikacje jednostronicowe tracą przechowywany w pamięci stan powiadomień po przejściu na inną stronę. Po każdej aktualizacji należy zapisywać powiadomienia w localStorage: localStorage.setItem('notifications', JSON.stringify(notifications)). Przy montowaniu komponentu należy zainicjalizować stan na podstawie localStorage, zanim połączy się strumień SSE. Zachowuje to historię powiadomień podczas nawigacji między stronami.

Endpoint SSE po stronie serwera musi ustawić określone nagłówki: Content-Type: text/event-stream, Cache-Control: no-cache oraz Connection: keep-alive. W Express/NestJS zdarzenia należy zapisywać jako data: ${JSON.stringify(payload)}\n\n — należy zwrócić uwagę na podwójny znak nowej linii, który sygnalizuje koniec zdarzenia. Po każdym zapisie serwer musi opróżnić bufor, aby przeglądarka natychmiast otrzymała zdarzenie.

Jaki jest poprawny nagłówek Content-Type dla endpointu SSE (Server-Sent Events)?

Kanały powiadomień łączą subskrypcję SSE (useEffect z czyszczeniem EventSource) z mutacjami REST (PATCH do oznaczania jako przeczytane). Kształt danych: {id, type, message, timestamp, read}. Liczbę unreadCount należy wyliczać za pomocą filter, a powiadomienia grupować na potrzeby wyświetlania według kategorii dzisiaj/wczoraj/starsze. Do toastów dostępnych na różnych stronach należy użyć globalnego kontekstu lub Zustand. Aby zachować dane podczas nawigacji, należy zapisywać je w localStorage. Endpoint SSE wymaga nagłówków Content-Type: text/event-stream, Cache-Control: no-cache oraz separatorów zdarzeń w postaci podwójnego znaku nowej linii.