𝗕𝘂𝗶𝗹𝗱𝗶𝗻𝗴 𝗥𝗲𝗮𝗹-𝗧𝗶𝗺𝗲 𝗔𝗻𝗴𝘂𝗹𝗮𝗿 𝗗𝗮𝘀𝗵𝗯𝗼𝗮𝗿𝗱𝘀 𝘄𝗶𝘁𝗵 𝗪𝗲𝗯𝗦𝗼𝗰𝗸𝗲𝘁𝘀

Dashboard ส่วนใหญ่มักจะดูไม่อัปเดต ผู้ใช้เข้ามาที่หน้าเว็บแล้วต้องนั่งรอ พวกเขาต้องคอยกดรีเฟรชหรือต้องรับมือกับการทำ polling ตลอดเวลา ซึ่งจะทำให้เซิร์ฟเวอร์ของคุณทำงานช้าลง

WebSockets จะเข้ามาเปลี่ยนสิ่งนี้ แทนที่ฝั่ง client จะต้องคอยร้องขอข้อมูล เซิร์ฟเวอร์จะเป็นฝ่ายส่งข้อมูล (push) มาให้แทน ซึ่งเหมาะอย่างยิ่งสำหรับข้อมูล metrics แบบสดๆ, กิจกรรมของผู้ใช้ หรือข้อมูลทางการเงิน

และนี่คือวิธีการสร้าง real-time dashboard ที่พร้อมใช้งานจริง (production-ready) โดยใช้ Angular, RxJS และ Signals

The Architecture

  • ใช้ RxJS webSocket เพื่อจัดการการเชื่อมต่อ
  • ใช้ shareReplay เพื่อให้หลายๆ component สามารถใช้การเชื่อมต่อเดียวกันได้
  • ใช้ Angular Signals เพื่อเป็นแหล่งข้อมูลความจริงหนึ่งเดียว (single source of truth)
  • ใช้ Store pattern เพื่อให้ component มีความเรียบง่าย

  1. The Service Layer อย่าเปิดการเชื่อมต่อใหม่สำหรับทุกๆ component ให้ใช้ webSocket subject จาก rxjs/webSocket และใช้ shareReplay เพื่อให้แอปพลิเคชันทั้งหมดของคุณใช้ stream เดียวกัน วิธีนี้จะช่วยป้องกันไม่ให้เซิร์ฟเวอร์ของคุณต้องรับภาระจากการเชื่อมต่อที่ไม่จำเป็นจำนวนมหาศาล

  2. The Signal Store หลีกเลี่ยงการใส่ business logic ไว้ใน component ของคุณ ให้สร้าง Store ที่ทำการ subscribe ไปยัง service ของคุณ โดย Store นี้จะเก็บ metrics และ alerts ไว้ใน Signals จากนั้น component ของคุณก็แค่ทำหน้าที่อ่านค่าจาก signals เหล่านี้ ซึ่งจะช่วยให้ UI ของคุณทำงานได้รวดเร็วและทดสอบได้ง่าย

  3. Clean Components Component ของคุณควรทำหน้าที่เพียงอย่างเดียว นั่นคือการ render ข้อมูล หากคุณใช้ Signal-based store โค้ดใน component ของคุณจะสั้นและกระชับมาก โดยทำเพียงแค่การอ่านค่าและแสดงผลบนหน้าจอ

Key Pro Tips

  • Connection Status: ควรแสดงตัวบ่งชี้ "Live" หรือ "Reconnecting" เสมอ เพราะผู้ใช้จำเป็นต้องทราบว่าข้อมูลที่เห็นนั้นเป็นปัจจุบันหรือไม่
  • Error Handling: ใช้เทคนิค exponential backoff สำหรับการเชื่อมต่อใหม่ อย่าส่งคำขอไปถล่มเซิร์ฟเวอร์ของคุณในขณะที่มันกำลังล่ม
  • Data Management: ใช้ .slice() กับ array ของ alerts เพื่อรักษาประวัติข้อมูลให้มีประโยชน์โดยไม่ใช้หน่วยความจำมากเกินไป

WebSockets จะทำงานได้ดีที่สุดเมื่อคุณต้องการการสื่อสารแบบสองทาง (two-way communication) แต่หากคุณต้องการเพียงแค่รับข้อมูลเท่านั้น ลองพิจารณาใช้ Server-Sent Events (SSE) ซึ่งเป็นทางเลือกที่ง่ายกว่า

เลิกทำให้ผู้ใช้ของคุณต้องคอยกดปุ่มรีเฟรชได้แล้ว

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