Angular में WebSockets: वेब सॉकेट के साथ काम करने के लिए Angular Service बनाएं

इस लेख में मैं कोणीय ढांचे के ढांचे के भीतर प्रौद्योगिकी के संकीर्ण दायरे और इसके पहले से ही अभिन्न सहायक - RxJs को विस्तार से कवर करने की कोशिश करूंगा, जबकि हम सर्वर कार्यान्वयन पर जानबूझकर स्पर्श नहीं करेंगे, जैसा कि यह एक अलग लेख के लिए एक पूर्ण विषय है।

यह पाठ उन लोगों के लिए उपयोगी होगा जो पहले से ही एंगुलर से परिचित हैं, लेकिन सीधे विषय पर अपने ज्ञान को गहरा करना चाहते हैं।

सबसे पहले, कुछ बुनियादी जानकारी।

WebSocket क्या है और आपको इसकी आवश्यकता क्यों है

विकिपीडिया के अनुसार, WebSocket एक टीसीपी कनेक्शन पर "डुप्लेक्स संचार प्रोटोकॉल (यह एक ही समय में संचारित और प्राप्त कर सकता है) एक ब्राउज़र और वेब सर्वर के बीच वास्तविक समय के संदेश के लिए डिज़ाइन किया गया है।
WebSocket को वेब ब्राउज़र और वेब सर्वर में लागू करने के लिए डिज़ाइन किया गया है, लेकिन इसका उपयोग किसी भी क्लाइंट या सर्वर एप्लिकेशन के लिए किया जा सकता है। WebSocket प्रोटोकॉल टीसीपी प्रोटोकॉल पर आधारित एक स्वतंत्र प्रोटोकॉल है। यह इंटरेक्टिव सामग्री के वितरण और वास्तविक समय के अनुप्रयोगों के निर्माण की सुविधा के लिए ब्राउज़र और वेब साइट के बीच घनिष्ठ संपर्क को सक्षम बनाता है। ”

दूसरे शब्दों में, WebSocket सर्वर को क्लाइंट से अनुरोध प्राप्त करने और किसी भी वांछित समय पर क्लाइंट को अनुरोध भेजने की अनुमति देता है, इस प्रकार, ब्राउज़र (क्लाइंट) और सर्वर को समान अधिकार और कनेक्ट होने पर संदेशों का आदान-प्रदान करने की क्षमता मिलती है। एक नियमित AJAX अनुरोध के लिए पूर्ण HTTP हेडर के प्रसारण की आवश्यकता होती है, जिसका अर्थ है कि दोनों दिशाओं में ट्रैफ़िक में वृद्धि, जबकि कनेक्शन स्थापित करने के बाद वेब सॉकेट्स का ओवरहेड केवल दो बाइट्स है। वेब सॉकेट HTTP हेडर में प्रेषित सूचना की मात्रा को सैकड़ों और हजारों बार कम करता है और प्रतीक्षा समय को काफी कम कर देता है। वेब सॉकेट कनेक्शन कॉर्स की तरह क्रॉस-डोमेन का समर्थन करता है।

सर्वर साइड पर, वेब सॉकेट को सपोर्ट करने के लिए पैकेज होते हैं, क्लाइंट पर यह HTML5 WebSocket API है, जिसमें तीन तरीकों का इंटरफ़ेस है:

WebSocket - WebSocket सर्वर से कनेक्ट करने के लिए मुख्य इंटरफ़ेस, और फिर कनेक्शन पर डेटा भेजना और प्राप्त करना;
CloseEvent - कनेक्शन बंद होने पर WebSocket ऑब्जेक्ट द्वारा प्रेषित एक घटना;
MessageEvent - एक संदेश सर्वर से एक संदेश प्राप्त होने पर एक WebSocket द्वारा भेजा जाता है।

यह JavaSript कार्यान्वयन स्तर पर कैसा दिखता है:

const ws = new WebSocket("ws://www.example.com/socketserver", "protocolOne"); ws.onopen = () => { ws.onmessage = (event) => { console.log(event); } ws.send("Here's some text that the server is urgently awaiting!"); }; 

onmessage - सर्वर से संदेश सुनें
भेजें - अपने संदेश सर्वर पर भेजें

यही है, अपने मूल रूप में, सब कुछ बेहद सरल है, लेकिन अगर आप इस विषय में तल्लीन करने की इच्छा रखते हैं, तो आप एमडीएन वेब डॉक्स की ओर रुख कर सकते हैं और साथ ही इस एपीआई के शीर्ष पर अपनी खुद की परतों को लागू करने वाले पुस्तकालयों का अध्ययन कर सकते हैं।

WebSocket का उपयोग करने से क्यों न डरें

पहला बिंदु जो डरा सकता है वह है ब्राउज़र समर्थन । आज ऐसी कोई समस्या नहीं है - वेबस्केट वेब पर और मोबाइल सेगमेंट में लगभग पूरी तरह से समर्थित है।





https://caniuse.com/#feat=websockets

दूसरा बिंदु कार्यान्वयन में आसानी है । हां, सबसे पहले यह हतोत्साहित करने वाला है।

एपीआई इतनी सरल है कि पहली नज़र में यह समझना मुश्किल हो सकता है कि इस तरह की मामूली संख्या के साथ कैसे काम किया जाए, क्योंकि उनमें से सभी, एक को छोड़कर, या तो त्रुटियों या कनेक्शनों की रिपोर्ट करते हैं, और उनमें से केवल एक - ऑनमेसेज - वहन करती है वेब सॉकेट का उपयोग किस लिए किया जाता है, अर्थात् सर्वर से डेटा प्राप्त करने के लिए।

उसी समय, पकड़ यह है कि सर्वर आमतौर पर अलग-अलग डेटा भेजता है, इसलिए, हमें कई अलग-अलग ओनेसमेज की आवश्यकता है? या क्या आपको प्रत्येक डेटा मॉडल के लिए अपना कनेक्शन बनाने की आवश्यकता है?

इसलिए, कार्य: आपको उपयोगकर्ता मॉडल और सर्वर से नवीनतम समाचार मॉडल स्वीकार करने की आवश्यकता है, और शायद कुछ और भी।

मैं इस तरह के "सुरुचिपूर्ण" कार्यान्वयन पर आया हूं:

 const wsUser = new WebSocket("ws://www.example.com/user"); wsUser.onmessage = (event) => { // ... }; const wsNews = new WebSocket("ws://www.example.com/news"); wsNews.onmessage = (event) => { // ... }; const wsTime = new WebSocket("ws://www.example.com/time"); wsTime.onmessage = (event) => { // ... }; const wsDinner = new WebSocket("ws://www.example.com/dinner"); wsDinner.onmessage = (event) => { // ... }; const wsCurrency = new WebSocket("ws://www.example.com/currency"); wsCurrency.onmessage = (event) => { // ... }; const wsOnline = new WebSocket("ws://www.example.com/online"); wsOnline.onmessage = (event) => { // ... }; const wsLogin = new WebSocket("ws://www.example.com/login"); wsLogin.onmessage = (event) => { // ... }; const wsLogout = new WebSocket("ws://www.example.com/logout"); wsLogout.onmessage = (event) => { // ... }; 

पहली नज़र में, सब कुछ तार्किक है। लेकिन अब सोचिए कि अगर ये दर्जनों या सैकड़ों हों तो कैसा लगेगा। जिन परियोजनाओं पर मैंने काम किया, उनमें से एक पर लगभग तीन सौ कार्यक्रम हुए।



हम समस्या का समाधान करते हैं।

वेब सॉकेट्स के साथ काम करने के लिए सभी तृतीय-पक्ष लाइब्रेरी आपको addEventListener प्रकार के संदेशों की सदस्यता लेने की अनुमति देती हैं। यह इस तरह दिखता है:

 ws.on("user", (userData) => { / .. }) 

जैसा कि हम जानते हैं, हम एक एकल विधि - ओनमेसेज के साथ काम कर सकते हैं, जो अपने कनेक्शन के हिस्से के रूप में सभी डेटा प्राप्त करता है, इसलिए यह कोड कुछ असामान्य दिखता है। इसे निम्नानुसार कार्यान्वित किया जाता है: ऑनमेसेज एक संदेश भेजता है जिसमें डेटा फ़ील्ड शामिल है। यह वह डेटा है जिसमें वह सूचना होती है जो सर्वर हमें भेजता है। यह ऑब्जेक्ट इस तरह दिखता है:

 { "event": "user", "data": { "name": "John Doe", ... } } 

जहां ईवेंट कुंजी है जिसके द्वारा यह निर्धारित करना संभव है कि सर्वर ने कौन सी जानकारी भेजी है। अगला, सामने के किनारे पर, एक बस बनाई जाती है जो घटना के आधार पर जानकारी को फ़िल्टर करती है और इसे वांछित पते पर भेजती है:

 const ws = new WebSocket("ws://www.example.com"); ws.onmessage = (event) => { const data = JSON.parse(event.data); if (data.event === 'user') { // ... } if (data.event === 'news') { // ... } }; 

इससे एक ही कनेक्शन के भीतर अलग-अलग डेटा प्राप्त करना संभव है और जेएस घटनाओं के लिए सामान्य रूप से समान सिंटैक्स के माध्यम से उनकी सदस्यता ली जा सकती है।

कोणीय में वेबसॉकेट

अंत में, हमें सबसे महत्वपूर्ण बात मिली - सीधे एंगुलर में वेबस्केट्स का उपयोग करना।

मूल WebSocket API के साथ काम करने की सरलता के बावजूद, इस लेख में हम RxJs का उपयोग करेंगे, जो निश्चित रूप से, क्योंकि हम Angular के बारे में बात कर रहे हैं।

देशी वेबसॉकेट एपीआई का उपयोग कोणीय पर अनुप्रयोगों में किया जा सकता है, इसके आधार पर एक आसान-से-उपयोग इंटरफ़ेस बनाएँ, RxJs अवलोकनीय, आवश्यक संदेशों की सदस्यता लें, आदि, लेकिन RxJs ने पहले ही आपके लिए मुख्य कार्य किया है: WebSocketSubject मानक WebSocket पर एक प्रतिक्रियाशील आवरण है। एपीआई। यह एक ईवेंट बस नहीं बनाता है या प्रसंस्करण को फिर से कनेक्ट नहीं करता है। यह एक नियमित विषय है, जिसके साथ आप प्रतिक्रियाशील शैली के वेब सॉकेट के साथ काम कर सकते हैं।

RxJs WebSocketSubject

तो, WebSocketSubject को WebSocketSubjectConfig और एक वैकल्पिक गंतव्य की उम्मीद है, जिसमें आप अपने देखे गए विषय के लिए एक लिंक पास कर सकते हैं, एक ऑब्जर्वेबल बनाता है जिसके माध्यम से आप वेब सॉकेट के लिए संदेश सुन और भेज सकते हैं।

सीधे शब्दों में कहें, आप WebSocketSubject तर्क के रूप में कनेक्शन url पास करते हैं और RxJs के लिए सामान्य तरीके से वेब सॉकेट की सभी गतिविधि की सदस्यता लेते हैं। और अगर आपको सर्वर पर एक संदेश भेजने की आवश्यकता है, तो उसी सामान्य विधि webSocketSubject.next (डेटा) का उपयोग करें।

हम WebSocket Angular के साथ काम करने के लिए एक सेवा बनाते हैं

संक्षेप में वर्णन करें कि हम सेवा से क्या उम्मीद करते हैं:

• एकीकृत और संक्षिप्त इंटरफ़ेस;
• DI निर्भरता के कनेक्शन स्तर पर कॉन्फ़िगरेशन की संभावना;
• पुन: उपयोग की संभावना;
• टाइपिंग;
• कुंजी द्वारा जानकारी प्राप्त करने के लिए सदस्यता लेने की क्षमता;
• सदस्यता समाप्त करने की क्षमता;
• सर्वर को संदेश भेजना;
• रिकनेक्ट।

अंतिम बिंदु पर विशेष ध्यान देने योग्य है। फिर से कनेक्ट करें, या सर्वर को फिर से जोड़ने का संगठन, वेब सॉकेट के साथ काम करते समय एक सर्वोपरि कारक है, जैसा कि नेटवर्क ब्रेक, सर्वर क्रैश, या अन्य त्रुटियां जो कनेक्शन ब्रेक का कारण बनती हैं, जिससे एप्लिकेशन क्रैश हो सकता है।

यह ध्यान रखना महत्वपूर्ण है कि सामंजस्य के प्रयास बहुत बार नहीं होने चाहिए और अनिश्चित काल तक जारी नहीं होने चाहिए, जैसा कि यह व्यवहार क्लाइंट को निलंबित कर सकता है।

चलिए शुरू करते हैं।

सबसे पहले, हम एक सेवा कॉन्फ़िगरेशन इंटरफ़ेस और एक मॉड्यूल बनाएंगे जो कनेक्ट होने पर कॉन्फ़िगर करने की क्षमता प्रदान करेगा।

यदि संभव हो तो, मैं कोड को छोटा कर दूंगा, पूर्ण संस्करण जिसे आप रूसी-भाषी कोणीय समुदाय में गिटहब पर देख सकते हैं।

 export interface WebSocketConfig { url: string; reconnectInterval?: number; reconnectAttempts?: number; } export class WebsocketModule { public static config(wsConfig: WebSocketConfig): ModuleWithProviders { return { ngModule: WebsocketModule, providers: [{ provide: config, useValue: wsConfig }] }; } } 

अगला, हमें वेब सॉकेट संदेश के इंटरफ़ेस का वर्णन करने की आवश्यकता है:

 export interface IWsMessage<T> { event: string; data: T; } 

जहां ईवेंट कुंजी है, और कुंजी द्वारा प्राप्त डेटा एक टाइप किया गया मॉडल है।

सेवा का सार्वजनिक इंटरफ़ेस इस तरह दिखता है:

 export interface IWebsocketService { on<T>(event: string): Observable<T>; send(event: string, data: any): void; status: Observable<boolean>; } 

सेवा के क्षेत्र हैं:

 //   WebSocketSubject private config: WebSocketSubjectConfig<IWsMessage<any>>; private websocketSub: SubscriptionLike; private statusSub: SubscriptionLike; // Observable    interval private reconnection$: Observable<number>; private websocket$: WebSocketSubject<IWsMessage<any>>; // ,      private connection$: Observer<boolean>; //  Observable       private wsMessages$: Subject<IWsMessage<any>>; //       private reconnectInterval: number; //    private reconnectAttempts: number; //      private isConnected: boolean; //   public status: Observable<boolean>; 

सेवा वर्ग के निर्माता में, हमें WebSocketConfig ऑब्जेक्ट निर्दिष्ट किया जाता है जब मॉड्यूल जुड़ा हुआ था:

 constructor(@Inject(config) private wsConfig: WebSocketConfig) { this.wsMessages$ = new Subject<IWsMessage<any>>(); //  ,  ,     this.reconnectInterval = wsConfig.reconnectInterval || 5000; this.reconnectAttempts = wsConfig.reconnectAttempts || 10; //      connection$   websocket$ this.config = { url: wsConfig.url, closeObserver: { next: (event: CloseEvent) => { this.websocket$ = null; this.connection$.next(false); } }, //     connection$ openObserver: { next: (event: Event) => { console.log('WebSocket connected!'); this.connection$.next(true); } } }; // connection status this.status = new Observable<boolean>((observer) => { this.connection$ = observer; }).pipe(share(), distinctUntilChanged()); //      this.statusSub = this.status .subscribe((isConnected) => { this.isConnected = isConnected; if (!this.reconnection$ && typeof(isConnected) === 'boolean' && !isConnected) { this.reconnect(); } }); // ,  -    this.websocketSub = this.wsMessages$.subscribe( null, (error: ErrorEvent) => console.error('WebSocket error!', error) ); //  this.connect(); } 

कनेक्शन विधि स्वयं सरल है:

 private connect(): void { this.websocket$ = new WebSocketSubject(this.config); //  //   ,    , //  ,  // ,    this.websocket$.subscribe( (message) => this.wsMessages$.next(message), (error: Event) => { if (!this.websocket$) { // run reconnect if errors this.reconnect(); } }); } 

रीकनेक्ट थोड़ा अधिक जटिल है:

 private reconnect(): void { //  interval    reconnectInterval this.reconnection$ = interval(this.reconnectInterval) .pipe(takeWhile((v, index) => index < this.reconnectAttempts && !this.websocket$)); //     ,        this.reconnection$.subscribe( () => this.connect(), null, () => { // Subject complete if reconnect attemts ending this.reconnection$ = null; if (!this.websocket$) { this.wsMessages$.complete(); this.connection$.complete(); } }); } 

ऑन मेथड, यह भी बेहद सरल है, इस पर टिप्पणी करने के लिए कुछ भी नहीं है।

 public on<T>(event: string): Observable<T> { if (event) { return this.wsMessages$.pipe( filter((message: IWsMessage<T>) => message.event === event), map((message: IWsMessage<T>) => message.data) ); } } 

भेजने की विधि और भी सरल है:

 public send(event: string, data: any = {}): void { if (event && this.isConnected) { //   any ,   ""   string //      :) this.websocket$.next(<any>JSON.stringify({ event, data })); } else { console.error('Send error!'); } } 

वह पूरी सेवा है। जैसा कि आप देख सकते हैं, कोड का थोक पुन: कनेक्ट करने के संगठन पर गिर गया।

आइए अब देखें कि इसका उपयोग कैसे किया जाता है। WebsocketModule मॉड्यूल कनेक्ट करें:

 imports: [ WebsocketModule.config({ url: environment.ws //      'ws://www.example.com' }) ] 

घटक निर्माता में, हम सेवा को इंजेक्ट करते हैं और ' संदेशों ' से संदेशों की सदस्यता लेते हैं, पाठ को सर्वर पर वापस भेजते हैं:

 constructor(private wsService: WebsocketService) { this.wsService.on<IMessage[]>('messages') .subscribe((messages: IMessage[]) => { console.log(messages); this.wsService.send('text', 'Test Text!'); }); } 

स्थिरांक या एक गणना में डालने के लिए घटनाओं का नाम अधिक सुविधाजनक है। हम कहीं न कहीं websocket.events.ts फ़ाइल बनाते हैं और उसमें लिखते हैं:

 export const WS = { ON: { MESSAGES: 'messages' }, SEND: { TEXT: 'text' } }; 

बनाए गए WS ऑब्जेक्ट का उपयोग करके पुनर्विचार सदस्यता:

 this.wsService.on<IMessage[]>(WS.ON.MESSAGES) .subscribe((messages: IMessage[]) => { console.log(messages); this.wsService.send(WS.SEND.TEXT, 'Test Text!'); }); 

निष्कर्ष में

वह, वास्तव में, सब है। यह एक आवश्यक न्यूनतम है जो एक एंगुलर डेवलपर को WebSockets के बारे में जानने की आवश्यकता है। मुझे उम्मीद है कि मैंने इस विषय को काफी स्पष्ट रूप से कवर किया है। सेवा का पूर्ण संस्करण GitHub पर पाया जा सकता है ।

सभी प्रश्नों के लिए आप टिप्पणियों में संपर्क कर सकते हैं, मेरे लिए टेलीग्राम पर या उसी स्थान पर कोणीय चैनल पर।