𝗕𝘂𝗶𝗹𝗱𝗶𝗻𝗴 𝗥𝗲𝗮𝗹-𝗧𝗶𝗺𝗲 𝗔𝗻𝗴𝘂𝗹𝗮𝗿 𝗗𝗮𝘀𝗵𝗯𝗼𝗮𝗿𝗱𝘀

Kebanyakan papan pemuka terasa usang. Pengguna melihat data lama dan perlu klik segar semula. Anda mungkin menggunakan polling, tetapi ia membebankan pelayan anda secara berlebihan.

WebSockets menyelesaikan masalah ini. Pelayan menghantar kemas kini sebaik sahaja ia berlaku. Tiada keperluan untuk menyegarkan semula halaman.

Berikut adalah cara untuk membina papan pemuka masa nyata menggunakan Angular, RxJS, dan Signals.

Seni Bina

  • Gunakan RxJS webSocket untuk sambungan.
  • Gunakan Angular Signals untuk keadaan (state).
  • Gunakan satu stor tunggal untuk menyimpan data anda.
  1. Perkhidmatan WebSocket

Jangan buka sambungan baharu untuk setiap komponen. Gunakan shareReplay dalam perkhidmatan anda. Ini membolehkan pelbagai widget menggunakan satu sambungan tunggal.

Kendalikan ralat dengan menangkapnya dalam aliran (stream). Ini menghalang keseluruhan aplikasi anda daripada rosak apabila sambungan terputus.

  1. Stor Signal

Daripada membiarkan komponen menguruskan data, gunakan stor berasaskan Signal. Ini mewujudkan satu sumber kebenaran tunggal (single source of truth).

  • Simpan metrik seperti penggunaan CPU dan pengguna aktif.
  • Simpan sejarah ringkas amaran terkini.
  • Gunakan computed signals untuk menandakan keadaan kritikal.
  1. Komponen Tulen

Komponen anda harus kekal ringkas. Ia tidak sepatutnya mengendalikan logik. Ia hanya membaca daripada stor dan memaparkan UI. Ini menjadikan kod anda mudah untuk diuji dan diselenggara.

Tip Utama untuk Produksi

  • Status Sambungan: Sentiasa tunjukkan kepada pengguna sama ada mereka sedang dalam talian (live) atau sedang menyambung semula.
  • Exponential Backoff: Jangan cuba sambung semula setiap saat. Gunakan sela masa yang bertambah mengikut masa untuk melindungi pelayan anda.
  • Keselamatan: Hantar token pengesahan anda melalui parameter pertanyaan (query parameters) atau mesej pertama.

WebSockets berfungsi paling baik apabila anda memerlukan komunikasi dua hala. Jika anda hanya perlu menerima data, lihat pada Server-Sent Events (SSE).

Berhenti memaksa pengguna anda klik segar semula. Bina sesuatu yang sentiasa dalam talian.

Pernahkah anda membina ciri masa nyata dalam Angular? Adakah anda menggunakan WebSockets atau polling?

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