Enlace index.html client.js y server.js

Resuelto Raphael asked hace 5 años • 1 respuestas

Estoy empezando con Node.js y ya tengo un problema en mi primer programa. A continuación se muestra el código que estoy usando. Índice.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Random Temperatures</title>
  </head>
  <body>
    <input type="text" id="tb" name="tb" />
    <input type="button" value="Random Number!" id="myButton" name="myButton"/>
    <script src="client.js"></script>
</body>
</html>

Cliente.js:

const textBox = document.getElementById('tb');
const button = document.getElementById('myButton');
button.addEventListener('click', function(e) {
    var rnd = Math.floor(Math.random() * 100);
    textBox.value = rnd;
});

Servidor.js:

var app = require('http').createServer(response);
var fs = require('fs');
app.listen(8080);
console.log("App running…");
function response(req, res) {
    fs.readFile(__dirname + '/public/index.html',
    function (err, data) {
        if (err) {
            res.writeHead(500);
            return res.end('Failed to load file index.html');
        }
        res.writeHead(200);
        res.end(data);
    });
}

Cuando inicio la aplicación voy al navegador me aparece el cuadro de texto y el botón. Pero en la consola del navegador recibo estos errores:

client.js:1 Error de sintaxis no detectado: token inesperado <

ContentScript.js:112 Excepción en onResRdy: TypeError: no se puede leer la propiedad 'htmlRes' de indefinido

localhost/:1 Runtime.lastError no marcado: no se pudo establecer la conexión. El extremo receptor no existe.

Supongo que mi problema es la vinculación entre los 3 archivos pero probé varias cosas y no puedo solucionar el problema. Estoy seguro de que es un error estúpido, pero perdónenme, recién estoy empezando. ¿Algún consejo?

Raphael avatar Aug 20 '19 18:08 Raphael
Aceptado

El navegador (porque tiene <script src="/client.js">) realiza una solicitud de/client.js

El servidor:

  1. Recibe la solicitud
  2. Carrerasresponse
  3. Leeindex.html
  4. Lo envía al navegador

Como index.htmlcomienza con <, el navegador arroja un error cuando intenta ejecutarlo como JavaScript.

¿ Por qué le das al navegador index.htmlcuando te lo pide client.js?

Debe examinar el objeto de solicitud, determinar qué URL se solicita, escribir lógica para devolver el recurso correcto con el código de estado correcto y el tipo de contenido correcto, y luego devolverlo al cliente.

La documentación de Node.js tiene un ejemplo de esto, pero probablemente deberías dejar de intentar usarlo createServerdirectamente, ya que implica una gran cantidad de reinvención de ruedas, cambia a usar Express y sigue la (muy breve) guía de introducción que incluye una sección sobre usando el staticmódulo para servir archivos estáticos.

Quentin avatar Aug 20 '2019 11:08 Quentin