SSEGWSW: सर्विस-वर्कर्स द्वारा सर्वर-सेंटेड इवेंट गेटवे

नमस्ते!

मेरा नाम साशा है और मैं टिंकॉफ बिजनेस में एक वास्तुकार के रूप में काम करता हूं।

इस लेख में मैं सेवा कार्यकर्ता का उपयोग करके उसी डोमेन के भीतर खुले लंबे समय तक रहने वाले HTTP कनेक्शन की संख्या पर ब्राउज़र सीमा को पार करने के तरीके के बारे में बात करना चाहता हूं।

यदि आप चाहते हैं, तो बेझिझक पृष्ठभूमि को छोड़ दें, समस्या का वर्णन करें, एक समाधान खोजें, और तुरंत परिणाम के लिए आगे बढ़ें।

प्रागितिहास

एक बार टिंकॉफ बिजनेस में वेबसैट पर काम करने वाली एक चैट थी।

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

हमने नए समाधान की वास्तुकला पर चर्चा की और इस निष्कर्ष पर पहुंचे कि हम नियमित HTTP अनुरोधों का उपयोग करके डेटा प्राप्त करेंगे और भेजेंगे। उदाहरण के लिए, POST: / api / send-message संदेश भेजें , GET संवादों की एक सूची प्राप्त करें : / api / वार्तालाप-सूची, और इसी तरह। और अतुल्यकालिक घटनाओं जैसे "वार्ताकार का एक नया संदेश" एसएसई के माध्यम से भेजा जाएगा। इसलिए हम एप्लिकेशन की दोष सहिष्णुता को बढ़ाएंगे: यदि एसएसई कनेक्शन बंद हो जाता है, तो चैट अभी भी काम करेगी, केवल यह रियलटाइम नोटिफिकेशन प्राप्त नहीं करेगी।

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

समस्या

जब आप एक ब्राउज़र टैब खोलते हैं, तो दो एसएसई कनेक्शन बनाए जाते हैं: एक चैट के लिए और दूसरा सूक्ष्म सूचनाओं के लिए। अच्छा, उन्हें बनने दो। सॉरी या क्या? हमें खेद नहीं है, लेकिन ब्राउज़र खेद महसूस करते हैं! वे एक डोमेन के लिए समवर्ती लगातार कनेक्शन की संख्या पर एक सीमा है । लगता है कि क्रोम में कितना है? ठीक है, छह! मैंने तीन टैब खोले - मैंने पूरे कनेक्शन पूल को रन किया और अब आप HTTP अनुरोध नहीं कर सकते। यह HTTP / 1.x प्रोटोकॉल के लिए सही है। HTTP / 2 में मल्टीप्लेक्सिंग के कारण ऐसी कोई समस्या नहीं है।

बुनियादी ढांचे के स्तर पर इस समस्या को हल करने के कुछ तरीके हैं:

1. डोमेन की साझेदारी।
2. HTTP / 2।

ये दोनों तरीके महंगे लग रहे थे, क्योंकि बहुत सारे बुनियादी ढांचे को प्रभावित करना होगा।

इसलिए, शुरुआत के लिए, हमने ब्राउज़र की तरफ समस्या को हल करने की कोशिश की। पहला विचार टैब के बीच किसी तरह का परिवहन करना था, उदाहरण के लिए, लोकलस्टोरेज या ब्रॉडकास्ट चैनल एपीआई के माध्यम से।

इसका अर्थ यह है: हम केवल एक टैब में एसएसई कनेक्शन खोलते हैं और बाकी को डेटा भेजते हैं। यह समाधान भी इष्टतम नहीं लगा, क्योंकि इसके लिए सभी 50 एसपीए की रिहाई की आवश्यकता होगी, जो टिंकऑफ बिजनेस व्यक्तिगत खाता बनाते हैं। 50 एप्लिकेशन जारी करना भी महंगा है, इसलिए मैंने अन्य तरीकों की तलाश जारी रखी।

निर्णय

मैंने हाल ही में सेवा कर्मियों के साथ काम किया और सोचा: क्या इस स्थिति में उन्हें लागू करना संभव है?

इस प्रश्न का उत्तर देने के लिए, आपको सबसे पहले यह समझने की जरूरत है कि आम तौर पर सेवा कर्मचारी क्या करते हैं? वे अनुरोधों को प्रॉक्सी कर सकते हैं, यह कुछ इस तरह दिखता है:

self.addEventListener('fetch', event => { const response = self.caches.open('example') .then(caches => caches.match(event.request)) .then(response => response || fetch(event.request)); event.respondWith(response); }); 

हम HTTP अनुरोधों की घटनाओं को सुनते हैं और जैसा हम चाहते हैं, उसका जवाब देते हैं। इस मामले में, हम कैश से जवाब देने की कोशिश कर रहे हैं, और अगर यह काम नहीं करता है, तो हम सर्वर से अनुरोध करते हैं।

ठीक है, चलिए SSE कनेक्शन को इंटरसेप्ट करने का प्रयास करते हैं और इसका उत्तर देते हैं:

 self.addEventListener('fetch', event => { const {headers} = event.request; const isSSERequest = headers.get('Accept') === 'text/event-stream'; if (!isSSERequest) { return; } event.respondWith(new Response('Hello!')); }); 

नेटवर्क अनुरोधों में, हम निम्नलिखित चित्र देखते हैं:



और कंसोल में, यह:



पहले से ही बुरा नहीं है। अनुरोध को रोक दिया गया था, लेकिन एसएसई पाठ / सादे के रूप में प्रतिक्रिया नहीं चाहता है, लेकिन पाठ / घटना-धारा चाहता है । अब स्ट्रीम कैसे बनाएं? लेकिन क्या मैं एक सेवा कार्यकर्ता से एक धारा के साथ भी जवाब दे सकता हूं? अच्छा चलिए देखते हैं:



बहुत बढ़िया! रिस्पांस क्लास एक बॉडी रीडेबलस्ट्रीम के रूप में लेता है। प्रलेखन पढ़ने के बाद, आप यह पता कर सकते हैं कि रीडेबलस्ट्रीम में एक नियंत्रक है जिसमें एक एन्क्यू () विधि है - इसकी मदद से आप डेटा स्ट्रीम कर सकते हैं। उपयुक्त, ले लो!

 self.addEventListener('fetch', event => { const {headers} = event.request; const isSSERequest = headers.get('Accept') === 'text/event-stream'; if (!isSSERequest) { return; } const responseText = 'Hello!'; const responseData = Uint8Array.from(responseText, x => x.charCodeAt(0)); const stream = new ReadableStream({start: controller => controller.enqueue(responseData)}); const response = new Response(stream); event.respondWith(response); }); 

कोई त्रुटि नहीं है, कनेक्शन लंबित स्थिति में लटका हुआ है और क्लाइंट की तरफ कोई डेटा नहीं आता है। एक वास्तविक सर्वर अनुरोध के साथ मेरे अनुरोध की तुलना करते हुए, मुझे एहसास हुआ कि उत्तर हेडर में था। SSE अनुरोधों के लिए, निम्नलिखित हेडर निर्दिष्ट किए जाने चाहिए:

 const sseHeaders = { 'content-type': 'text/event-stream', 'Transfer-Encoding': 'chunked', 'Connection': 'keep-alive', }; 

जब आप इन हेडर को जोड़ते हैं, तो कनेक्शन सफलतापूर्वक खुल जाएगा, लेकिन डेटा क्लाइंट की ओर से प्राप्त नहीं होगा। यह स्पष्ट है, क्योंकि आप केवल यादृच्छिक पाठ नहीं भेज सकते हैं - कुछ प्रारूप होना चाहिए।

Javascript.info पर, डेटा स्वरूप जिसमें आप सर्वर से डेटा भेजना चाहते हैं, अच्छी तरह से वर्णित है । यह आसानी से एक समारोह के साथ वर्णित किया जा सकता है:

 const sseChunkData = (data: string, event?: string, retry?: number, id?: number): string => Object.entries({event, id, data, retry}) .filter(([, value]) => ![undefined, null].includes(value)) .map(([key, value]) => `${key}: ${value}`) .join('\n') + '\n\n'; 

SSE प्रारूप का पालन करने के लिए, सर्वर को एक डबल लाइन ब्रेक \ n \ n द्वारा अलग किए गए संदेश भेजने चाहिए।

संदेश में निम्नलिखित फ़ील्ड शामिल हैं:

• डेटा - संदेश शरीर, एक पंक्ति में कई डेटा की व्याख्या एक संदेश के रूप में की जाती है, जिसे लाइन ब्रेक \ n द्वारा अलग किया जाता है;
• आईडी - लास्ट-इवेंट-आईडी हेडर में भेजे गए lastEventId संपत्ति को अपडेट करते समय;
• पुनः प्रयास - मिलीसेकंड में पुन: कनेक्ट करने से पहले अनुशंसित विलंब, जावास्क्रिप्ट का उपयोग करके सेट नहीं किया जा सकता है;
• घटना - उपयोगकर्ता घटना का नाम, डेटा से पहले संकेत दिया।

आवश्यक हेडर जोड़ें, वांछित प्रारूप के उत्तर को बदलें और देखें कि क्या होता है:

 self.addEventListener('fetch', event => { const {headers} = event.request; const isSSERequest = headers.get('Accept') === 'text/event-stream'; if (!isSSERequest) { return; } const sseChunkData = (data, event, retry, id) => Object.entries({event, id, data, retry}) .filter(([, value]) => ![undefined, null].includes(value)) .map(([key, value]) => `${key}: ${value}`) .join('\n') + '\n\n'; const sseHeaders = { 'content-type': 'text/event-stream', 'Transfer-Encoding': 'chunked', 'Connection': 'keep-alive', }; const responseText = sseChunkData('Hello!'); const responseData = Uint8Array.from(responseText, x => x.charCodeAt(0)); const stream = new ReadableStream({start: controller => controller.enqueue(responseData)}); const response = new Response(stream, {headers: sseHeaders}); event.respondWith(response); }); 

ओह मेरे ग्लोब! हां, मैंने सर्वर के बिना SSE कनेक्शन बनाया है!

परिणाम

अब हम एसएसई अनुरोध को सफलतापूर्वक रोक सकते हैं और ब्राउज़र से परे जाए बिना इसका जवाब दे सकते हैं।

प्रारंभ में, विचार सर्वर के साथ एक संबंध स्थापित करने के लिए था, लेकिन केवल एक चीज - और इससे टैब पर डेटा भेजने के लिए। चलो यह करते हैं!

 self.addEventListener('fetch', event => { const {headers, url} = event.request; const isSSERequest = headers.get('Accept') === 'text/event-stream'; //   SSE- if (!isSSERequest) { return; } //    SSE const sseHeaders = { 'content-type': 'text/event-stream', 'Transfer-Encoding': 'chunked', 'Connection': 'keep-alive', }; // ,    SSE const sseChunkData = (data, event, retry, id) => Object.entries({event, id, data, retry}) .filter(([, value]) => ![undefined, null].includes(value)) .map(([key, value]) => `${key}: ${value}`) .join('\n') + '\n\n'; //    ,   — url,  — EventSource const serverConnections = {}; //   url             const getServerConnection = url => { if (!serverConnections[url]) serverConnections[url] = new EventSource(url); return serverConnections[url]; }; //          const onServerMessage = (controller, {data, type, retry, lastEventId}) => { const responseText = sseChunkData(data, type, retry, lastEventId); const responseData = Uint8Array.from(responseText, x => x.charCodeAt(0)); controller.enqueue(responseData); }; const stream = new ReadableStream({ start: controller => getServerConnection(url).onmessage = onServerMessage.bind(null, controller) }); const response = new Response(stream, {headers: sseHeaders}); event.respondWith(response); }); 

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

हमने सफलतापूर्वक यह सब तय कर लिया है - मुझे यकीन है कि यह आपके लिए मुश्किल नहीं होगा!