केवल मानक नोडज के निर्देशों का उपयोग करके एक साधारण वेब सर्वर कैसे बनाया जाए

अक्सर, एमपीए / एसपीए / पीडब्ल्यूए अनुप्रयोगों को विकसित करने के लिए एक सरल वेब सर्वर की आवश्यकता होती है। एक बार, सवाल के जवाब में एक बड़ी रैली में: "आप क्या कर रहे थे?", मैंने कहा कि मैं एक PWA अनुप्रयोग की मेजबानी के लिए एक वेब सर्वर बढ़ा रहा था। हम सभी लंबे समय तक हंसते रहे और हां, PWA गोंद नहीं है। एसपीए की तरह, यह एक ब्यूटी सैलून नहीं है। ये सभी प्रकार के वेब एप्लिकेशन हैं। और SSR एक देश नहीं है :-)। यदि आप केवल ब्राउज़र के माध्यम से index.html का प्रारंभ पृष्ठ खोलकर इस तरह का एप्लिकेशन लॉन्च करते हैं, तो यह काम नहीं करेगा, जैसा कि हमें करना चाहिए, सर्वोत्तम स्थिति में हमें एक ऑफ़लाइन संस्करण मिलेगा। मुझे जावास्क्रिप्ट बहुत पसंद है और यह मेरे लिए उपलब्ध साधनों का उपयोग करके समस्या को हल करेगा, इसलिए बॉक्स से बाहर बोलने के लिए।

चलो योजना के साथ शुरू करते हैं:

1. यदि कोई NodeJS नहीं है, तो LTS डाउनलोड करें, इंस्टॉल करें, सेटिंग में बदलाव न करें, अगला क्लिक करें
2. हमारे एकांत स्थान में, जहां सभी परियोजनाएं एकत्र की जाती हैं, सरल-वेब-सर्वर फ़ोल्डर बनाते हैं
3. प्रोजेक्ट फ़ोल्डर में, कमांड npm init --yes // निष्पादित करें - बिना --yes, इनिशलाइज़र बहुत सारे प्रश्न पूछेगा
4. स्क्रिप्ट अनुभाग में package.json फ़ाइल में, संपत्ति और उसके मूल्य को जोड़ें - "मुख्य": "index.js" - ताकि हम npm रन कमांड का उपयोग करके जल्दी से अपना सर्वर शुरू कर सकें
5. एक आवश्यक फ़ोल्डर बनाएं अपने सभी कोड को इसमें डालने की सिफारिश की जाती है, जिसमें इसके संचालन के लिए विधानसभा और अतिरिक्त चरणों की आवश्यकता नहीं होती है
6. Lib फ़ोल्डर में एक index.js फ़ाइल बनाएँ । यह हमारा भविष्य सर्वर है।
7. एक डिस्टर्ब फोल्डर बनाएं - यह वह फोल्डर होगा जिसमें सार्वजनिक रूप से सुलभ फाइलें होंगी, जिनमें index.html भी शामिल है, दूसरे शब्दों में, वह स्टैटिक जो हमारे सर्वर वितरित करेगा।
8. फ़ाइल /index.js खोलें
9. कुछ कोड लिखें

तो हम क्या जानते हैं कि हमारे सर्वर को क्या करना चाहिए?

1. अनुरोधों को संभालें
2. फ़ाइलें पढ़ें
3. फ़ाइल सामग्री के साथ अनुरोध करने के लिए उत्तर दें

सबसे पहले, हमारा सर्वर बनाएं, इसे idex.js फ़ाइल में आयात करें

const {createServer} = require('http'); 

यह निर्देश http मॉड्यूल की वस्तु को नष्ट करता है और एक अभिव्यक्ति, createServer फ़ंक्शन, createServer चर प्रवर्धक को असाइन करता है।

निम्न कथन का उपयोग करके एक नया सर्वर बनाएँ

  const server = createServer(); 

जब आप पहली बार सर्वर होस्ट पर जाते हैं, तो ब्राउज़र दस्तावेज़ प्राप्त करने के लिए एक अनुरोध भेजता है। इसलिए, इस घटना को संसाधित करने के लिए, हमें ऐसे अनुरोधों को सुनने की आवश्यकता है। हमारे द्वारा बनाए गए सर्वर में एक सुनने की विधि है, एक पैरामीटर के रूप में हम पोर्ट नंबर 3000 को पास करते हैं।

  const eventsEmitter = server.listen(3000); 

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

  eventsEmitter.on('request', (req, res) => { debugger; }); 

ब्राउज़र में लिंक खोलें

इसलिए, हम डिबगर निर्देशों पर बस गए। हम देखते हैं कि पैरामीटर के रूप में हमें दो रीक मिलते हैं, रेस ऑब्जेक्ट्स। ये ऑब्जेक्ट्स स्ट्रीम टाइप ऑब्जेक्ट्स के उदाहरण हैं , इसलिए रीक रीड स्ट्रीम है, और रेस राइट स्ट्रीम है।

हमने अनुरोध संसाधित किया और हम कह सकते हैं कि "मामला टोपी में है।" फ़ाइल को पढ़ने और वापस देने के लिए सभी को छोड़ दिया है। पहले आपको यह समझने की जरूरत है कि हमें किस तरह की फाइल चाहिए। डीबगर में, रीक पैरामीटर के सभी गुणों का अध्ययन करते हुए, मैंने देखा कि इसमें url प्रॉपर्टी है। लेकिन इसमें index.html जैसा कुछ भी नहीं है ।

आइए अपने ब्राउज़र को फिर से देखें: हम देखते हैं कि हमने स्पष्ट रूप से यह संकेत नहीं दिया है। आइए फिर से कोशिश करें, लेकिन हम पहले ही स्पष्ट रूप से index.html निर्दिष्ट कर देंगे ।

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

  eventsEmitter.addListener('request', ({url: requestUrl}, res) => { debugger }); 

महान, आगे क्या है? सच में, मैं वास्तव में इस तथ्य को पसंद नहीं करता हूं कि index.html को हमेशा स्पष्ट रूप से निर्दिष्ट करने की आवश्यकता होगी, इसलिए चलो इस समस्या को तुरंत हल करें। मैंने तय किया कि ऐसा करने का सबसे आसान तरीका मानक extname फ़ंक्शन का उपयोग करना है ; यह मानक पैकेज में शामिल है
पथ मॉड्यूल के नोड्स हम निम्नलिखित कथन का उपयोग करके इसे आयात करते हैं।

  const {extname} = require('path'); 

अब आप एक पैरामीटर के रूप में requestUrl आइडेंटिफायर एक्सप्रेशन पास करके इसे कॉल कर सकते हैं और एक्सप्रेशन के प्रारूप '.extension' लिए एक्सप्रेशन प्राप्त कर सकते हैं। यदि अनुरोध किसी फ़ाइल को स्पष्ट रूप से निर्दिष्ट नहीं करता है, तो एक खाली स्ट्रिंग लौटा दी जाएगी। इस सिद्धांत का उपयोग करते हुए, हम 'index.html' का डिफ़ॉल्ट मान जोड़ेंगे। हम निम्नलिखित निर्देश लिखते हैं

  const url = extname(requestUrl) === '' ? DEFAULT_FILE_NAME : requestUrl; 

मुझे यकीन है कि सर्वर उपयोगकर्ता इस नाम को ओवरराइड करना चाहेगा और निम्नलिखित विवरण का उपयोग करके एक पर्यावरण चर भी स्थापित कर सकता है

  const {env: {DEFAULT_FILE_NAME = '/index.html'}} = process;` 

वैश्विक परिवर्तनशील प्रक्रिया में, बहुत सी उपयोगी जानकारी है, मैं बस इसका एक हिस्सा दफन कर दूंगा, विशेष रूप से, env संपत्ति में उपयोगकर्ता के पर्यावरण के सभी गुण शामिल हैं और हम इसमें DEFAULT_FILE_NAME की तलाश करेंगे यदि उपयोगकर्ता इसे निर्दिष्ट नहीं करता है - हम डिफ़ॉल्ट रूप से index.html का उपयोग करते हैं।

महत्वपूर्ण: यदि पर्यावरण संपत्ति का मान DEFAULT_FILE_NAME कुछ भी नहीं है, लेकिन अपरिभाषित है, तो डिफ़ॉल्ट मान असाइन करना काम नहीं करेगा। यह याद रखने योग्य है, लेकिन अभी नहीं, हम सब कुछ न्यूनतम करने के लिए कर रहे हैं :-)

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

  const {resolve, extname} = require('path'); 

अगली पंक्ति 10 पर, हम एक निर्देश लिखते हैं जो फ़ाइलपथ चर के लिए पूर्ण पथ को प्राप्त करेगा और बचाएगा । मैंने पहले भी "वांग" किया था कि लचीलेपन के लिए इस फ़ोल्डर का नाम फिर से परिभाषित किया जा सकता है। इसलिए, मैं नाम जोड़ते हुए, लाइन 6 पर निर्देश का विस्तार करता हूं
पर्यावरण चर DIST_FOLDER !

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

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> TESTING 1,2,3... </body> </html> 

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

  const {createReadStream} = require('fs'); 

और अनुरोध प्रोसेसर के शरीर में लाइन 12 पर हम निम्नलिखित कथन का उपयोग करते हैं

  createReadStream(filePath) 

परिणामस्वरूप, रीड-स्ट्रीम ऑब्जेक्ट का उदाहरण इसका उपयोग करके वापस कर दिया जाएगा
हम लिखित स्ट्रीम में रीड स्ट्रीम को स्विच कर सकते हैं, हम स्ट्रीम और बहुत सी अन्य उपयोगी चीजों को भी बदल सकते हैं। तो Res पैरामीटर एक रीड स्ट्रीम है, है ना?

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

  createReadStream(filePath).pipe(res); 

क्या वह सब है? , नहीं। और त्रुटियों को कौन संभालेगा? किस तरह की गलतियां? आइए css फ़ाइल को index.html फ़ाइल में अपलोड करने का प्रयास करें, लेकिन हमने इसे नहीं बनाया और देखें कि क्या होता है :-)

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="index1.css"> </head> <body> TESTING 1,2,3... </body> </html> 

उम्मीद है, लेकिन सर्वर दुर्घटनाग्रस्त हो गया! ऐसा बिल्कुल नहीं है। तथ्य यह है कि डिफ़ॉल्ट रूप से त्रुटियां धाराओं में नहीं पकड़ी जाती हैं और आपको यह स्वयं करने की आवश्यकता है :-) createReadStream उस स्ट्रीम को वापस करता है जिसमें त्रुटि होती है। इसलिए, हम एक त्रुटि हैंडलर जोड़ते हैं। कॉल का उपयोग विधि पर करना। त्रुटि ईवेंट का नाम और हैंडलर फ़ंक्शन को निर्दिष्ट करना। यह 404 रिस्पॉन्स कोड के साथ रीड रीड स्ट्रीम को समाप्त कर देगा।

  createReadStream(filePath) .on('error', error => res.writeHead(404).end()) .pipe(res); 

जाँच!

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

  const {env: {DEFAULT_FILE_NAME = '/index.html', DIST_FOLDER = 'dist', DEFAULT_MIME_TYPES = '{}'}} = process; const {text} = mimeTypes = { 'html': 'text/html', 'jpeg': 'image/jpeg', 'jpg': 'image/jpeg', 'png': 'image/png', 'js': 'text/javascript', 'css': 'text/css', 'text': 'plain/text', 'json': 'application/json', ...JSON.parse(DEFAULT_MIME_TYPES) }; 

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

  const fileExtension = extname(url).split('.').pop(); 

और पाइप इवेंट हैंडलर की सहायता से, हम वांछित MIME प्रकार सेट करते हैं

 res.on('pipe', () => res.setHeader(contentType, mimeTypes[fileExtension] || text)); 

चेक

वह सब - सर्वर तैयार है। बेशक, यह सही नहीं है, लेकिन एक त्वरित शुरुआत के लिए, यह बात है। यदि आप इस विचार को विकसित करने में रुचि रखते हैं, तो कृपया टिप्पणियों में लिखें :-)

पूर्ण परियोजना कोड