𝗕𝘂𝗶𝗹𝗱𝗶𝗻𝗴 𝗥𝗲𝗮𝗹-𝗧𝗶𝗺𝗲 𝗔𝗻𝗴𝘂𝗹𝗮𝗿 𝗗𝗮𝘀𝗵𝗯𝗼𝗮𝗿𝗱𝘀
பெரும்பாலான டேஷ்போர்டுகள் (dashboards) பழைய தரவுகளைக் கொண்டிருப்பதாகவே உணர்த்துகின்றன. பயனர்கள் பழைய தரவுகளைப் பார்க்க வேண்டியுள்ளது மற்றும் ஒவ்வொரு முறையும் 'refresh' செய்ய வேண்டியுள்ளது. நீங்கள் 'polling' முறையைப் பயன்படுத்தலாம், ஆனால் அது உங்கள் சர்வர் (server) மீது அதிக சுமையை ஏற்படுத்தும்.
WebSockets இதற்குத் தீர்வாக அமைகிறது. நிகழ்வுகள் நடக்கும் அதே நொடியில் சர்வர் அவற்றை உங்களுக்குத் தெரிவிக்கும் (pushes updates). இதற்காக நீங்கள் 'refresh' செய்யத் தேவையில்லை.
Angular, RxJS மற்றும் Signals ஆகியவற்றைப் பயன்படுத்தி ஒரு real-time dashboard-ஐ எவ்வாறு உருவாக்குவது என்பதை இங்கே காண்போம்.
The Architecture
- இணைப்பிற்கு RxJS webSocket-ஐப் பயன்படுத்தவும்.
- நிலையை (state) நிர்வகிக்க Angular Signals-ஐப் பயன்படுத்தவும்.
- தரவுகளைச் சேமிக்க ஒரு ஒற்றை store-ஐப் பயன்படுத்தவும்.
- The WebSocket Service
ஒவ்வொரு component-க்கும் புதிய இணைப்பைத் தொடங்க வேண்டாம். உங்கள் service-இல் shareReplay-ஐப் பயன்படுத்தவும். இது பல widgets ஒரே இணைப்பைப் பயன்படுத்த அனுமதிக்கும்.
Stream-இல் பிழைகளைக் கண்டறிந்து (catching errors) அவற்றைச் சரிசெய்வதன் மூலம் பிழைகளைக் கையாளவும். இது இணைப்பு துண்டிக்கப்படும்போது உங்கள் முழு ஆப்-உம் (app) செயலிழப்பதைத் தடுக்கும்.
- The Signal Store
தரவுகளை component-களே நிர்வகிப்பதற்குப் பதிலாக, Signal-அடிப்படையிலான store-ஐப் பயன்படுத்தவும். இது ஒரு 'single source of truth'-ஐ உருவாக்குகிறது.
- CPU பயன்பாடு மற்றும் செயலில் உள்ள பயனர்கள் போன்ற அளவீடுகளை (metrics) சேமிக்கவும்.
- சமீபத்திய எச்சரிக்கைகளின் (alerts) சிறிய வரலாற்றைப் பராமரிக்கவும்.
- முக்கியமான நிலைகளைக் (critical states) கண்டறிய computed signals-ஐப் பயன்படுத்தவும்.
- Pure Components
உங்கள் component-கள் எளிமையாக இருக்க வேண்டும். அவை லாஜிக்கை (logic) கையாளக்கூடாது. அவை store-லிருந்து தரவைப் படித்து UI-ஐ மட்டும் காட்ட வேண்டும். இது உங்கள் குறியீட்டை (code) எளிதாகச் சோதிக்கவும் பராமரிக்கவும் உதவும்.
Key Tips for Production
- Connection Status: பயனர்கள் நேரலையில் (live) இருக்கிறார்களா அல்லது மீண்டும் இணைக்கப்படுகிறார்களா (reconnecting) என்பதை எப்போதும் காட்டவும்.
- Exponential Backoff: ஒவ்வொரு வினாடியும் இணைப்பை மீண்டும் முயற்சிக்க வேண்டாம். உங்கள் சர்வரைப் பாதுகாக்க, காலப்போக்கில் அதிகரிக்கும் காலதாமதத்தைப் (delay) பயன்படுத்தவும்.
- Security: உங்கள் auth tokens-களை query parameters அல்லது முதல் செய்தியின் மூலம் அனுப்பவும்.
இருவழித் தொடர்புகளுக்கு (two-way communication) WebSockets மிகச்சிறந்தவை. உங்களுக்குத் தரவைப் பெற மட்டுமே தேவைப்பட்டால், Server-Sent Events (SSE)-ஐப் பயன்படுத்தலாம்.
பயனர்களை 'refresh' செய்யச் செய்வதை நிறுத்துங்கள். எப்போதும் நேரலையில் இருக்கும் ஒன்றை உருவாக்குங்கள்.
நீங்கள் Angular-இல் real-time அம்சங்களை உருவாக்கியுள்ளீர்களா? WebSockets பயன்படுத்தினீர்களா அல்லது polling முறையைப் பயன்படுத்தினீர்களா?
Source: https://dev.to/rigole/building-real-time-dashboards-in-angular-with-websockets-a-complete-guide-10he