जेएस (jQuery) में मल्टीथ्रेडेड फ़ाइल लोडर

अच्छे दिन, सहकर्मियों। इस लेख में, मैं JS (jQuery) पर एक बहु-थ्रेडेड फ़ाइल डाउनलोडर (एक सीमित सर्वर लोड के साथ) बनाने के अनुभव का वर्णन करूंगा।

हाल ही में, मुझे एक समस्या थी (जिसका समाधान मैं आपके साथ साझा करना चाहता हूं): व्यवस्थापक पैनल में, एक समय में एक से अधिक फ़ाइल का चयन करने और अपलोड करने की क्षमता। कार्य तुच्छ प्रतीत होता है और मुश्किल नहीं है, लेकिन अंत में, मेरा समाधान मुझे दिलचस्प लग रहा था, क्योंकि कोई एनालॉग नहीं मिला।

समाधान नंबर 1

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

निर्णय संख्या 2

कार्य अत्यावश्यक था, इसलिए तत्काल समाधान की आवश्यकता थी। मुझे नहीं लगता कि मैंने लंबे समय तक इनपुट फ़ील्ड (HTML5 के साथ उपलब्ध) में कई गुणनखंड बनाए हैं।

<form id='FilesupLoadForm'> <input type='file' id='fileinput' name='files' multiple="multiple" > <input type="submit" value='upload'> </form> 

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

निर्णय संख्या 3

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

समाधान लगभग इस प्रकार था:

 jQuery.each($('#fileinput')[0].files, function(i, f) { var file = new FormData(); file.append('file', f); $.ajax({ url: 'uploader.php', data: file, async : false, contentType: false, processData: false, dataType: "JSON", type: 'POST', beforeSend: function() {}, complete: function(event, request, settings) {}, success: function(data){ } }); }); 

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

निर्णय संख्या ४

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

  FilesUploader = { dataArr : new Array(), fStek : new Array(), vStek : 0, deley : 100, debug : true, maxFilesSize : 1024*1024*10, maxThreads : 10, 

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

चर (विशेष रूप से fStek और डेले ) की स्पष्टता को विचाराधीन दूसरी FilesUploader.controller () फ़ंक्शन द्वारा पेश किया जाएगा। इस बीच, आइए कक्षा को आरंभ करने के लिए आगे बढ़ें:

  run : function() { jQuery.each($('#fileinput')[0].files, function(i, f) { FilesUploader.dataArr.push(f); }); FilesUploader.controller(); }, 

यह इस फ़ंक्शन पर है कि एक फॉर्म में एक बटन के क्लिक इवेंट का प्रसंस्करण लटका हुआ है। फ़ंक्शन का काम सरल है: हम इनपुट में दर्ज की गई फ़ाइलों ( jQuery.each ) से गुजरते हैं और सरणी में प्रत्येक के बारे में एक फ़ाइल ( FilesUploader.dataArr.push (f) ) जोड़ते हैं। अगला, हम नियंत्रक को कहते हैं, जो सिस्टम का सबसे महत्वपूर्ण और जटिल हिस्सा है:

  controller : function() { FilesUploader.fStek.push(setTimeout(FilesUploader.controller, FilesUploader.deley)); if(FilesUploader.vStek>=this.maxThreads) { return; } item = FilesUploader.dataArr.pop(); if(item) { if(FilesUploader.maxFilesSize-item.size < 0) { FilesUploader.dataArr.push(item); return; } FilesUploader.maxFilesSize-=item.size; FilesUploader.vStek++; FilesUploader.worker(item); } else clearTimeout(FilesUploader.fStek.pop()); }, 

फ़ंक्शन की पहली पंक्ति में, हम उसी फ़ंक्शन को अतुल्यकालिक रूप से कहते हैं (एक निश्चित अवधि के बाद) (यानी, एक पुनर्संरचना बनाएं), और किसी फ़ंक्शन को किसी भी निष्पादन में बाधा उत्पन्न करने के लिए, एक चर में कहा जाता है।
अगले धागे की जाँच के लिए शर्त है।
सरणी से फाइल प्राप्त करने के बाद ( FilesUploader.dataArr.pop () ) हम इसे उपस्थिति के लिए जांचते हैं।
1. अगर कोई फ़ाइल नहीं है, तो हम उनके पहचानकर्ता द्वारा स्पष्ट कार्यों को "मार" देते हैं ( ClearTimeout (FilesUploader.fStek.pop ()) );
2. यदि फ़ाइल मौजूद है, तो हम डाउनलोड की गई फ़ाइलों की मात्रा की जांच करते हैं, और यदि यह अधिक हो जाती है, तो हम फ़ाइल को स्टैक पर वापस लौटाते हैं और फ़ंक्शन से बाहर निकलते हैं, अन्यथा, यदि यह अधिक नहीं है: हम वॉल्यूम हटाते हैं, स्ट्रीम थ्रेड के काउंटर बढ़ाते हैं, और निम्न फ़ंक्शन ( FilesUploader.worker) को कॉल करते हैं। आइटम) )।

 worker : function(item) { var file = new FormData(); file.append('file', item); $.ajax({ url: 'uploader.php', data: file, contentType: false, processData: false, dataType: "JSON", type: 'POST', beforeSend: function() {}, complete: function(event, request, settings) { FilesUploader.maxFilesSize+=this.fileData.size; FilesUploader.vStek--; }, success: function(data){ } }); }, 

Ajax का उपयोग करके सर्वर पर एक फ़ाइल भेजने के लिए, आपको फ़ाइल डेटा (file.append ()) को इसमें FormData वर्ग के उदाहरण में डालने की आवश्यकता है।
अगला, हम $ .ajax फ़ंक्शन को कॉल करते हैं, जो हमारी फ़ाइल को सर्वर पर लोडर में स्थानांतरित कर देगा। प्रत्येक अनुरोध (पूर्ण () फ़ंक्शन) के अंत में, आपको स्वीकार्य मात्रा में वृद्धि करने और निष्पादन योग्य थ्रेड्स की संख्या को कम करने की आवश्यकता है (जो कि “ FilesUploader.maxFilesSize + = this.fileloadata.size ” और “ FilesUploader.vStek- ”) लाइनों में किया जाता है।

और अंतिम स्पर्श कंसोल आउटपुट फ़ंक्शन और समापन ब्रैकेट है:

  out : function(message) { if(console.log && this.debug) console.log(message); } } 

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