Soy nuevo en todo lo relacionado con el desarrollo web (solo he estado codificando usando luau durante aproximadamente un año) y tengo problemas para enviar varios archivos cuando mi servidor recibe un ping, porque quiero tener un estilo separado. css, así como diferentes scripts.
Omití MouseDraw.js y style.css, pero cuando los agregué directamente en index.html funcionaron, y no puedo verlos cuando inspecciono el elemento en el sitio web, así que creo que es solo que no lo son. siendo enviado.
¿Es posible enviarlos o tengo que ponerlos en cada archivo?
Publicaría una imagen de cómo está estructurado, pero soy nuevo, así que no puedo, pero todo está en una carpeta, y luego solo hay 'Server.js' y una carpeta llamada Cliente, que tiene todo lo que quiero enviar. el cliente.
Código del servidor:
const http = require('http'); const fs = require('fs').promises const hostname = 'localhost'; const port = 8000; let loadedPageInfo; fs.readFile(__dirname + "/Client/index.html") // Get and read the HTML data for this page .then((contents) => { loadedPageInfo = contents }) .catch((error) => { console.log(`Could not load index.html ${error}`) }) const server = http.createServer((req, res) => { res.end(loadedPageInfo || "Error loading"); }); server.listen(port, hostname, () => { console.log(`Server running at http://${hostname}:${port}/`); });Cliente:
índice.html:
<head> <title>Drawing</title> <link rel = "stylsheet" type = "text/css" href = "style.css"> </head> <body> <h1>Heading One</h1> <p1>Message from my computer:</p1> <p2><samp><br><br>File not found.<br>Press F1 to do nothing</samp></p2> </body> <script> src = "MouseDraw.js" </script> </html>style.css se solicitará como una nueva solicitud http desde el navegador. Te pedirá /style.css . Su servidor http solo envía loadedPageInfo sin importar cuál sea la ruta de la solicitud entrante, por lo que cuando el navegador solicita /style.css , su servidor http solo la envía loadedPageInfo . El navegador probablemente verá que es un tipo de archivo incorrecto (por ejemplo, no es un archivo CSS) y terminará ignorándolo.
Lo mismo sucedería con MouseDraw.js . Si desea que el navegador pueda obtener /style.css y /MouseDraw.js , deberá verificarlos en su servidor http y enviar el archivo correcto que coincida con la solicitud.
En el marco Express, puede configurar express.static() para servir automáticamente un montón de archivos HTML estáticos como estos, pero sin eso, tiene que escribir código literalmente para cada solicitud http separada que desea servir, verificando la ruta entrante de la solicitud y enviando el archivo que corresponde a dicha solicitud.
Realmente recomendaría usar el marco del servidor web Express muy liviano, ya que simplifica todo esto sin interponerse en su camino. Pero aquí está la idea general para codificarlo manualmente:
function sendFile(res, file) { const filename = path.join(__dirname, "/Client", file); fs.readFile(filename).then(data => { res.end(data); }).catch(err => { console.log(err); res.statusCode = 404; res.end(); }); } const server = http.createServer((req, res) => { switch(req.url) { case "/": sendFile(res, "index.html"); break; case "/style.css": sendFile(res, "style.css"); break; case "/MouseDraw.js": sendFile(res, "MouseDraw.js"); break; default: res.statusCode = 404; res.end(); break; } });