Node.js - बाहरी जेएस और सीएसएस फ़ाइलें (केवल node.js का उपयोग नहीं करते हैं)

Question

मैं node.js सीखने की कोशिश कर रहा हूं और थोड़ा सा रोडब्लॉक मारा है।

मेरी समस्या यह है कि मैं बाहरी सीएसएस और जेएस फ़ाइल को एक HTML फ़ाइल में लोड नहीं कर सका।

GET http://localhost:8080/css/style.css 404 (Not Found) 
GET http://localhost:8080/js/script.css 404 (Not Found) 

मैं कुछ हद तक है, तो निम्न एप्लिकेशन संरचना की नकल सार्वजनिक निर्देशिका के लिए एक मार्ग को जोड़ने के लिए वेब सर्वर सेवा करने के लिए अनुमति देने के लिए कहा गया था (यह जब सभी फाइलों को एप्लिकेशन की जड़ में थे) बाहरी फाइलें

मेरे ऐप संरचना की तरह तो

domain.com 
    app/ 
    webserver.js 

    public/ 
    chatclient.html 

    js/ 
     script.js 

    css/ 
     style.css 

तो मेरी webserver.js स्क्रिप्ट एप्लिकेशन की जड़ में है, और सब कुछ मैं उपयोग करना चाहते 'सार्वजनिक' में है।

मैंने this example भी देखा जो पथ में स्थित किसी भी फाइल सीमाओं को प्राप्त करने के लिए path.extname() का उपयोग करता है। (अंतिम कोड ब्लॉक देखें)।

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

मेरा webserver.js इस तरह दिखता है।

var http = require('http') 
, url = require('url') 
, fs = require('fs') 
, path = require('path') 
, server; 

server = http.createServer(function(req,res){ 

    var myPath = url.parse(req.url).pathname; 

    switch(myPath){ 

     case '/public': 

     // get the extensions of the files inside this dir (.html, .js, .css) 
     var extname = mypath.extname(path); 

      switch (extname) { 

      // get the html 
      case '.html': 
       fs.readFile(__dirname + '/public/chatclient.html', function (err, data) { 
       if (err) return send404(res); 
       res.writeHead(200, {'Content-Type': 'text/html'}); 
       res.write(data, 'utf8'); 
       res.end(); 
       }); 
      break; 

      // get the script that /public/chatclient.html references 
      case '.js': 
       fs.readFile(__dirname + '/public/js/script.js', function (err, data) { 
       if (err) return send404(res); 
       res.writeHead(200, { 'Content-Type': 'text/javascript' }); 
       res.end(content, 'utf-8'); 
       res.end(); 
       }); 
      break; 

      // get the styles that /public/chatclient.html references 
      case '.css': 
       fs.readFile(__dirname + '/public/css/style.css', function (err, data) { 
       if (err) return send404(res); 
       res.writeHead(200, { 'Content-Type': 'text/javascript' }); 
       res.end(content, 'utf-8'); 
       res.end(); 
       }); 
      } 
      break; 

      default: send404(res); 
     } 
    }); 

सार्वजनिक करने के मामले के अंदर, मैं के माध्यम से वर extname = mypath.extname (पथ) इस निर्देशिका के अंदर फ़ोल्डरों/फ़ाइलें के किसी भी प्राप्त करने के लिए कोशिश कर रहा हूँ; प्रदान किए गए लिंक के समान।

लेकिन जब मैं इसे लॉग इन करता हूं तो 'extname' खाली होता है।

क्या कोई सलाह दे सकता है कि मुझे यहां जोड़ने या जोड़ने की आवश्यकता हो सकती है? मुझे पता है कि यह एक्सप्रेस में आसानी से किया जा सकता है, लेकिन मैं जानना चाहता हूं कि नोड पर भरोसा करने वाली चीज़ को कैसे प्राप्त किया जाए।

मैं इस पर किसी भी मदद की सराहना करता हूं।

अग्रिम धन्यवाद।

Answer 1

आपके कोड के साथ कई समस्याएं हैं।

1. आपका सर्वर चलाने के लिए नहीं जा रहा है क्योंकि आपने सुनने के लिए पोर्ट निर्दिष्ट नहीं किया है।
2. जैसा कि एरिक ने बताया कि आपकी केस स्थिति विफल हो जाएगी क्योंकि यूआरएल में 'सार्वजनिक' दिखाई नहीं दे रहा है।
3. आप अपने जेएस और सीएसएस प्रतिक्रियाओं में एक गैर-मौजूद चर 'सामग्री' का संदर्भ दे रहे हैं, 'डेटा' होना चाहिए।
4. आप सीएसएस सामग्री-प्रकार शीर्षलेख टेक्स्ट/जावास्क्रिप्ट
5. के बजाय टेक्स्ट/सीएसएस होना चाहिए शरीर में 'utf8' निर्दिष्ट करना अनावश्यक है।

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

var http = require('http'), 
    fs = require('fs'); 

http.createServer(function (req, res) { 

    if(req.url.indexOf('.html') != -1){ //req.url has the pathname, check if it conatins '.html' 

     fs.readFile(__dirname + '/public/chatclient.html', function (err, data) { 
     if (err) console.log(err); 
     res.writeHead(200, {'Content-Type': 'text/html'}); 
     res.write(data); 
     res.end(); 
     }); 

    } 

    if(req.url.indexOf('.js') != -1){ //req.url has the pathname, check if it conatins '.js' 

     fs.readFile(__dirname + '/public/js/script.js', function (err, data) { 
     if (err) console.log(err); 
     res.writeHead(200, {'Content-Type': 'text/javascript'}); 
     res.write(data); 
     res.end(); 
     }); 

    } 

    if(req.url.indexOf('.css') != -1){ //req.url has the pathname, check if it conatins '.css' 

     fs.readFile(__dirname + '/public/css/style.css', function (err, data) { 
     if (err) console.log(err); 
     res.writeHead(200, {'Content-Type': 'text/css'}); 
     res.write(data); 
     res.end(); 
     }); 

    } 

}).listen(1337, '127.0.0.1'); 
console.log('Server running at http://127.0.0.1:1337/'); 

Answer 2

public क्लाइंट द्वारा अनुरोध किए गए यूआरएल में प्रकट नहीं होता है, इसलिए MyPath पर स्विच हमेशा से गिर जाएगा।

Answer 3

आप express जो आप स्वचालित रूप से मार्ग स्थिर फ़ाइलों के लिए एक 'सार्वजनिक' निर्देशिका निर्धारित करने की अनुमति की तरह सर्वर चौखटे का उपयोग कर में देखना चाहते हो सकता है

var express = require('express'),app = express(); 
app.use(express.static(path.join(__dirname, 'public'))); 

इस तरह के एक ढांचे के सस्ते भूमि के ऊपर वास्तव में प्रयास के लायक हो जाएगा प्रभावी ढंग से 'पहिया को पुनर्निर्मित करने'

Answer 4

आप कनेक्ट में प्रदान किए गए Static मिडलवेयर को देखने पर विचार कर सकते हैं। स्टेटिक के स्रोत कोड को देखते हुए आपको node.js कोड के साथ ऐसा करने के बारे में कुछ विचार मिल सकते हैं (यदि आप मौजूदा पुस्तकालय का उपयोग किए बिना इसे कैसे करना चाहते हैं)।

Answer 5

// get the extensions of the files inside this dir (.html, .js, .css) 
    var extname = **mypath**.extname(path); 

ये उलट कर रहे हैं। होना चाहिए:

var extension = path.extname(mypath); 

मैं चर से भी नामों के लिए फ़ंक्शन नामों का उपयोग नहीं करता जब मैं इससे बच सकता हूं।

Answer 6

परिवर्तन पर ऑटो अपडेट फ़ाइलें, अद्यतन 1 सेकंड के लिए देरी। प्रारूप: app.js | index.htm | style.css

// packages 
const http = require('http'); 
const fs = require('fs'); 
// server properties 
const hostname = '127.0.0.1'; 
const port = 3000; 
const timer = 300; 

//should trigger atualize function every timer parameter 
let htmlfile = ''; 
let cssfile = ''; 
let jsfile = ''; 

uptodate(); 

// should read file from the disk for html 
function uptodate() 
{ 
    console.log(1); 
    fs.readFile('./index.html', function (err, html) { 
    if (err) { 
     throw err; 
    }  
    htmlfile = html; 
    }); 
    // should read css from the disk for css 
    fs.readFile('./style.css', function (err, html) { 
    if (err) { 
     throw err; 
    }  
    cssfile = html; 
    }); 

    // should read js file from the disk 
    fs.readFile('./app.js', function (err, html) { 
    if (err) { 
     throw err; 
    }  
    jsfile = html; 
    }); 
    setTimeout(function(){ uptodate(); }, 1000); 
} 
const server = http.createServer((req, res) => { 
    res.statusCode = 200; 

    // should send css and js 
    if(req.url.indexOf('.css') != -1){ //req.url has the pathname, check if it conatins '.js' 
    res.writeHead(200, {'Content-Type': 'text/css'}); 
    res.write(cssfile); 
    res.end(); 
    return; 
    } 
    if(req.url.indexOf('.js') != -1){ //req.url has the pathname, check if it conatins '.js' 
    res.writeHead(200, {'Content-Type': 'text/javascript'}); 
    res.write(jsfile); 
    res.end(); 
    return; 
    } 
    // should send html file via request 
    res.writeHeader(200, {"Content-Type": "text/html"}); 
    res.write(htmlfile); 
    res.end(); 
}); 

// should send css and js 

server.listen(port, hostname,() => { 
    console.log(`Server running at http://${hostname}:${port}/`); 
});