Sirviendo HTML
Hasta ahora en index.js estamos llamando a res.send y pasándole una cadena de HTML. Nuestro código se vería muy confuso si simplemente colocáramos todo el HTML de nuestra aplicación ahí, así que en su lugar vamos a crear un archivo index.html y servirlo.
Refactoricemos nuestro manejador de ruta para usar sendFile en su lugar.
- CommonJS
- ES modules
const express =require('express');
const{ createServer }=require('node:http');
const{ join }=require('node:path');
const app =express();
const server =createServer(app);
app.get('/',(req, res)=>{
res.sendFile(join(__dirname,'index.html'));
});
server.listen(3000,()=>{
console.log('servidor corriendo en http://localhost:3000');
});
importexpressfrom'express';
import{ createServer }from'node:http';
import{ fileURLToPath }from'node:url';
import{ dirname, join }from'node:path';
const app =express();
const server =createServer(app);
const __dirname =dirname(fileURLToPath(import.meta.url));
app.get('/',(req, res)=>{
res.sendFile(join(__dirname,'index.html'));
});
server.listen(3000,()=>{
console.log('servidor corriendo en http://localhost:3000');
});
Pon lo siguiente en tu archivo index.html:
<!DOCTYPEhtml>
<html>
<head>
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<title>Chat Socket.IO</title>
<style>
body{margin:0;padding-bottom:3rem;font-family: -apple-system, BlinkMacSystemFont,"Segoe UI", Roboto, Helvetica, Arial, sans-serif;}
#form{background:rgba(0,0,0,0.15);padding:0.25rem;position: fixed;bottom:0;left:0;right:0;display: flex;height:3rem;box-sizing: border-box;backdrop-filter:blur(10px);}
#input{border: none;padding:01rem;flex-grow:1;border-radius:2rem;margin:0.25rem;}
#input:focus{outline: none;}
#form> button{background:#333;border: none;padding:01rem;margin:0.25rem;border-radius:3px;outline: none;color:#fff;}
#messages{list-style-type: none;margin:0;padding:0;}
#messages> li{padding:0.5rem1rem;}
#messages> li:nth-child(odd){background:#efefef;}
</style>
</head>
<body>
<ulid="messages"></ul>
<formid="form"action="">
<inputid="input"autocomplete="off"/><button>Enviar</button>
</form>
</body>
</html>
Si reinicias el proceso (presionando Control+C y ejecutando node index.js de nuevo) y actualizas la página debería verse así: