कोणीय में वेबसॉकेट। भाग 2. उत्पाद समाधान

पिछले लेख में, हमने कोणीय में वेब सॉकेट्स के लिए एक सामान्य समाधान के बारे में बात की थी, जहां हमने घटकों में उपयोग के लिए पुन: कनेक्ट और सेवा के साथ WebSocketSubject पर आधारित एक बस का निर्माण किया था। इस तरह के कार्यान्वयन ज्यादातर सरल मामलों के लिए उपयुक्त है, उदाहरण के लिए, चैट संदेश प्राप्त करना और भेजना, आदि, लेकिन इसकी क्षमताएं पर्याप्त नहीं हो सकती हैं जहां आपको कुछ अधिक लचीला और नियंत्रित बनाने की आवश्यकता होती है। इस लेख में, मैं वेब सॉकेट्स के साथ काम करते समय कुछ विशेषताओं को प्रकट करूंगा और उन आवश्यकताओं के बारे में बात करूंगा जो आपने खुद का सामना किया है और संभवतः, आपका सामना करेंगे।

अक्सर, उच्च उपस्थिति वाली बड़ी परियोजनाओं में, फ्रंट-एंड चेहरे कार्य करते हैं, जो अन्य परिस्थितियों में, बैक-एंड पर देखने के लिए अधिक सामान्य होते हैं। सर्वर संसाधनों की तपस्या की स्थितियों में, समस्याओं का हिस्सा फ्रंट-एंड क्षेत्र में माइग्रेट होता है, इस कारण से प्रोजेक्ट में अधिकतम विस्तार और नियंत्रण रखा जाता है।

यहाँ एक वेब सॉकेट क्लाइंट के लिए मूलभूत आवश्यकताओं की एक सूची दी गई है जो इस लेख में शामिल की जाएगी:

• स्वचालित "स्मार्ट" फिर से कनेक्ट करें;
• डिबग मोड;
• आरएक्सजे पर आधारित ईवेंट सदस्यता प्रणाली;
• बाइनरी डेटा का रिसेप्शन और पार्सिंग;
• मॉडल पर प्राप्त जानकारी की प्रोजेक्शन (मानचित्रण);
• नई घटनाओं के आने के साथ-साथ मॉडल परिवर्तन पर नियंत्रण;
• मनमानी घटनाओं को अनदेखा करें और उपेक्षा को रद्द करें।

प्रत्येक आइटम पर अधिक विस्तार से विचार करें।

रीकनेक्ट / डीबैग

मैंने पिछले लेख में फिर से जोड़ने के बारे में लिखा था, इसलिए मैं सिर्फ पाठ का हिस्सा उद्धृत करूंगा:

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

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

इस लेख में, फिर से कनेक्ट करने और डिबगिंग के लिए, हम रीकनेक्टिंग वेबस्केट का उपयोग करेंगे, जिसमें आवश्यक कार्यक्षमता और अन्य विकल्प शामिल हैं, जैसे कि पुन: कनेक्शन के बीच वेब सॉकेट के यूआरएल को बदलना, एक मनमाना वेबसर्वर लॉकर चुनना, आदि। अन्य विकल्प भी उपयुक्त हैं। पिछले लेख से फिर से कनेक्ट करना उपयुक्त नहीं है, क्योंकि यह WebSocketSubject के तहत लिखा गया है, जो इस बार लागू नहीं होता है।

RxJs घटना सदस्यता प्रणाली

घटकों में वेब सॉकेट का उपयोग करने के लिए, आपको घटनाओं की सदस्यता लेने की आवश्यकता होती है और आवश्यक होने पर उनसे सदस्यता समाप्त कर लेते हैं। ऐसा करने के लिए, लोकप्रिय पब / उप डिजाइन पैटर्न का उपयोग करें।

"प्रकाशक-सब्सक्राइबर (eng। प्रकाशक-सब्सक्राइबर या eng। पब / उप) - संदेशों के प्रसारण के लिए एक व्यवहार डिजाइन टेम्पलेट, जिसमें संदेश भेजने वालों को प्रकाशक (eng प्रकाशक) कहा जाता है, सीधे ग्राहकों को संदेश भेजने के लिए प्रोग्राम कोड से बंधे नहीं हैं (eng। सदस्य) )। इसके बजाय, संदेशों को कक्षाओं में विभाजित किया जाता है और उनके ग्राहकों के बारे में जानकारी नहीं होती है, यदि कोई हो। इसी प्रकार, ग्राहक विशिष्ट प्रकाशकों से सारगर्भित संदेशों के एक या अधिक वर्गों से निपटते हैं। "

ग्राहक प्रकाशक से सीधे संपर्क नहीं करता है, लेकिन मध्यवर्ती बस के माध्यम से - वेबसाइट सेवा। एक ही रिटर्न प्रकार के साथ कई घटनाओं की सदस्यता लेना भी संभव होना चाहिए। प्रत्येक सदस्यता अपना खुद का विषय बनाता है, जो श्रोताओं के ऑब्जेक्ट में जोड़ा जाता है, जो आपको आवश्यक संपत्तियों के लिए वेब सॉकेट घटनाओं को संबोधित करने की अनुमति देता है। जब RxJs विषय के साथ काम करते हैं, तो सदस्यता समाप्त करने के साथ कुछ कठिनाइयाँ होती हैं, इसलिए, हम एक साधारण कचरा संग्रहकर्ता बनाएंगे जो श्रोताओं के ऑब्जेक्ट से उप-विशेषण हटा देगा जब उनके पास पर्यवेक्षक नहीं होंगे।

बाइनरी डेटा का रिसेप्शन और पार्सिंग

WebSocket द्विआधारी डेटा, फ़ाइलों या धाराओं के हस्तांतरण का समर्थन करता है, जिसका उपयोग अक्सर बड़ी परियोजनाओं में किया जाता है। यह कुछ इस तरह दिखता है:

0x80, <लंबाई - एक या अधिक बाइट्स>, <संदेश शरीर>

प्रेषित संदेश की लंबाई और एक ही समय में तर्कहीन रूप से खर्च न करने के लिए प्रतिबंध नहीं बनाने के लिए, प्रोटोकॉल डेवलपर्स ने निम्नलिखित एल्गोरिथ्म का उपयोग किया। लंबाई संकेत में प्रत्येक बाइट को अलग से माना जाता है: उच्चतम इंगित करता है कि क्या यह अंतिम बाइट (0) है या अन्य (1) इसका पालन करते हैं, और निचले 7 बिट्स में संचरित डेटा होता है। इसलिए, जब द्विआधारी डेटा फ्रेम 0x80 का संकेत दिखाई देता है, तो अगला बाइट लिया जाता है और एक अलग "पिगी बैंक" में संग्रहीत किया जाता है। फिर अगली बाइट, अगर इसमें सबसे महत्वपूर्ण बिट सेट है, तो इसे "गुल्लक" में स्थानांतरित कर दिया जाता है और इसी तरह जब तक कि शून्य के साथ सबसे महत्वपूर्ण बिट का सामना नहीं होता है। यह बाइट लंबाई सूचक में अंतिम है और इसे "गुल्लक" में भी जोड़ा जाता है। अब, गुल्लक में बाइट्स से उच्च बिट्स को हटा दिया जाता है, और शेष संयुक्त होता है। यह संदेश निकाय की लंबाई होगी - सबसे महत्वपूर्ण बिट के बिना 7-बिट संख्या।

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

मॉडल पर प्राप्त जानकारी का प्रोजेक्शन (मैपिंग)

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

“डेटा मॉडल एक अमूर्त, आत्मनिर्भर, वस्तुओं, ऑपरेटरों और अन्य तत्वों की तार्किक परिभाषा है, जो एक साथ एक अमूर्त डेटा एक्सेस मशीन का गठन करते हैं जिसके साथ उपयोगकर्ता बातचीत करता है। "ये ऑब्जेक्ट आपको डेटा संरचना, और ऑपरेटर - डेटा के व्यवहार को मॉडल करने की अनुमति देते हैं।

सभी प्रकार के लोकप्रिय टायर जो किसी वस्तु का एक वर्ग के रूप में एक विचार नहीं देते हैं जिसमें व्यवहार, संरचना आदि को परिभाषित किया जाता है भ्रम पैदा करते हैं, कम अच्छी तरह से नियंत्रित होते हैं और कभी-कभी कुछ के साथ अतिवृद्धि होती है जो उनके लिए विशिष्ट नहीं है। उदाहरण के लिए, एक कुत्ते वर्ग को किसी भी परिस्थिति में एक कुत्ते का वर्णन करना चाहिए। यदि कुत्ते को खेतों के एक समूह के रूप में माना जाता है: पूंछ, रंग, चेहरा, आदि, तो कुत्ता एक अतिरिक्त पंजा विकसित कर सकता है, और सिर के बजाय एक और कुत्ता दिखाई देगा।

नई घटनाओं के आने पर मॉडल में बदलाव पर नियंत्रण

इस पैराग्राफ में मैं उस समस्या का वर्णन करूंगा, जो मोबाइल सट्टेबाजी के खेल के वेब इंटरफेस पर काम करते समय आई थी। एप्लिकेशन एपीआई ने वेब सॉकेट्स के माध्यम से काम किया, जिसके माध्यम से उन्हें प्राप्त हुआ: ऑड्स को अपडेट करना, नए प्रकार के दांव जोड़ना, निकालना और मैच की शुरुआत या समाप्ति के बारे में सूचनाएं आदि। - वेब सॉकेट की कुल तीन सौ घटनाएँ। मैच के दौरान, दांव और जानकारी को लगातार अपडेट किया जाता है, कभी-कभी प्रति सेकंड 2-3 बार, इसलिए समस्या यह थी कि उनके बाद इंटरफ़ेस को मध्यवर्ती नियंत्रण के बिना अपडेट किया गया था।

जब उपयोगकर्ता ने मोबाइल डिवाइस से बोली की निगरानी की, और उसी समय उसके प्रदर्शन पर सूचियों को अपडेट किया गया, तो बोली दृश्य क्षेत्र से गायब हो गई, इसलिए उपयोगकर्ता को फिर से ट्रैक की गई बोली की खोज करनी थी। यह अद्यतन प्रत्येक अद्यतन के लिए दोहराया गया था।



समाधान को स्क्रीन पर प्रदर्शित होने वाली वस्तुओं के लिए अपरिवर्तनीयता की आवश्यकता थी, लेकिन साथ ही साथ सट्टेबाजी के गुणांक को बदलना पड़ा, अप्रासंगिक बोलियां निष्क्रिय होने के लिए, और नए को तब तक नहीं जोड़ा गया जब तक उपयोगकर्ता स्क्रीन को स्क्रॉल नहीं करते। बैकएंड पर आउट-ऑफ-डेट विकल्प संग्रहीत नहीं किए गए थे, इसलिए ऐसी लाइनों को "हटाए गए" ध्वज के साथ याद रखना और चिह्नित करना था, जिसके लिए वेब सॉकेट और सदस्यता के बीच एक मध्यवर्ती डेटा स्टोर बनाया गया था, जिसने परिवर्तनों पर नियंत्रण सुनिश्चित किया।

नई सेवा में, हम एक स्थानापन्न परत भी बनाएंगे और इस बार हम Dexie.js का उपयोग करेंगे - IndexedDB API पर एक आवरण, लेकिन कोई भी अन्य वर्चुअल या ब्राउज़र डेटाबेस करेगा। Redux स्वीकार्य है।

मनमानी घटनाओं को अनदेखा करें और उपेक्षा को रद्द करें

एक ही कंपनी में अक्सर एक ही समय में एक ही प्रकार के कई प्रोजेक्ट होते हैं: मोबाइल और वेब संस्करण, विभिन्न उपयोगकर्ता समूहों के लिए अलग-अलग सेटिंग्स वाले संस्करण, एक ही एप्लिकेशन के उन्नत और छंटे हुए संस्करण।

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

चलो इंटरफेस के विवरण के साथ शुरू करते हैं:

export interface IWebsocketService { //    addEventListener<T>(topics: string[], id?: number): Observable<T>; runtimeIgnore(topics: string[]): void; runtimeRemoveIgnore(topics: string[]): void; sendMessage(event: string, data: any): void; } export interface WebSocketConfig { //   DI url: string; ignore?: string[]; garbageCollectInterval?: number; options?: Options; } export interface ITopic<T> { //   Pub/Sub [hash: string]: MessageSubject<T>; } export interface IListeners { //    [topic: string]: ITopic<any>; } export interface IBuffer { //    ws.message type: string; data: number[]; } export interface IWsMessage { // ws.message event: string; buffer: IBuffer; } export interface IMessage { //   id: number; text: string; } export type ITopicDataType = IMessage[] | number | string[]; //  callMessage   

हम एक कचरा कलेक्टर बनाने के लिए विषय वारिस करेंगे:

 export class MessageSubject<T> extends Subject<T> { constructor( private listeners: IListeners, //    private topic: string, //   private id: string // id  ) { super(); } /* *   next, *       , *   garbageCollect */ public next(value?: T): void { if (this.closed) { throw new ObjectUnsubscribedError(); } if (!this.isStopped) { const {observers} = this; const len = observers.length; const copy = observers.slice(); for (let i = 0; i < len; i++) { copy[i].next(value); } if (!len) { this.garbageCollect(); //   } } } /* * garbage collector * */ private garbageCollect(): void { delete this.listeners[this.topic][this.id]; //  Subject if (!Object.keys(this.listeners[this.topic]).length) { //    delete this.listeners[this.topic]; } } } 

पिछले कार्यान्वयन के विपरीत, websocket.events.ts वेब सॉकेट मॉड्यूल का हिस्सा होगा

 export const WS_API = { EVENTS: { MESSAGES: 'messages', COUNTER: 'counter', UPDATE_TEXTS: 'update-texts' }, COMMANDS: { SEND_TEXT: 'set-text', REMOVE_TEXT: 'remove-text' } }; 

मॉड्यूल कनेक्ट करते समय कॉन्फ़िगर करने के लिए, websocket.config बनाएं:

 import { InjectionToken } from '@angular/core'; export const config: InjectionToken<string> = new InjectionToken('websocket'); 

प्रॉक्सी के लिए एक मॉडल बनाएँ:

 import Dexie from 'dexie'; import { IMessage, IWsMessage } from './websocket.interfaces'; import { WS_API } from './websocket.events'; class MessagesDatabase extends Dexie { //    Dexie  typescript public messages!: Dexie.Table<IMessage, number>; // id is number in this case constructor() { super('MessagesDatabase'); //   this.version(1).stores({ //   messages: '++id,text' }); } } 

एक साधारण मॉडल पार्सर, वास्तविक परिस्थितियों में इसे कई फाइलों में विभाजित करना बेहतर होता है:

 export const modelParser = (message: IWsMessage) => { if (message && message.buffer) { /*  */ const encodeUint8Array = String.fromCharCode .apply(String, new Uint8Array(message.buffer.data)); const parseData = JSON.parse(encodeUint8Array); let MessagesDB: MessagesDatabase; // IndexedDB if (message.event === WS_API.EVENTS.MESSAGES) { // IMessage[] if (!MessagesDB) { MessagesDB = new MessagesDatabase(); } parseData.forEach((messageData: IMessage) => { /*   */ MessagesDB.transaction('rw', MessagesDB.messages, async () => { /* ,    */ if ((await MessagesDB.messages .where({id: messageData.id}).count()) === 0) { const id = await MessagesDB.messages .add({id: messageData.id, text: messageData.text}); console.log(`Addded message with id ${id}`); } }).catch(e => { console.error(e.stack || e); }); }); return MessagesDB.messages.toArray(); //   IMessage[] } if (message.event === WS_API.EVENTS.COUNTER) { // counter return new Promise(r => r(parseData)); //    } if (message.event === WS_API.EVENTS.UPDATE_TEXTS) { // text const texts = []; parseData.forEach((textData: string) => { texts.push(textData); }); return new Promise(r => r(texts)); //     } } else { console.log(`[${Date()}] Buffer is "undefined"`); } }; 

WebsocketModule:

 @NgModule({ imports: [ CommonModule ] }) export class WebsocketModule { public static config(wsConfig: WebSocketConfig): ModuleWithProviders { return { ngModule: WebsocketModule, providers: [{provide: config, useValue: wsConfig}] }; } } 

आइए सेवा शुरू करें:

 private listeners: IListeners; //   private uniqueId: number; //   id  private websocket: ReconnectingWebSocket; //   constructor(@Inject(config) private wsConfig: WebSocketConfig) { this.uniqueId = -1; this.listeners = {}; this.wsConfig.ignore = wsConfig.ignore ? wsConfig.ignore : []; //  this.connect(); } ngOnDestroy() { this.websocket.close(); //     } 

कनेक्ट विधि:

 private connect(): void { // ReconnectingWebSocket config const options = { connectionTimeout: 1000, //  ,    maxRetries: 10, //  ,    ...this.wsConfig.options }; //  this.websocket = new ReconnectingWebSocket(this.wsConfig.url, [], options); this.websocket.addEventListener('open', (event: Event) => { //   console.log(`[${Date()}] WebSocket connected!`); }); this.websocket.addEventListener('close', (event: CloseEvent) => { //   console.log(`[${Date()}] WebSocket close!`); }); this.websocket.addEventListener('error', (event: ErrorEvent) => { //   console.error(`[${Date()}] WebSocket error!`); }); this.websocket.addEventListener('message', (event: MessageEvent) => { //     this.onMessage(event); }); setInterval(() => { //    this.garbageCollect(); }, (this.wsConfig.garbageCollectInterval || 10000)); } 

कचरा संग्रहकर्ता को डुप्लिकेट करें, समय-समय पर सदस्यता के लिए जाँच करेगा:

 private garbageCollect(): void { for (const event in this.listeners) { if (this.listeners.hasOwnProperty(event)) { const topic = this.listeners[event]; for (const key in topic) { if (topic.hasOwnProperty(key)) { const subject = topic[key]; //  Subject    if (!subject.observers.length) { delete topic[key]; } } }  ,   if (!Object.keys(topic).length) { delete this.listeners[event]; } } } } 

हम इस घटना को भेजने के लिए किस सदस्यता को देखते हैं:

 private onMessage(event: MessageEvent): void { const message = JSON.parse(event.data); for (const name in this.listeners) { if (this.listeners.hasOwnProperty(name) && !this.wsConfig.ignore.includes(name)) { const topic = this.listeners[name]; const keys = name.split('/'); //      const isMessage = keys.includes(message.event); const model = modelParser(message); //     if (isMessage && typeof model !== 'undefined') { model.then((data: ITopicDataType) => { //   Subject this.callMessage<ITopicDataType>(topic, data); }); } } } } 

विषय में हेलमेट घटना:

 private callMessage<T>(topic: ITopic<T>, data: T): void { for (const key in topic) { if (topic.hasOwnProperty(key)) { const subject = topic[key]; if (subject) { //   subject.next(data); } else { console.log(`[${Date()}] Topic Subject is "undefined"`); } } } } 

पब / उप विषय बनाएं:

 private addTopic<T>(topic: string, id?: number): MessageSubject<T> { const token = (++this.uniqueId).toString(); const key = id ? token + id : token; //  id   const hash = sha256.hex(key); // SHA256-   id  if (!this.listeners[topic]) { this.listeners[topic] = <any>{}; } return this.listeners[topic][hash] = new MessageSubject<T>(this.listeners, topic, hash); } 

एक या अधिक घटनाओं की सदस्यता:

 public addEventListener<T>(topics: string | string[], id?: number): Observable<T> { if (topics) { //       const topicsKey = typeof topics === 'string' ? topics : topics.join('/'); return this.addTopic<T>(topicsKey, id).asObservable(); } else { console.log(`[${Date()}] Can't add EventListener. Type of event is "undefined".`); } } 

यहां सब कुछ जानबूझकर सरलीकृत किया गया है, लेकिन बाइनरी संस्थाओं में परिवर्तित किया जा सकता है, जैसा कि सर्वर के मामले में है। सर्वर पर कमांड भेजना:

 public sendMessage(event: string, data: any = {}): void { //   ,      if (event && this.websocket.readyState === 1) { this.websocket.send(JSON.stringify({event, data})); } else { console.log('Send error!'); } } 

रनटाइम में इग्नोरलिस्ट में इवेंट जोड़ें:

 public runtimeIgnore(topics: string[]): void { if (topics && topics.length) { //    this.wsConfig.ignore.push(...topics); } } 

अज्ञानी से घटनाओं को हटाएं:

 public runtimeRemoveIgnore(topics: string[]): void { if (topics && topics.length) { topics.forEach((topic: string) => { //      const topicIndex = this.wsConfig.ignore.findIndex(t => t === topic); if (topicIndex > -1) { //    this.wsConfig.ignore.splice(topicIndex, 1); } }); } } 

हम वेब सॉकेट के मॉड्यूल को जोड़ते हैं:

 @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, ReactiveFormsModule, WebsocketModule.config({ url: environment.ws, //  "ws://mywebsocketurl" //    ignore: [WS_API.EVENTS.ANY_1, WS_API.EVENTS.ANY_2], garbageCollectInterval: 60 * 1000, //    options: { connectionTimeout: 1000, //   maxRetries: 10 //   } }) ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } 

हम घटकों में उपयोग करते हैं:

 @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent implements OnInit, OnDestroy { private messages$: Observable<IMessage[]>; private messagesMulti$: Observable<IMessage[]>; private counter$: Observable<number>; private texts$: Observable<string[]>; public form: FormGroup; constructor( private fb: FormBuilder, private wsService: WebsocketService) { } ngOnInit() { this.form = this.fb.group({ text: [null, [ Validators.required ]] }); // get messages this.messages$ = this.wsService .addEventListener<IMessage[]>(WS_API.EVENTS.MESSAGES); // get messages multi this.messagesMulti$ = this.wsService .addEventListener<IMessage[]>([ WS_API.EVENTS.MESSAGES, WS_API.EVENTS.MESSAGES_1 ]); // get counter this.counter$ = this.wsService .addEventListener<number>(WS_API.EVENTS.COUNTER); // get texts this.texts$ = this.wsService .addEventListener<string[]>(WS_API.EVENTS.UPDATE_TEXTS); } ngOnDestroy() { } public sendText(): void { if (this.form.valid) { this.wsService .sendMessage(WS_API.COMMANDS.SEND_TEXT, this.form.value.text); this.form.reset(); } } public removeText(index: number): void { this.wsService.sendMessage(WS_API.COMMANDS.REMOVE_TEXT, index); } } 

सेवा का उपयोग करने के लिए तैयार है।

---

यद्यपि लेख से उदाहरण प्रत्येक परियोजना के लिए एक सार्वभौमिक समाधान नहीं है, यह बड़े और जटिल अनुप्रयोगों में वेब सॉकेट के साथ काम करने के दृष्टिकोण में से एक को प्रदर्शित करता है। आप इसे सेवा में ले सकते हैं और इसे वर्तमान कार्यों के आधार पर संशोधित कर सकते हैं।

सेवा का पूर्ण संस्करण GitHub पर पाया जा सकता है ।

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