Создание ленты уведомлений в реальном времени

Лента уведомлений в реальном времени объединяет поток SSE для получения новых уведомлений с конечными точками REST для отметки элементов как прочитанных. Компонент хранит локальное состояние списка уведомлений, подписывается на поток сервера через EventSource в useEffect и обрабатывает действия пользователя (отметку как прочитанного, закрытие) с помощью оптимистичных обновлений.

Объект уведомления обычно имеет следующую структуру: { id: string, type: 'info' | 'warning' | 'success', message: string, timestamp: string, read: boolean }. Поле type определяет значок и цвет. Поле read показывает, подтвердил ли пользователь, что ознакомился с уведомлением. Поле timestamp позволяет группировать уведомления по периодам времени.

В useEffect создайте EventSource, подключённый к /api/notifications/stream. При каждом событии сообщения разберите JSON и добавьте новое уведомление в начало состояния: setNotifications(prev => [JSON.parse(e.data), ...prev]). Добавление в начало помещает самое новое уведомление наверх, что является стандартным подходом для лент уведомлений.

Вычисляйте количество непрочитанных уведомлений из массива notifications без дополнительного состояния: const unreadCount = notifications.filter(n => !n.read).length. Отображайте это число в виде индикатора на значке колокольчика уведомлений. Число обновляется автоматически при каждом изменении состояния уведомлений — отдельное управление состоянием не требуется.

Когда пользователь нажимает на уведомление, сразу примените оптимистичное обновление прочитанного: setNotifications(prev => prev.map(n => n.id === id ? { ...n, read: true } : n)). Затем в фоновом режиме отправьте запрос PATCH к /api/notifications/:id с { read: true }. Если запрос завершится ошибкой, отмените оптимистичное обновление.

Сгруппируйте уведомления для отображения: «Сегодня» (тот же календарный день), «Вчера» и «Более ранние». Определяйте группу по метке времени уведомления и текущей дате: const today = new Date().toDateString(). Отображайте каждую группу как отдельный раздел с заголовком. Это значительно упрощает просмотр длинного списка уведомлений.

Если пользователь находится на другой странице и через SSE поступает новое уведомление, покажите всплывающее уведомление вместо обновления списка уведомлений или в дополнение к нему. Используйте глобальный контекст уведомлений или хранилище Zustand, доступное и подписчику SSE, и компоненту отображения всплывающих уведомлений. Всплывающее уведомление исчезает через несколько секунд, а само уведомление сохраняется в списке.

Если уведомления должны отображаться во всём приложении, храните их в контексте React или хранилище Zustand на корневом уровне приложения. Подписка SSE размещается в компоненте-поставщике рядом с верхним уровнем дерева компонентов. Любой компонент может читать уведомления или отправлять новые через общее хранилище, что позволяет отображать всплывающие уведомления на любой странице.

EventSource автоматически обрабатывает переподключение при разрыве сети, но изменения видимости вкладки — это другая ситуация. Когда пользователь возвращается к вкладке после долгого отсутствия, соединение SSE могло быть закрыто сервером. EventSource подключается снова автоматически, а механизм Last-Event-ID повторно отправляет все уведомления, которые пользователь пропустил, пока вкладка была в фоновом режиме.

Одностраничные приложения теряют хранящееся в памяти состояние уведомлений при переходе со страницы. Сохраняйте уведомления в localStorage после каждого обновления: localStorage.setItem('notifications', JSON.stringify(notifications)). При монтировании инициализируйте состояние из localStorage до подключения потока SSE. Это сохраняет историю уведомлений при переходах между страницами.

Серверная конечная точка SSE должна устанавливать определённые заголовки: Content-Type: text/event-stream, Cache-Control: no-cache и Connection: keep-alive. В Express/NestJS отправляйте события в виде data: ${JSON.stringify(payload)}\n\n — обратите внимание на двойной перевод строки, который обозначает конец события. Сервер должен отправлять данные после каждой записи, чтобы браузер сразу получал событие.

Какое значение заголовка Content-Type является правильным для конечной точки SSE (событий, отправляемых сервером)?

Ленты уведомлений объединяют подписку SSE (useEffect с очисткой EventSource) с изменениями через REST (PATCH для отметки как прочитанного). Форма данных включает идентификатор, тип, сообщение, метку времени и признак прочитанности. Вычисляйте unreadCount фильтрацией, а для отображения группируйте уведомления по категориям «сегодня», «вчера» и «более ранние». Используйте глобальный контекст или Zustand для всплывающих уведомлений на разных страницах. Сохраняйте данные в localStorage, чтобы они не терялись при переходах. Для конечной точки SSE требуются Content-Type: text/event-stream, Cache-Control: no-cache и разделители событий в виде двойного перевода строки.