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

చాలా డ్యాష్‌బోర్డ్‌లు పాతవిగా (stale) అనిపిస్తాయి. వినియోగదారులు ఒక పేజీకి వచ్చినప్పుడు వేచి ఉండాల్సి వస్తుంది. వారు రిఫ్రెష్ బటన్ నొక్కడం లేదా సర్వర్‌ను నెమ్మదింపజేసే నిరంతర పోలింగ్ (polling) ప్రక్రియతో ఇబ్బంది పడాల్సి వస్తుంది.

WebSockets దీనిని మారుస్తాయి. క్లయింట్ డేటా కోసం అడిగే బదులు, సర్వర్ దానిని పంపిస్తుంది (pushes). ఇది లైవ్ మెట్రిక్స్, యూజర్ యాక్టివిటీ లేదా ఫైనాన్షియల్ డేటా కోసం చాలా అనువైనది.

Angular, RxJS మరియు Signals ఉపయోగించి ప్రొడక్షన్-రెడీ (production-ready) రియల్-టైమ్ డ్యాష్‌బోర్డ్‌ను ఎలా నిర్మించాలో ఇక్కడ చూడండి.

ఆర్కిటెక్చర్ (The Architecture)

  • కనెక్షన్‌ను నిర్వహించడానికి RxJS webSocket ఉపయోగించండి.
  • బహుళ కాంపోనెంట్లు ఒకే కనెక్షన్‌ను ఉపయోగించుకోవడానికి shareReplay ఉపయోగించండి.
  • సింగిల్ సోర్స్ ఆఫ్ ట్రూత్ (single source of truth) కోసం Angular Signals ఉపయోగించండి.
  • కాంపోనెంట్లను సరళంగా ఉంచడానికి Store pattern ఉపయోగించండి.

  1. సర్వీస్ లేయర్ (The Service Layer) ప్రతి కాంపోనెంట్ కోసం కొత్త కనెక్షన్‌ను తెరవకండి. rxjs/webSocket నుండి webSocket subjectని ఉపయోగించండి. మీ మొత్తం యాప్ ఒకే స్ట్రీమ్‌ను పంచుకోవడానికి shareReplayని ఉపయోగించండి. ఇది మీ సర్వర్ వందలాది అనవసరమైన కనెక్షన్‌లను నిర్వహించకుండా నిరోధిస్తుంది.

  2. సిగ్నల్ స్టోర్ (The Signal Store) మీ కాంపోనెంట్లలో బిజినెస్ లాజిక్‌ను ఉంచడం మానుకోండి. మీ సర్వీస్‌కు సబ్‌స్క్రైబ్ అయ్యే ఒక Storeని సృష్టించండి. ఈ స్టోర్ మీ మెట్రిక్స్ మరియు అలర్ట్‌లను Signalsలో ఉంచుతుంది. మీ కాంపోనెంట్లు కేవలం ఈ సిగ్నల్స్‌ను చదువుతాయి. ఇది మీ UIని వేగంగా మరియు పరీక్షించడానికి సులభంగా మారుస్తుంది.

  3. క్లీన్ కాంపోనెంట్స్ (Clean Components) మీ కాంపోనెంట్లు కేవలం ఒకే పని చేయాలి: డేటాను రెండర్ చేయడం. మీరు Signal-ఆధారిత స్టోర్‌ని ఉపయోగిస్తే, మీ కాంపోనెంట్ కోడ్ చాలా చిన్నదిగా ఉంటుంది. అది ఒక విలువను చదివి స్క్రీన్‌పై చూపిస్తుంది.

ముఖ్యమైన ప్రో టిప్స్ (Key Pro Tips)

  • కనెక్షన్ స్టేటస్: ఎల్లప్పుడూ "Live" లేదా "Reconnecting" ఇండికేటర్‌ను చూపండి. వారి డేటా తాజా సమాచారమేనా అని వినియోగదారులకు తెలియాలి.
  • ఎర్రర్ హ్యాండ్లింగ్: రీకనెక్షన్ల కోసం exponential backoff ఉపయోగించండి. సర్వర్ డౌన్ అయినప్పుడు దానిపై ఒత్తిడి పెంచకండి.
  • డేటా మేనేజ్‌మెంట్: మీ అలర్ట్ అర్రేలపై .slice() ఉపయోగించండి. ఇది ఎక్కువ మెమరీని ఉపయోగించకుండా మీ హిస్టరీని ఉపయోగకరంగా ఉంచుతుంది.

మీకు టూ-వే కమ్యూనికేషన్ (two-way communication) అవసరమైనప్పుడు WebSockets ఉత్తమంగా పనిచేస్తాయి. మీకు కేవలం డేటాను స్వీకరించడం మాత్రమే అవసరమైతే, సరళమైన ఎంపికగా Server-Sent Events (SSE) గురించి పరిశీలించండి.

మీ వినియోగదారులు రిఫ్రెష్ బటన్ నొక్కేలా చేయడం ఆపండి.

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