वर्कर के साथ काम करें "जैसा आप चाहते हैं," उतना संभव नहीं "

इस लेख में DIRTY, असुरक्षित, "बैसाखी", डरावना, आदि का उपयोग किया जाएगा। दिल की धडकन नहीं पढ़ती!

मुझे तुरंत कहना होगा कि कुछ प्रयोज्य समस्याओं को हल करना संभव नहीं था: आप उस कोड में क्लोजर का उपयोग नहीं कर सकते जो कार्यकर्ता को पारित किया जाएगा।

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

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

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

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

• कार्यकर्ता के लिए पुस्तकालय / फाइलें जोड़ना
• काम का शुभारंभ

कार्यकर्ता के अंदर फाइल

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

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

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

और सबसे बुरी बात: हम एक अनियंत्रित फ़ंक्शन को चलाने के लिए 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- जैसे डेटा प्रसारित कर सकते हैं। इस प्रतिबंध के आसपास जाने के लिए, हमें निष्कासन की आवश्यकता है। सब कुछ जो 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 = "serialized-function" और template साथ एक सर्विस ऑब्जेक्ट के साथ __type = "serialized-function" , जो इस फ़ंक्शन ( 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()); } 

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

• __type - 'क्रमबद्ध-उदाहरण'
• data - डेटा जो उदाहरण में था
• index - वर्ग सेवा सूची में इस उदाहरण का वर्ग सूचकांक।

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