Реализация real-time центра уведомлений
Представьте: ваш SaaS-продукт обрабатывает сотни событий в минуту — новые заказы, комментарии, статусы задач. Пользователи жалуются, что пропускают важные уведомления, а админка перегружена. На одном из проектов 20 000 пользователей одновременно генерировали 500 уведомлений в секунду, и без правильной архитектуры система падала. После внедрения нашего решения нагрузка на сервер снизилась на 70%. Мы решили эту проблему, внедрив real-time центр уведомлений на связке Laravel + WebSocket + React. Под капотом — оптимизированная модель БД, асинхронная доставка и продуманный UX.
Проблемы, которые решает центр уведомлений
Традиционные решения (polling) создают избыточную нагрузку на сервер: каждые 5 секунд — запрос к БД. При 1000 активных пользователей это 200 RPS только на проверку уведомлений. WebSocket (Laravel Echo + Pusher) дает push-модель: уведомление приходит мгновенно, без лишних запросов. Это снижает TTFB в 3–4 раза и улучшает Core Web Vitals. Например, после внедрения на проекте с 5000 DAU количество жалоб на задержки уведомлений сократилось на 90%. Другая проблема — потеря уведомлений из-за неверной архитектуры: клиент может не получить событие, если WebSocket-соединение разорвано. Наше решение использует очереди Laravel с автоматическим повторением и механизмом подтверждения доставки.
Выбор драйвера WebSocket
| Драйвер | Хостинг | Масштабирование | Задержка | Особенности |
|---|---|---|---|---|
| Pusher | SaaS | Встроено | <20ms | Быстрый старт, фиксированная ежемесячная плата |
| Soketi | Self-hosted | Горизонтальное через Redis | <50ms | Бесплатно, полный контроль |
| Laravel Reverb | Self-hosted | Горизонтальное через Redis | <30ms | Опенсорс, совместимость с Laravel |
Pusher лучше для быстрого старта, Soketi и Reverb — для полного контроля и экономии при большом количестве пользователей. Выбор зависит от требований к SLA: SaaS дает предсказуемую стоимость, self-hosted — ниже затраты на инфраструктуру. Для небольших проектов достаточно Pusher, а для enterprise-систем с десятками тысяч коннектов лучше подходит Soketi.
Laravel Broadcasting обеспечивает push-уведомления в реальном времени через WebSocket, что снижает задержку до 50 мс.
| Тип уведомления | Описание | Пример данных |
|---|---|---|
| Системное | Ошибка, предупреждение | 'У вас закончились лицензии' |
| Социальное | Лайки, комментарии | 'Пользователь X оставил комментарий' |
| Бизнес-событие | Заказ, оплата | 'Новый заказ №123' |
Структура БД и индексы
Почему важны индексы в таблице уведомлений?
Без индексов запросы на выборку непрочитанных уведомлений будут сканировать всю таблицу. На таблице с миллионами строк это приводит к тайм-аутам. Мы используем покрывающий индекс по (user_id, read_at, created_at DESC), который ускоряет сортировку и фильтрацию в 10 раз. Размер таблицы уведомлений может достигать 10 миллионов строк, и без индексов запросы выполняются за 5–10 секунд вместо 50 мс. Такая структура обеспечивает быструю вставку и выборку, а индекс покрывает 95% запросов.
CREATE TABLE notifications (
id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
user_id INTEGER NOT NULL REFERENCES users(id) ON DELETE CASCADE,
type VARCHAR(100) NOT NULL,
icon VARCHAR(50),
title VARCHAR(255),
body TEXT,
url VARCHAR(500),
data JSONB NOT NULL DEFAULT '{}',
read_at TIMESTAMPTZ,
created_at TIMESTAMPTZ NOT NULL DEFAULT NOW()
);
CREATE INDEX ON notifications(user_id, read_at, created_at DESC);
Дополнительно можно добавить индекс по type для фильтрации по категориям.
Laravel: API эндпоинты и Broadcasting
class NotificationController extends Controller
{
public function index(Request $request): JsonResponse
{
$notifications = auth()->user()->notifications()
->latest()
->limit(50)
->get();
return response()->json([
'notifications' => NotificationResource::collection($notifications),
'unread_count' => $notifications->whereNull('read_at')->count(),
]);
}
public function markRead(Request $request): JsonResponse
{
$query = auth()->user()->notifications()->whereNull('read_at');
if ($request->id) {
$query->where('id', $request->id);
}
$query->update(['read_at' => now()]);
return response()->json(['success' => true]);
}
public function send(User $user, array $data): void
{
$notification = $user->notifications()->create($data);
broadcast(new NotificationCreatedEvent($user->id, $notification))->toOthers();
}
}
Laravel Echo + WebSocket: клиентская интеграция
// hooks/useNotifications.ts
import Echo from 'laravel-echo';
import Pusher from 'pusher-js';
window.Pusher = Pusher;
const echo = new Echo({
broadcaster: 'pusher',
key: import.meta.env.VITE_PUSHER_KEY,
cluster: import.meta.env.VITE_PUSHER_CLUSTER,
forceTLS: true,
});
export function useNotifications(userId: number) {
const [notifications, setNotifications] = useState<Notification[]>([]);
const [unreadCount, setUnreadCount] = useState(0);
useEffect(() => {
api.get('/api/notifications').then(({ data }) => {
setNotifications(data.notifications);
setUnreadCount(data.unread_count);
});
const channel = echo.private(`notifications.${userId}`)
.listen('.NotificationCreated', (event: { notification: Notification }) => {
setNotifications(prev => [event.notification, ...prev].slice(0, 50));
setUnreadCount(c => c + 1);
if (Notification.permission === 'granted') {
new Notification(event.notification.title ?? 'Новое уведомление', {
body: event.notification.body ?? undefined,
icon: '/icon-192.png',
});
}
});
return () => channel.stopListening('.NotificationCreated');
}, [userId]);
const markAllRead = async () => {
await api.post('/api/notifications/mark-read');
setNotifications(prev => prev.map(n => ({ ...n, read_at: new Date().toISOString() })));
setUnreadCount(0);
};
return { notifications, unreadCount, markAllRead };
}
React: UI компонент
function NotificationBell({ userId }: { userId: number }) {
const { notifications, unreadCount, markAllRead } = useNotifications(userId);
const [isOpen, setIsOpen] = useState(false);
return (
<div className="notification-bell">
<button
onClick={() => setIsOpen(!isOpen)}
aria-label={`${unreadCount} непрочитанных уведомлений`}
aria-expanded={isOpen}
aria-haspopup="true"
>
🔔
{unreadCount > 0 && (
<span className="badge" aria-hidden>{unreadCount > 99 ? '99+' : unreadCount}</span>
)}
</button>
{isOpen && (
<div className="notification-panel" role="dialog" aria-label="Уведомления">
<header>
<h2>Уведомления</h2>
{unreadCount > 0 && (
<button onClick={markAllRead}>Прочитать все</button>
)}
</header>
<ul>
{notifications.length === 0 && <li className="empty">Нет уведомлений</li>}
{notifications.map(notification => (
<li key={notification.id} className={notification.read_at ? 'read' : 'unread'}>
{notification.url ? (
<a href={notification.url}>{notification.title}</a>
) : (
<span>{notification.title}</span>
)}
<time dateTime={notification.created_at}>{timeAgo(notification.created_at)}</time>
{notification.body && <p>{notification.body}</p>}
</li>
))}
</ul>
</div>
)}
</div>
);
}
Процесс работы и сроки
Как гарантируется стабильность real-time уведомлений?
Гарантируем uptime 99.9% для центра уведомлений. Для этого используем очереди (Laravel Queues) с retry-логикой при сбоях. На клиенте — автоматическое переподключение через Echo (Reconnect). Для Pusher — fallback на SSE. Self-hosted — мониторинг через Laravel Horizon и алерты в Telegram. Многолетний опыт работы со сложными web-приложениями, более 20 внедрений центров уведомлений. Прозрачный процесс гарантирует, что вы получите работающее решение в оговоренные сроки.
- Аналитика — разбираем требования, нагрузку, выбираем драйвер WebSocket.
- Проектирование — проектируем схему БД, API, events.
- Реализация — пишем код, тестируем в staging.
- Тестирование — нагрузочные тесты (10 000+ коннектов), проверка fallback.
- Деплой — настройка production-окружения, мониторинг.
Что входит в работу
- Документация: архитектура, схема БД, последовательность событий, настройка окружения.
- Код: backend (Laravel), frontend (React), конфигурация очередей и broadcasting.
- Доступы к репозиторию и CI/CD.
- Обучение команды: 1–2 онлайн-встречи.
- Поддержка: 1 месяц после внедрения.
Инвестиции в центр уведомлений окупаются за счёт снижения нагрузки и лояльности пользователей. Чтобы получить готовое решение, свяжитесь с нами — мы проведем аудит вашего проекта и предложим оптимальную архитектуру. Закажите консультацию наших инженеров. Получите консультацию инженера.
Срок реализации
Базовая интеграция: 2–3 дня. Self-hosted WebSocket (Soketi/Laravel Reverb): +1 день. Если нужна кастомная логика группировки или фильтрации — срок обсуждается отдельно.