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

മിക്ക ഡാഷ്‌ബോർഡുകളും അപ്‌ഡേറ്റ് ചെയ്യാത്തവയായി തോന്നും. ഉപയോക്താക്കൾ ഒരു പേജിൽ എത്തുമ്പോൾ കാത്തിരിക്കേണ്ടി വരുന്നു. അവർ പേജ് റിഫ്രഷ് ചെയ്യുകയോ അല്ലെങ്കിൽ സെർവറിന്റെ വേഗത കുറയ്ക്കുന്ന നിരന്തരമായ പോളിംഗ് (polling) നേരിടുകയോ ചെയ്യുന്നു.

WebSockets ഇത് മാറ്റുന്നു. ക്ലയന്റ് ഡാറ്റയ്ക്ക് വേണ്ടി ചോദിക്കുന്നതിന് പകരം, സെർവർ അത് നേരിട്ട് നൽകുന്നു (push ചെയ്യുന്നു). ലൈവ് മെട്രിക്സ്, ഉപയോക്താക്കളുടെ പ്രവർത്തനം, അല്ലെങ്കിൽ സാമ്പത്തിക വിവരങ്ങൾ എന്നിവയ്ക്ക് ഇത് അനുയോജ്യമാണ്.

Angular, RxJS, Signals എന്നിവ ഉപയോഗിച്ച് പ്രൊഡക്ഷൻ-റെഡി ആയ ഒരു റിയൽ-ടൈം ഡാഷ്‌ബോർഡ് എങ്ങനെ നിർമ്മിക്കാം എന്ന് നോക്കാം.

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 ബിസിനസ് ലോജിക് (business logic) കംപോണന്റുകളിൽ ഉൾപ്പെടുത്തുന്നത് ഒഴിവാക്കുക. നിങ്ങളുടെ സർവീസിനെ സബ്സ്ക്രൈബ് ചെയ്യുന്ന ഒരു Store നിർമ്മിക്കുക. ഈ സ്റ്റോർ നിങ്ങളുടെ മെട്രിക്സുകളും അലേർട്ടുകളും Signals ആയി സൂക്ഷിക്കുന്നു. തുടർന്ന് നിങ്ങളുടെ കംപോണന്റുകൾക്ക് ഈ സിഗ്നലുകൾ വായിച്ചാൽ മാത്രം മതി. ഇത് നിങ്ങളുടെ UI വേഗതയുള്ളതാക്കുകയും ടെസ്റ്റ് ചെയ്യാൻ എളുപ്പമാക്കുകയും ചെയ്യുന്നു.

  3. Clean Components നിങ്ങളുടെ കംപോണന്റുകൾ ഒരു കാര്യം മാത്രമേ ചെയ്യാവൂ: ഡാറ്റ റെൻഡർ ചെയ്യുക. നിങ്ങൾ ഒരു Signal-അധിഷ്ഠിത സ്റ്റോർ ഉപയോഗിക്കുകയാണെങ്കിൽ, കംപോണന്റ് കോഡ് വളരെ ചെറുതായിരിക്കും. അത് ഒരു വാല്യൂ വായിക്കുകയും സ്ക്രീനിൽ കാണിക്കുകയും ചെയ്യുന്നു.

Key Pro Tips

  • Connection Status: എപ്പോഴും ഒരു "Live" അല്ലെങ്കിൽ "Reconnecting" ഇൻഡിക്കേറ്റർ കാണിക്കുക. ഡാറ്റ കൃത്യമാണോ എന്ന് ഉപയോക്താക്കൾക്ക് അറിയേണ്ടതുണ്ട്.
  • Error Handling: റീകണക്ഷനുകൾക്കായി exponential backoff ഉപയോഗിക്കുക. സെർവർ ഡൗൺ ആകുമ്പോൾ അതിനെ അമിതമായി ലോഡ് ചെയ്യരുത്.
  • Data Management: അലേർട്ട് അറേകളിൽ .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