Xây dựng Dashboard Angular thời gian thực

Hầu hết các dashboard đều tạo cảm giác lỗi thời. Người dùng thấy dữ liệu cũ và phải nhấn làm mới. Bạn có thể sử dụng polling, nhưng cách này gây áp lực quá lớn lên máy chủ.

WebSockets giải quyết vấn đề này. Máy chủ sẽ đẩy các bản cập nhật ngay khi chúng vừa xảy ra. Không cần phải làm mới.

Dưới đây là cách xây dựng một dashboard thời gian thực bằng Angular, RxJS và Signals.

Kiến trúc

  • Sử dụng RxJS webSocket để kết nối.
  • Sử dụng Angular Signals để quản lý trạng thái.
  • Sử dụng một store duy nhất để lưu trữ dữ liệu.
  1. WebSocket Service

Đừng mở một kết nối mới cho mỗi component. Hãy sử dụng shareReplay trong service của bạn. Điều này cho phép nhiều widget sử dụng chung một kết nối duy nhất.

Xử lý lỗi bằng cách bắt chúng trong stream. Điều này giúp ngăn ứng dụng của bạn bị lỗi hoàn toàn khi kết nối bị ngắt.

  1. Signal Store

Thay vì để các component quản lý dữ liệu, hãy sử dụng một store dựa trên Signal. Điều này tạo ra một nguồn dữ liệu duy nhất (single source of truth).

  • Lưu trữ các chỉ số như mức sử dụng CPU và người dùng đang hoạt động.
  • Lưu giữ một lịch sử nhỏ về các cảnh báo gần đây.
  • Sử dụng computed signals để đánh dấu các trạng thái quan trọng.
  1. Pure Components

Các component của bạn nên giữ sự đơn giản. Chúng không nên xử lý logic. Chúng chỉ đọc dữ liệu từ store và hiển thị UI. Điều này giúp mã nguồn của bạn dễ dàng kiểm thử và bảo trì.

Các mẹo quan trọng khi triển khai thực tế (Production)

  • Trạng thái kết nối: Luôn hiển thị cho người dùng biết họ đang ở chế độ trực tiếp (live) hay đang kết nối lại.
  • Exponential Backoff: Đừng thử kết nối lại mỗi giây. Hãy sử dụng một khoảng thời gian trễ tăng dần theo thời gian để bảo vệ máy chủ của bạn.
  • Bảo mật: Truyền các token xác thực qua query parameters hoặc tin nhắn đầu tiên.

WebSockets hoạt động tốt nhất khi bạn cần giao tiếp hai chiều. Nếu bạn chỉ cần nhận dữ liệu, hãy xem xét Server-Sent Events (SSE).

Đừng bắt người dùng phải nhấn làm mới nữa. Hãy xây dựng thứ gì đó luôn luôn trực tiếp.

Bạn đã từng xây dựng các tính năng thời gian thực trong Angular chưa? Bạn đã sử dụng WebSockets hay polling?

Nguồn: https://dev.to/rigole/building-real-time-dashboards-in-angular-with-websockets-a-complete-guide-10he