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

زیادہ تر ڈیش بورڈز پرانے یا سست محسوس ہوتے ہیں۔ صارفین ایک صفحے پر آتے ہیں اور انتظار کرتے ہیں۔ وہ ریفریش کا بٹن دباتے ہیں یا مسلسل پولنگ (polling) کا سامنا کرتے ہیں جو آپ کے سرور کو سست کر دیتی ہے۔

WebSockets اس صورتحال کو بدل دیتے ہیں۔ کلائنٹ کی جانب سے ڈیٹا مانگنے کے بجائے، سرور اسے خود بھیجتا (push کرتا) ہے۔ یہ لائیو میٹرکس، صارف کی سرگرمی، یا مالیاتی ڈیٹا کے لیے بہترین ہے۔

یہاں Angular، RxJS، اور Signals کا استعمال کرتے ہوئے ایک پروڈکشن کے قابل ریئل ٹائم ڈیش بورڈ بنانے کا طریقہ بتایا گیا ہے۔

آرکیٹیکچر (The Architecture)

  • کنکشن کو مینیج کرنے کے لیے RxJS webSocket کا استعمال کریں۔
  • shareReplay کا استعمال کریں تاکہ متعدد کمپوننٹس ایک ہی کنکشن استعمال کر سکیں۔
  • سنگل سورس آف ٹرتھ (single source of truth) کے لیے Angular Signals کا استعمال کریں۔
  • کمپوننٹس کو سادہ رکھنے کے لیے Store پیٹرن کا استعمال کریں۔

  1. سروس لیئر (The Service Layer) ہر کمپوننٹ کے لیے نیا کنکشن نہ کھولیں۔ rxjs/webSocket سے webSocket subject کا استعمال کریں۔ shareReplay کا استعمال کریں تاکہ آپ کی پوری ایپ ایک ہی اسٹریم شیئر کر سکے۔ یہ آپ کے سرور کو سینکڑوں غیر ضروری کنکشنز سنبھالنے سے بچاتا ہے۔

  2. سگنل اسٹور (The Signal Store) اپنے کمپوننٹس میں بزنس لاجک (business logic) رکھنے سے گریز کریں۔ ایک ایسا Store بنائیں جو آپ کی سروس کو سبسکرائب کرے۔ یہ اسٹور آپ کے میٹرکس اور الرٹس کو Signals میں محفوظ رکھتا ہے۔ اس کے بعد آپ کے کمپوننٹس صرف ان سگنلز کو پڑھتے ہیں۔ اس سے آپ کا UI تیز اور ٹیسٹ کرنے میں آسان ہو جاتا ہے۔

  3. صاف ستھرے کمپوننٹس (Clean Components) آپ کے کمپوننٹس کو صرف ایک کام کرنا چاہیے: ڈیٹا کو رینڈر کرنا۔ اگر آپ Signal پر مبنی اسٹور استعمال کرتے ہیں، تو آپ کے کمپوننٹ کا کوڈ بہت مختصر رہتا ہے۔ یہ صرف ایک ویلیو پڑھتا ہے اور اسے اسکرین پر دکھاتا ہے۔

اہم پرو ٹپس (Key Pro Tips)

  • کنکشن اسٹیٹس: ہمیشہ "Live" یا "Reconnecting" کا انڈیکیٹر دکھائیں۔ صارفین کو یہ جاننے کی ضرورت ہے کہ آیا ان کا ڈیٹا تازہ ترین ہے۔
  • ایرر ہینڈلنگ: دوبارہ کنکشن کے لیے exponential backoff کا استعمال کریں۔ جب سرور ڈاؤن ہو تو اس پر مسلسل بوجھ نہ ڈالیں۔
  • ڈیٹا مینجمنٹ: اپنے الرٹ ایرے (alert arrays) پر .slice() کا استعمال کریں۔ یہ زیادہ میموری استعمال کیے بغیر آپ کی ہسٹری کو مفید رکھتا ہے۔

WebSockets اس وقت بہترین کام کرتے ہیں جب آپ کو دو طرفہ مواصلات (two-way communication) کی ضرورت ہو۔ اگر آپ کو صرف ڈیٹا وصول کرنے کی ضرورت ہے، تو ایک سادہ آپشن کے طور پر Server-Sent Events (SSE) پر غور کریں۔

اپنے صارفین کو ریفریش بٹن دبانے پر مجبور کرنا بند کریں۔

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