𝗕𝘂𝗶𝗹𝗱𝗶𝗻𝗴 𝗥𝗲𝗮𝗹-𝗧𝗶𝗺𝗲 𝗔𝗻𝗴𝘂𝗹𝗮𝗿 𝗗𝗮𝘀𝗵𝗯𝗼𝗮𝗿𝗱𝘀
മിക്ക ഡാഷ്ബോർഡുകളും പഴയതുപോലെ തോന്നും. ഉപയോക്താക്കൾക്ക് പഴയ വിവരങ്ങൾ മാത്രമേ കാണാൻ കഴിയൂ, അവർക്ക് റിഫ്രഷ് ബട്ടൺ ക്ലിക്ക് ചെയ്യേണ്ടി വരും. നിങ്ങൾ പോളിംഗ് (polling) ഉപയോഗിച്ചേക്കാം, പക്ഷേ അത് നിങ്ങളുടെ സെർവറിന് വലിയ ഭാരം നൽകും.
WebSockets ഇതിന് പരിഹാരമാണ്. വിവരങ്ങൾ മാറുന്ന നിമിഷം തന്നെ സെർവർ അവ അപ്ഡേറ്റ് ചെയ്യുന്നു. റിഫ്രഷ് ചെയ്യേണ്ട ആവശ്യമില്ല.
Angular, RxJS, Signals എന്നിവ ഉപയോഗിച്ച് ഒരു റിയൽ-ടൈം ഡാഷ്ബോർഡ് എങ്ങനെ നിർമ്മിക്കാം എന്ന് നോക്കാം.
ആർക്കിടെക്ചർ (The Architecture)
- കണക്ഷനായി RxJS webSocket ഉപയോഗിക്കുക.
- സ്റ്റേറ്റിനായി (state) Angular Signals ഉപയോഗിക്കുക.
- ഡാറ്റ സൂക്ഷിക്കാൻ ഒരു സിംഗിൾ സ്റ്റോർ (single store) ഉപയോഗിക്കുക.
- The WebSocket Service
ഓരോ കമ്പോണന്റിനും വേണ്ടി പുതിയ കണക്ഷൻ തുടങ്ങരുത്. നിങ്ങളുടെ സർവീസിൽ shareReplay ഉപയോഗിക്കുക. ഇത് ഒന്നിലധികം വിഡ്ജറ്റുകൾക്ക് (widgets) ഒരൊറ്റ കണക്ഷൻ ഉപയോഗിക്കാൻ സഹായിക്കുന്നു.
സ്ട്രീമിൽ (stream) എററുകൾ ക്യാച്ച് (catch) ചെയ്തുകൊണ്ട് അവ കൈകാര്യം ചെയ്യുക. കണക്ഷൻ നഷ്ടപ്പെടുമ്പോൾ നിങ്ങളുടെ ആപ്പ് പൂർണ്ണമായും തകരാറിലാകാതിരിക്കാൻ ഇത് സഹായിക്കും.
- The Signal Store
ഡാറ്റ കൈകാര്യം ചെയ്യാൻ കമ്പോണന്റുകൾക്ക് പകരം ഒരു Signal-അധിഷ്ഠിത സ്റ്റോർ ഉപയോഗിക്കുക. ഇത് വിവരങ്ങൾക്കായി ഒരു ഏകീകൃത ഉറവിടം (single source of truth) സൃഷ്ടിക്കുന്നു.
- CPU ഉപയോഗം, ആക്ടീവ് ഉപയോക്താക്കൾ തുടങ്ങിയ മെട്രിക്സുകൾ (metrics) സ്റ്റോർ ചെയ്യുക.
- സമീപകാല അലേർട്ടുകളുടെ ചെറിയൊരു ഹിസ്റ്ററി സൂക്ഷിക്കുക.
- നിർണ്ണായകമായ അവസ്ഥകൾ (critical states) തിരിച്ചറിയാൻ computed signals ഉപയോഗിക്കുക.
- Pure Components
നിങ്ങളുടെ കമ്പോണന്റുകൾ ലളിതമായിരിക്കണം. അവ ലോജിക് കൈകാര്യം ചെയ്യരുത്. സ്റ്റോറിൽ നിന്ന് വിവരങ്ങൾ വായിച്ച് UI കാണിക്കുക മാത്രമാണ് അവ ചെയ്യേണ്ടത്. ഇത് നിങ്ങളുടെ കോഡ് ടെസ്റ്റ് ചെയ്യാനും പരിപാലിക്കാനും (maintain) എളുപ്പമാക്കുന്നു.
പ്രൊഡക്ഷനായി ശ്രദ്ധിക്കേണ്ട കാര്യങ്ങൾ (Key Tips for Production)
- Connection Status: ഉപയോക്താക്കൾ ലൈവ് ആണോ അതോ റീകണക്ട് ആകുകയാണോ എന്ന് എപ്പോഴും കാണിക്കുക.
- Exponential Backoff: ഓരോ സെക്കൻഡിലും കണക്ഷൻ വീണ്ടും ശ്രമിക്കരുത്. സെർവറിനെ സംരക്ഷിക്കുന്നതിനായി കാലക്രമേണ വർദ്ധിച്ചുവരുന്ന ഒരു ഡിലേ (delay) ഉപയോഗിക്കുക.
- Security: നിങ്ങളുടെ ഓത്ത് ടോക്കണുകൾ (auth tokens) ക്വറി പാരാമീറ്ററുകൾ വഴിയോ അല്ലെങ്കിൽ ആദ്യത്തെ മെസ്സേജ് വഴിയോ കൈമാറുക.
രണ്ട് വശങ്ങളിലേക്കും ആശയവിനിമയം (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