Integrando Socket.IO

Socket.IO está compuesto de dos partes:

• Un servidor que se integra con (o se monta en) el servidor HTTP de Node.JS (el paquete socket.io)
• Una biblioteca cliente que se carga en el lado del navegador (el paquete socket.io-client)

Durante el desarrollo, socket.io sirve el cliente automáticamente para nosotros, como veremos, así que por ahora solo tenemos que instalar un módulo:

npm install socket.io

Eso instalará el módulo y añadirá la dependencia a package.json. Ahora editemos index.js para añadirlo:

const express =require('express');
const{ createServer }=require('node:http');
const{ join }=require('node:path');
const{Server}=require('socket.io');

const app =express();
const server =createServer(app);
const io =newServer(server);

app.get('/',(req, res)=>{
 res.sendFile(join(__dirname,'index.html'));
});

io.on('connection',(socket)=>{
console.log('un usuario se conectó');
});

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';
import{Server}from'socket.io';

const app =express();
const server =createServer(app);
const io =newServer(server);

const __dirname =dirname(fileURLToPath(import.meta.url));

app.get('/',(req, res)=>{
 res.sendFile(join(__dirname,'index.html'));
});

io.on('connection',(socket)=>{
console.log('un usuario se conectó');
});

server.listen(3000,()=>{
console.log('servidor corriendo en http://localhost:3000');
});

Observa que inicializo una nueva instancia de socket.io pasando el objeto server (el servidor HTTP). Luego escucho el evento connection para sockets entrantes y lo registro en la consola.

Ahora en index.html añade el siguiente fragmento antes del </body> (etiqueta de cierre del body):

<scriptsrc="/socket.io/socket.io.js"></script>
<script>
const socket =io();
</script>

<scriptsrc="/socket.io/socket.io.js"></script>
<script>
var socket =io();
</script>

Eso es todo lo que se necesita para cargar el socket.io-client, que expone un global io (y el endpoint GET /socket.io/socket.io.js), y luego conectar.

Si deseas usar la versión local del archivo JS del lado del cliente, puedes encontrarlo en node_modules/socket.io/client-dist/socket.io.js.

Observa que no estoy especificando ninguna URL cuando llamo a io(), ya que por defecto intenta conectarse al host que sirve la página.

Si ahora reinicias el proceso (presionando Control+C y ejecutando node index.js de nuevo) y luego refrescas la página web, deberías ver la consola imprimir "un usuario se conectó".

Intenta abrir varias pestañas, y verás varios mensajes.

Cada socket también dispara un evento especial disconnect:

io.on('connection',(socket)=>{
console.log('un usuario se conectó');
 socket.on('disconnect',()=>{
console.log('usuario desconectado');
});
});

Luego si refrescas una pestaña varias veces puedes verlo en acción.