WebSockets ಬಳಸಿ ರಿಯಲ್-ಟೈಮ್ Angular ಡ್ಯಾಶ್ಬೋರ್ಡ್ಗಳನ್ನು ನಿರ್ಮಿಸುವುದು
ಹೆಚ್ಚಿನ ಡ್ಯಾಶ್ಬೋರ್ಡ್ಗಳು ನಿಶ್ಚಲವಾಗಿರುವಂತೆ ಅಥವಾ ಹಳೆಯದಾದಂತೆ ಭಾಸವಾಗುತ್ತವೆ. ಬಳಕೆದಾರರು ಪುಟಕ್ಕೆ ಬಂದ ನಂತರ ಕಾಯಬೇಕಾಗುತ್ತದೆ. ಅವರು ರಿಫ್ರೆಶ್ ಮಾಡಬೇಕಾಗುತ್ತದೆ ಅಥವಾ ಸರ್ವರ್ನ ವೇಗವನ್ನು ಕಡಿಮೆ ಮಾಡುವ ನಿರಂತರ polling ಪ್ರಕ್ರಿಯೆಯನ್ನು ಎದುರಿಸಬೇಕಾಗುತ್ತದೆ.
WebSockets ಇದನ್ನು ಬದಲಾಯಿಸುತ್ತವೆ. ಕ್ಲೈಂಟ್ ಡೇಟಾವನ್ನು ಕೇಳುವ ಬದಲಿಗೆ, ಸರ್ವರ್ ಅದನ್ನು ತಾನೇ ಕಳುಹಿಸುತ್ತದೆ (push ಮಾಡುತ್ತದೆ). ಇದು ಲೈವ್ ಮೆಟ್ರಿಕ್ಸ್, ಬಳಕೆದಾರರ ಚಟುವಟಿಕೆ ಅಥವಾ ಹಣಕಾಸಿನ ಡೇಟಾಗೆ ಅತ್ಯುತ್ತಮವಾಗಿದೆ.
Angular, RxJS ಮತ್ತು Signals ಬಳಸಿ ಪ್ರೊಡಕ್ಷನ್-ರೆಡಿ (production-ready) ರಿಯಲ್-ಟೈಮ್ ಡ್ಯಾಶ್ಬೋರ್ಡ್ ಅನ್ನು ಹೇಗೆ ನಿರ್ಮಿಸುವುದು ಎಂಬುದು ಇಲ್ಲಿದೆ.
The Architecture
- ಕನೆಕ್ಷನ್ ನಿರ್ವಹಿಸಲು RxJS webSocket ಬಳಸಿ.
- ಒಂದೇ ಕನೆಕ್ಷನ್ ಅನ್ನು ಹಲವು ಕಾಂಪೊನೆಂಟ್ಗಳು ಬಳಸಲು shareReplay ಬಳಸಿ.
- Single source of truth ಗಾಗಿ Angular Signals ಬಳಸಿ.
- ಕಾಂಪೊನೆಂಟ್ಗಳನ್ನು ಸರಳವಾಗಿಡಲು Store pattern ಬಳಸಿ.
The Service Layer ಪ್ರತಿಯೊಂದು ಕಾಂಪೊನೆಂಟ್ಗಾಗಿ ಹೊಸ ಕನೆಕ್ಷನ್ ಅನ್ನು ತೆರೆಯಬೇಡಿ. rxjs/webSocket ನಿಂದ webSocket subject ಅನ್ನು ಬಳಸಿ. ನಿಮ್ಮ ಇಡೀ ಆಪ್ ಒಂದೇ ಸ್ಟ್ರೀಮ್ ಅನ್ನು ಹಂಚಿಕೊಳ್ಳಲು shareReplay ಬಳಸಿ. ಇದು ನಿಮ್ಮ ಸರ್ವರ್ ನೂರಾರು ಅನಗತ್ಯ ಕನೆಕ್ಷನ್ಗಳನ್ನು ನಿರ್ವಹಿಸುವುದನ್ನು ತಪ್ಪಿಸುತ್ತದೆ.
The Signal Store ನಿಮ್ಮ ಕಾಂಪೊನೆಂಟ್ಗಳಲ್ಲಿ ಬಿಸಿನೆಸ್ ಲಾಜಿಕ್ ಅನ್ನು ಇರಿಸುವುದನ್ನು ತಪ್ಪಿಸಿ. ನಿಮ್ಮ ಸರ್ವಿಸ್ ಅನ್ನು ಸಬ್ಸ್ಕ್ರೈಬ್ ಮಾಡುವ ಒಂದು Store ಅನ್ನು ರಚಿಸಿ. ಈ ಸ್ಟೋರ್ ನಿಮ್ಮ ಮೆಟ್ರಿಕ್ಸ್ ಮತ್ತು ಅಲರ್ಟ್ಗಳನ್ನು Signals ನಲ್ಲಿ ಇರಿಸುತ್ತದೆ. ನಂತರ ನಿಮ್ಮ ಕಾಂಪೊನೆಂಟ್ಗಳು ಈ ಸಿಗ್ನಲ್ಗಳನ್ನು ಓದುತ್ತವೆ ಅಷ್ಟೆ. ಇದು ನಿಮ್ಮ UI ಅನ್ನು ವೇಗವಾಗಿ ಮತ್ತು ಸುಲಭವಾಗಿ ಪರೀಕ್ಷಿಸಲು (test) ಸಹಾಯ ಮಾಡುತ್ತದೆ.
Clean Components ನಿಮ್ಮ ಕಾಂಪೊನೆಂಟ್ಗಳು ಕೇವಲ ಒಂದು ಕೆಲಸವನ್ನಷ್ಟೇ ಮಾಡಬೇಕು: ಡೇಟಾವನ್ನು ರেন্ডರ್ ಮಾಡುವುದು. ನೀವು Signal-ಆಧಾರಿತ ಸ್ಟೋರ್ ಅನ್ನು ಬಳಸಿದರೆ, ನಿಮ್ಮ ಕಾಂಪೊನೆಂಟ್ ಕೋಡ್ ತುಂಬಾ ಚಿಕ್ಕದಾಗಿರುತ್ತದೆ. ಅದು ಕೇವಲ ಒಂದು ಮೌಲ್ಯವನ್ನು ಓದಿ ಪರದೆಯ ಮೇಲೆ ತೋರಿಸುತ್ತದೆ.
Key Pro Tips
- Connection Status: ಯಾವಾಗಲೂ "Live" ಅಥವಾ "Reconnecting" ಸೂಚಕವನ್ನು ತೋರಿಸಿ. ಡೇಟಾ ಅಪ್-ಟು-ಡೇಟ್ ಆಗಿದೆಯೇ ಎಂದು ಬಳಕೆದಾರರಿಗೆ ತಿಳಿಯಬೇಕಾಗುತ್ತದೆ.
- Error Handling: ಮರು-ಕನೆಕ್ಷನ್ಗಳಿಗಾಗಿ exponential backoff ಬಳಸಿ. ಸರ್ವರ್ ಡೌನ್ ಆದಾಗ ಅದರ ಮೇಲೆ ಅತಿಯಾದ ಒತ್ತಡ ಹೇರಬೇಡಿ.
- Data Management: ನಿಮ್ಮ ಅಲರ್ಟ್ ಅರೇಗಳ ಮೇಲೆ .slice() ಬಳಸಿ. ಇದು ಅತಿಯಾದ ಮೆಮೊರಿಯನ್ನು ಬಳಸದೆ ನಿಮ್ಮ ಹಿಸ್ಟರಿಯನ್ನು ಉಪಯುಕ್ತವಾಗಿಡುತ್ತದೆ.
WebSockets ನಿಮಗೆ ಎರಡು ಕಡೆಯ ಸಂವಹನ (two-way communication) ಬೇಕಾದಾಗ ಅತ್ಯುತ್ತಮವಾಗಿ ಕೆಲಸ ಮಾಡುತ್ತವೆ. ನಿಮಗೆ ಕೇವಲ ಡೇಟಾವನ್ನು ಸ್ವೀಕರಿಸಬೇಕಿದ್ದರೆ, ಸರಳವಾದ ಆಯ್ಕೆಯಾಗಿ Server-Sent Events (SSE) ಅನ್ನು ಪರಿಗಣಿಸಿ.
ನಿಮ್ಮ ಬಳಕೆದಾರರು ರಿಫ್ರೆಶ್ ಬಟನ್ ಒತ್ತುವಂತೆ ಮಾಡುವುದನ್ನು ನಿಲ್ಲಿಸಿ.
Source: https://dev.to/rigole/building-real-time-dashboards-in-angular-with-websockets-a-complete-guide-10he