రియల్-టైమ్ Angular డ్యాష్బోర్డ్లను నిర్మించడం
చాలా డ్యాష్బోర్డ్లు పాతవిగా అనిపిస్తాయి. వినియోగదారులు పాత డేటాను చూస్తారు మరియు రిఫ్రెష్ చేయాల్సి ఉంటుంది. మీరు polling ఉపయోగించవచ్చు, కానీ అది మీ సర్వర్పై ఎక్కువ భారాన్ని పెంచుతుంది.
WebSockets దీనిని పరిష్కరిస్తాయి. అప్డేట్లు జరిగిన వెంటనే సర్వర్ వాటిని పంపిస్తుంది. రిఫ్రెష్ చేయాల్సిన అవసరం లేదు.
Angular, RxJS మరియు Signals ఉపయోగించి రియల్-టైమ్ డ్యాష్బోర్డ్ను ఎలా నిర్మించాలో ఇక్కడ ఉంది.
The Architecture
- కనెక్షన్ కోసం RxJS
webSocketఉపయోగించండి. - స్టేట్ కోసం Angular Signals ఉపయోగించండి.
- మీ డేటాను నిల్వ చేయడానికి ఒకే ఒక store ఉపయోగించండి.
- The WebSocket Service
ప్రతి కాంపోనెంట్ కోసం కొత్త కనెక్షన్ను తెరవకండి. మీ సర్వీస్లో shareReplay ఉపయోగించండి. ఇది బహుళ విడ్జెట్లు ఒకే కనెక్షన్ను ఉపయోగించుకోవడానికి అనుమతిస్తుంది.
స్ట్రీమ్లో ఎర్రర్లను క్యాప్చర్ చేయడం ద్వారా వాటిని హ్యాండిల్ చేయండి. కనెక్షన్ తెగిపోయినప్పుడు మీ మొత్తం యాప్ పాడవకుండా ఇది నిరోధిస్తుంది.
- The Signal Store
డేటాను కాంపోనెంట్లు నిర్వహించే బదులు, Signal-ఆధారిత storeని ఉపయోగించండి. ఇది ఒకే ఒక single source of truthను సృష్టిస్తుంది.
- CPU వినియోగం మరియు యాక్టివ్ యూజర్ల వంటి మెట్రిక్స్ను నిల్వ చేయండి.
- ఇటీవలి అలర్ట్ల యొక్క చిన్న హిస్టరీని ఉంచండి.
- క్రిటికల్ స్టేట్లను గుర్తించడానికి computed signals ఉపయోగించండి.
- Pure Components
మీ కాంపోనెంట్లు సరళంగా ఉండాలి. అవి లాజిక్ను నిర్వహించకూడదు. అవి కేవలం store నుండి డేటాను చదివి, UIని రెండర్ చేయాలి. ఇది మీ కోడ్ను టెస్ట్ చేయడం మరియు మెయింటైన్ చేయడం సులభతరం చేస్తుంది.
Key Tips for Production
- Connection Status: వినియోగదారులు లైవ్లో ఉన్నారా లేదా రీకనెక్ట్ అవుతున్నారా అనేది ఎల్లప్పుడూ చూపించండి.
- Exponential Backoff: ప్రతి సెకనుకు కనెక్షన్లను మళ్ళీ ప్రయత్నించకండి. మీ సర్వర్ను రక్షించడానికి కాలక్రమేణా పెరిగే డిలే (delay)ని ఉపయోగించండి.
- Security: మీ auth టోకెన్లను క్వెరీ పారామీటర్ల ద్వారా లేదా మొదటి మెసేజ్ ద్వారా పంపండి.
మీకు టూ-వే కమ్యూనికేషన్ (two-way communication) అవసరమైనప్పుడు WebSockets ఉత్తమంగా పనిచేస్తాయి. మీకు కేవలం డేటాను స్వీకరించడం మాత్రమే కావాలంటే, Server-Sent Events (SSE)ని చూడండి.
మీ వినియోగదారులను రిఫ్రెష్ చేయమని అడగడం ఆపండి. ఎల్లప్పుడూ లైవ్లో ఉండేలా ఏదైనా నిర్మించండి.
మీరు Angularలో రియల్-టైమ్ ఫీచర్లను నిర్మించారా? మీరు WebSockets ఉపయోగించారా లేదా polling ఉపయోగించారా?
Source: https://dev.to/rigole/building-real-time-dashboards-in-angular-with-websockets-a-complete-guide-10he