Enlace index.html client.js y server.js
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?
El navegador (porque tiene <script src="/client.js">
) realiza una solicitud de/client.js
El servidor:
- Recibe la solicitud
- Carreras
response
- Lee
index.html
- Lo envía al navegador
Como index.html
comienza con <
, el navegador arroja un error cuando intenta ejecutarlo como JavaScript.
¿ Por qué le das al navegador index.html
cuando 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 createServer
directamente, 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 static
módulo para servir archivos estáticos.