𝗕𝘂𝗶𝗹𝗱𝗶𝗻𝗴 𝗥𝗲𝗮𝗹-𝗧𝗶𝗺𝗲 𝗔𝗻𝗴𝘂𝗹𝗮𝗿 𝗗𝗮𝘀𝗵𝗯𝗼𝗮𝗿𝗱𝘀 𝘄𝗶𝘁𝗵 𝗪𝗲𝗯𝗦𝗼𝗰𝗸𝗲𝘁𝘀
મોટાભાગના ડેશબોર્ડ્સ સ્થિર લાગે છે. વપરાશકર્તાઓ પેજ પર આવે છે અને રાહ જુએ છે. તેઓ રિફ્રેશ બટન દબાવે છે અથવા સતત પોલિંગ (polling) નો સામનો કરે છે જે તમારા સર્વરને ધીમું પાડે છે.
WebSockets આ બદલી નાખે છે. ક્લાયન્ટ દ્વારા ડેટા માંગવાને બદલે, સર્વર તેને પુશ (push) કરે છે. આ લાઈવ મેટ્રિક્સ, યુઝર એક્ટિવિટી અથવા નાણાકીય ડેટા માટે આદર્શ છે.
Angular, RxJS અને Signals નો ઉપયોગ કરીને પ્રોડક્શન-રેડી (production-ready) રિયલ-ટાઇમ ડેશબોર્ડ કેવી રીતે બનાવવું તે અહીં છે.
આર્કિટેક્ચર (The Architecture)
- કનેક્શન મેનેજ કરવા માટે RxJS webSocket નો ઉપયોગ કરો.
- એક જ કનેક્શનનો ઉપયોગ બહુવિધ ઘટકો (components) કરી શકે તે માટે shareReplay નો ઉપયોગ કરો.
- સિંગલ સોર્સ ઓફ ટ્રુથ (single source of truth) માટે Angular Signals નો ઉપયોગ કરો.
- ઘટકોને સરળ રાખવા માટે Store પેટર્નનો ઉપયોગ કરો.
સર્વિસ લેયર (The Service Layer) દરેક ઘટક (component) માટે નવું કનેક્શન ખોલશો નહીં. rxjs/webSocket માંથી webSocket subject નો ઉપયોગ કરો. shareReplay નો ઉપયોગ કરો જેથી તમારું આખું એપ એક જ સ્ટ્રીમ શેર કરે. આ તમારા સર્વરને સેંકડો બિનજરૂરી કનેક્શન્સ હેન્ડલ કરતા અટકાવે છે.
સિગ્નલ સ્ટોર (The Signal Store) તમારા ઘટકોમાં બિઝનેસ લોજિક રાખવાનું ટાળો. એક Store બનાવો જે તમારી સર્વિસને સબ્સ્ક્રાઇબ કરે. આ સ્ટોર તમારા મેટ્રિક્સ અને એલર્ટ્સને Signals માં રાખે છે. ત્યારબાદ તમારા ઘટકો ફક્ત આ સિગ્નલ્સ વાંચશે. આ તમારા UI ને ઝડપી અને ટેસ્ટ કરવામાં સરળ બનાવે છે.
ક્લીન ઘટકો (Clean Components) તમારા ઘટકોએ ફક્ત એક જ કામ કરવું જોઈએ: ડેટા રેન્ડર (render) કરવો. જો તમે Signal-આધારિત સ્ટોરનો ઉપયોગ કરો છો, તો તમારા ઘટકનો કોડ ખૂબ જ નાનો રહેશે. તે ફક્ત એક વેલ્યુ વાંચશે અને તેને સ્ક્રીન પર બતાવશે.
મુખ્ય પ્રો ટિપ્સ (Key Pro Tips)
- Connection Status: હંમેશા "Live" અથવા "Reconnecting" ઇન્ડિકેટર બતાવો. વપરાશકર્તાઓને ખબર હોવી જોઈએ કે તેમનો ડેટા વર્તમાન છે કે નહીં.
- Error Handling: ફરીથી કનેક્ટ કરવા માટે exponential backoff નો ઉપયોગ કરો. જ્યારે સર્વર ડાઉન હોય ત્યારે તેના પર સતત લોડ ન નાખો.
- Data Management: તમારા એલર્ટ એરે (alert arrays) પર .slice() નો ઉપયોગ કરો. આ મેમરીનો વધુ પડતો ઉપયોગ કર્યા વિના તમારા ઇતિહાસને ઉપયોગી રાખે છે.
WebSockets ત્યારે શ્રેષ્ઠ રીતે કામ કરે છે જ્યારે તમારે ટુ-વે (two-way) કોમ્યુનિકેશનની જરૂર હોય. જો તમારે ફક્ત ડેટા મેળવવાની જ જરૂર હોય, તો સરળ વિકલ્પ તરીકે Server-Sent Events (SSE) વિશે જાણો.
તમારા વપરાશકર્તાઓને રિફ્રેશ બટન દબાવવા માટે મજબૂર કરવાનું બંધ કરો.
Source: https://dev.to/rigole/building-real-time-dashboards-in-angular-with-websockets-a-complete-guide-10he