Создание Angular-дашбордов реального времени с помощью WebSockets
Большинство дашбордов кажутся неактуальными. Пользователи заходят на страницу и ждут. Они нажимают кнопку обновления или сталкиваются с постоянным опросом (polling), который замедляет ваш сервер.
WebSockets меняют ситуацию. Вместо того чтобы клиент запрашивал данные, сервер сам отправляет их. Это идеально подходит для живых метрик, активности пользователей или финансовых данных.
Вот как создать готовый к продакшену дашборд реального времени, используя Angular, RxJS и Signals.
Архитектура
- Используйте RxJS webSocket для управления соединением.
- Используйте shareReplay, чтобы несколько компонентов могли использовать одно соединение.
- Используйте Angular Signals в качестве единого источника истины (single source of truth).
- Используйте паттерн Store, чтобы компоненты оставались простыми.
Слой сервисов Не открывайте новое соединение для каждого компонента. Используйте webSocket subject из rxjs/webSocket. Используйте shareReplay, чтобы все ваше приложение работало с одним потоком. Это предотвратит обработку сервером сотен ненужных соединений.
Signal Store Избегайте размещения бизнес-логики в компонентах. Создайте Store, который подписывается на ваш сервис. Этот Store хранит ваши метрики и оповещения в Signals. Ваши компоненты затем просто считывают эти сигналы. Это делает ваш UI быстрым и легким в тестировании.
Чистые компоненты Ваши компоненты должны делать только одну вещь: отрисовывать данные. Если вы используете Store на базе Signals, код вашего компонента останется крошечным. Он считывает значение и отображает его на экране.
Ключевые советы профи
- Статус соединения: Всегда показывайте индикатор «Live» или «Reconnecting». Пользователям нужно знать, являются ли их данные актуальными.
- Обработка ошибок: Используйте экспоненциальную задержку (exponential backoff) для повторных подключений. Не «бомбардируйте» сервер запросами, когда он недоступен.
- Управление данными: Используйте .slice() для массивов оповещений. Это позволит сохранять полезную историю, не потребляя слишком много памяти.
WebSockets лучше всего работают, когда требуется двусторонняя связь. Если вам нужно только получать данные, рассмотрите Server-Sent Events (SSE) как более простой вариант.
Перестаньте заставлять пользователей нажимать кнопку обновления.
Источник: https://dev.to/rigole/building-real-time-dashboards-in-angular-with-websockets-a-complete-guide-10he