वेब वर्कर जितना आपने सोचा था उससे कहीं ज्यादा आसान है

इस लेख में एक DIRTY, असुरक्षित, अस्थिर और डरावना <em>eval</em> विधि का वर्णन किया जाएगा। इसलिए, यदि आप इससे असहज हैं, तो अभी पढ़ना बंद कर दें।

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

हम सभी को नई प्रौद्योगिकियां पसंद हैं, और हम सभी को नई तकनीकों का उपयोग करना सुविधाजनक है हालाँकि, वेब कर्मियों के साथ ऐसा बिल्कुल नहीं है। वेब कर्मचारी फाइलों को लिंक या लिंक स्वीकार करते हैं, जो सुविधाजनक नहीं है। किसी भी कार्य को केवल विशेष रूप से नियोजित कोड ही नहीं, बल्कि वेब कर्मचारियों में करना अच्छा होगा।

वेब श्रमिकों को काम करने के लिए अधिक सुविधाजनक बनाने के लिए हमें क्या करने की आवश्यकता है? मेरा मानना ​​है, यह निम्नलिखित है:

• किसी भी क्षण किसी भी कोड में वेब श्रमिकों को लॉन्च करने की संभावना
• वेब कर्मियों को जटिल डेटा (कक्षा उदाहरण, कार्य) भेजने की संभावना
• एक वेब कार्यकर्ता से एक उत्तर के साथ एक वादा प्राप्त करने की संभावना।

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

• एक वेब कार्यकर्ता के लिए पुस्तकालयों / फ़ाइलों को जोड़ना
• लॉन्च किया गया।

एक फाइल जो एक वेब वर्कर के अंदर होगी

एक वेब कर्मचारी लिखने से पहले, हमें एक फ़ाइल का वर्णन करने की आवश्यकता है जो इसके अंदर होगी, ऊपर वर्णित प्रोटोकॉल का समर्थन करता है। मुझे ऑब्जेक्ट-ओरिएंटेड प्रोग्रामिंग (OOP) पसंद है, इसलिए यह एक वर्ग होगा जिसका नाम कार्यकर्ताबॉडी होगा। इस वर्ग को मूल विंडो से किसी ईवेंट की सदस्यता लेनी होगी।

 self.onmessage = (message) => { this.onMessage(message.data); }; 

अब हम मूल विंडो से घटनाओं को सुन सकते हैं। हमारे पास दो प्रकार की घटनाएं हैं: वे जो एक उत्तर और बाकी सभी का मतलब है। आइए करते हैं घटनाएँ: \
लायब्रेरी और फ़ाइलों को एक वेब वर्कर में importScripts API से जोड़ा जाता है।

और अब scariest हिस्सा: एक यादृच्छिक समारोह शुरू करने के लिए, हम eval का उपयोग करेंगे।

 ... onMessage(message) { switch (message.type) { case MESSAGE_TYPE.ADD_LIBS: this.addLibs(message.libs); break; case MESSAGE_TYPE.WORK: this.doWork(message); break; } } doWork(message) { try { const processor = eval(message.job); const params = this._parser.parse(message.params); const result = processor(params); if (result && result.then && typeof result.then === 'function') { result.then((data) => { this.send({ id: message.id, state: true, body: data }); }, (error) => { if (error instanceof Error) { error = String(error); } this.send({ id: message.id, state: false, body: error }); }); } else { this.send({ id: message.id, state: true, body: result }); } } catch (e) { this.send({ id: message.id, state: false, body: String(e) }); } } send(data) { data.body = this._serializer.serialize(data.body); try { self.postMessage(data); } catch (e) { const toSet = { id: data.id, state: false, body: String(e) }; self.postMessage(toSet); } } 

संदेश भेजने और हैंडलर चुनने के लिए onMessage की विधि जिम्मेदार है, doWork एक भेजे गए फ़ंक्शन को लॉन्च करता है और पेरेंट विंडो पर एक उत्तर भेजता है।

पार्सर और धारावाहिक

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

 static isFunction(Factory){ if (!Factory.prototype) { // Arrow function has no prototype return true; } const prototypePropsLength = Object.getOwnPropertyNames(Factory.prototype) .filter(item => item !== 'constructor') .length; return prototypePropsLength === 0 && Serializer.getClassParents(Factory).length === 1; } static getClassParents(Factory) { const result = [Factory]; let tmp = Factory; let item = Object.getPrototypeOf(tmp); while (item.prototype) { result.push(item); tmp = item; item = Object.getPrototypeOf(tmp); } return result.reverse(); } 

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

जब हम एक फ़ंक्शन की खोज करते हैं, तो हम इसे फ़ील्ड के साथ एक सेवा ऑब्जेक्ट के साथ प्रतिस्थापित करते हैं __type = "क्रमबद्ध-फ़ंक्शन" और टेम्पलेट इस फ़ंक्शन (func.toString ()) के टेम्पलेट से मेल खाती है।

अभी के लिए, हम क्लास को छोड़ देंगे और क्लास के उदाहरण को देखेंगे। बाद में, हमें नियमित वस्तुओं और वर्ग उदाहरणों के बीच अंतर करने की आवश्यकता होगी।

 static isInstance(some) { const constructor = some.constructor; if (!constructor) { return false; } return !Serializer.isNative(constructor); } static isNative(data) { return /function .*?\(\) \{ \[native code\] \}/.test(data.toString()); } 

हमारा मानना ​​है कि एक वस्तु नियमित है अगर उसके पास एक निर्माता नहीं है या इसका निर्माण एक देशी कार्य है। एक बार जब हमने एक वर्ग उदाहरण खोज लिया, तो हम इसे निम्नलिखित क्षेत्रों के साथ एक सेवा ऑब्जेक्ट के साथ बदल देंगे:

• __टाइप: 'क्रमबद्ध-उदाहरण'
• डेटा उदाहरण में निहित डेटा है
• सूचकांक सेवा वर्ग सूची में इस उदाहरण का वर्ग सूचकांक है।

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

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

एक वेब कार्यकर्ता बनाना

एक वेब वर्कर को सफलतापूर्वक संचालित करने के लिए, हमें एक वर्कर और एक वर्कर को वेब वर्कर के भीतर और बाहर की जरूरत होती है। इसलिए हम एक सीरमाइज़र लेते हैं और इसे, पार्सर और वेब वर्कर बॉडी को एक टेम्पलेट में बदलते हैं। टेम्पलेट से, हम एक ब्लॉब बनाते हैं और URL.createObjectURL पर एक डाउनलोड लिंक बनाते हैं (यह विधि कुछ "सामग्री-सुरक्षा-नीति" के लिए काम नहीं कर सकती है)। यह विधि एक स्ट्रिंग से यादृच्छिक कोड लॉन्च करने के लिए भी अच्छा है।

 _createworker(customworker) { const template = `var Myworker = ${this._createTemplate(customworker)};`; const blob = new Blob([template], { type: 'application/javascript' }); return new worker(URL.createObjectURL(blob)); } _createTemplate(workerBody) { const Name = Serializer.getFnName(workerBody); if (!Name) { throw new Error('Unnamed worker Body class! Please add name to worker Body class!'); } return [ '(function () {', this._getFullClassTemplate(Serializer, 'Serializer'), this._getFullClassTemplate(Parser, 'Parser'), this._getFullClassTemplate(workerBody, 'workerBody'), `return new workerBody(Serializer, Parser)})();` ].join('\n'); } 

परिणाम

इसलिए, हमें एक सरल-से-उपयोग वाली लाइब्रेरी मिली, जो वेब कार्यकर्ता को कोई भी कोड भेज सकती है। उदाहरण के लिए, यह टाइपस्क्रिप्ट कक्षाओं का समर्थन करता है:

 const wrapper = workerWrapper.create(); wrapper.process((params) => { // This code in worker. Cannot use closure! // do some hard work return 100; // or return Promise.resolve(100) }, params).then((result) => { // result = 100; }); wrapper.terminate() // terminate for kill worker process 

भविष्य का विकास

दुर्भाग्य से, यह पुस्तकालय आदर्श से बहुत दूर है। हमें कक्षाओं, वस्तुओं, प्रोटोटाइप और स्थिर सुविधाओं के लिए बसने और गेटर्स का समर्थन जोड़ने की आवश्यकता है। इसके अलावा, हमें इसके बजाय URL.createObjectURL का उपयोग करके कैशिंग, एक वैकल्पिक स्क्रिप्ट लॉन्च के बिना जोड़ने की आवश्यकता है। अंत में, वेब वर्कर कंटेंट वाली फाइल को असेंबली में जोड़ने की जरूरत है (मामले में ऑन-द-फ्लाई निर्माण उपलब्ध नहीं है) आदि। भंडार पर जाएँ!