Instalación y configuración de herramientas para trabajar con WebSockets

1) Requisitos

Node.js LTS (18 o superior).
Un editor (recomendado Visual Studio Code).
Navegador moderno (por ejemplo, Chrome).
(Opcional para WSS) mkcert u OpenSSL para certificados locales.
(Opcional) Postman o WebSocket King Client para probar conexiones.
En Windows los comandos se muestran con PowerShell.

2) Proyecto base (Node.js)

mkdir websockets-js && cd websockets-js
npm init -y

3) Opción A — WebSocket puro con ws (mínimo y rápido)

3.1 Instalar

npm i ws

3.2 Servidor mínimo (server-ws.js)

// server-ws.js
const WebSocket = require("ws");

const wss = new WebSocket.Server({ port: 8080 }, () => {
  console.log("Servidor WS en ws://localhost:8080");
});

wss.on("connection", (ws) => {
  console.log("Cliente conectado");
  ws.send("Bienvenido! Conexión WebSocket establecida.");

  ws.on("message", (msg) => {
    console.log("Mensaje del cliente:", msg.toString());
    // Eco al mismo cliente
    ws.send("Eco: " + msg.toString());

    // Broadcast a todos los conectados (ejemplo):
    // wss.clients.forEach(c => c.readyState === WebSocket.OPEN && c.send("[Broadcast] " + msg));
  });

  ws.on("close", () => console.log("Cliente desconectado"));
});

3.3 Ejecutar

node server-ws.js

3.4 Cliente web mínimo (cliente-ws.html)

Ábrelo con doble clic en el navegador.

<!doctype html>
<html lang="es">
<body>
<script>
  const ws = new WebSocket("ws://localhost:8080");

  ws.onopen = () => {
    console.log("Abierto");
    ws.send("Hola servidor (WS puro)!");
  };

  ws.onmessage = (e) => console.log("Servidor:", e.data);
  ws.onclose = () => console.log("Cerrado");
  ws.onerror  = (err) => console.error("Error WS:", err);
</script>
</body>
</html>

4) Opción B — Socket.IO (popular y práctica)

¿Por qué usarlo? Maneja reconexión automática, salas/canales, fallback y una API muy cómoda.

4.1 Instalar

npm i socket.io

4.2 Servidor básico (server-sio.js)

// server-sio.js
const { Server } = require("socket.io");

// Habilita CORS para pruebas locales (orígenes cualquiera)
const io = new Server(3000, { cors: { origin: "*" } });

io.on("connection", (socket) => {
  console.log("Cliente conectado:", socket.id);
  socket.emit("saludo", "Bienvenido a Socket.IO!");

  socket.on("mensaje", (payload) => {
    console.log("mensaje:", payload);
    // Responder solo a este socket:
    socket.emit("eco", payload);
    // O broadcast a todos:
    // io.emit("broadcast", payload);
  });

  socket.on("disconnect", () => console.log("Cliente desconectado:", socket.id));
});

console.log("Socket.IO en ws://localhost:3000 (handshake HTTP + WS bajo el capó)");

4.3 Cliente web mínimo (cliente-sio.html)

<!doctype html>
<html lang="es">
<body>
<script src="https://cdn.socket.io/4.7.5/socket.io.min.js"></script>
<script>
  const socket = io("http://localhost:3000");

  socket.on("connect",  () => console.log("Conectado", socket.id));
  socket.on("saludo",   (m) => console.log("Servidor:", m));
  socket.on("eco",      (m) => console.log("Eco:", m));
  socket.on("broadcast",(m) => console.log("Broadcast:", m));
  socket.on("disconnect", () => console.log("Desconectado"));

  // Enviar un mensaje de prueba
  socket.emit("mensaje", "Hola servidor (Socket.IO)!");
</script>
</body>
</html>

Diagrama de herramientas para WebSockets

Más info: Socket.IO.

5) Probar y depurar

5.1 Con el navegador (DevTools)

Abre el cliente (HTML).
F12 → Network → WS (en cliente-ws.html verás los frames).
Revisa Console para logs de onopen/onmessage.

5.2 Con Postman / WebSocket King Client

Conecta a ws://localhost:8080 (ws puro) o a la URL de Socket.IO.
Envía mensajes JSON o texto y verifica respuestas.

6) Servir el cliente desde Node (opcional)

Si prefieres abrir el HTML desde un servidor HTTP:

npm i express

http-static.js:

const express = require("express");
const path = require("path");
const app = express();

app.use(express.static(path.join(__dirname, "public"))); // coloca tus HTML/JS/CSS en /public

app.listen(8081, () => console.log("HTTP estático en http://localhost:8081"));

Estructura:

websockets-js/
  public/
    cliente-ws.html
    cliente-sio.html
  server-ws.js
  server-sio.js
  http-static.js

Ejecuta node http-static.js y abre http://localhost:8081/cliente-ws.html.

7) WebSocket seguro (WSS) en local

Para producción siempre WSS. En local puedes crear un certificado de desarrollo.

7.1 Crear certificado con mkcert (sencillo)

mkcert -install
mkcert localhost

Genera localhost.pem y localhost-key.pem.

7.2 Servidor ws + TLS (secure-ws.js)

const fs = require("fs");
const https = require("https");
const WebSocket = require("ws");

const server = https.createServer({
  cert: fs.readFileSync("./localhost.pem"),
  key:  fs.readFileSync("./localhost-key.pem"),
});

const wss = new WebSocket.Server({ server });

wss.on("connection", (ws) => {
  ws.send("Conexión WSS segura!");
  ws.on("message", (m) => ws.send("Eco (WSS): " + m));
});

server.listen(8443, () => console.log("WSS en wss://localhost:8443"));

7.3 Cliente WSS

<script>
  const ws = new WebSocket("wss://localhost:8443");
  ws.onopen = () => ws.send("Hola por WSS");
  ws.onmessage = (e) => console.log(e.data);
</script>

Si el navegador advierte del certificado, confía en el certificado local creado por mkcert.

8) Variables de entorno y scripts útiles

8.1 .env (opcional con dotenv)

npm i dotenv

server-ws-env.js:

require("dotenv").config();
const WebSocket = require("ws");

const PORT = process.env.PORT || 8080;
const wss = new WebSocket.Server({ port: PORT }, () => {
  console.log(`WS en ws://localhost:${PORT}`);
});

.env:

PORT=8082

8.2 Scripts en package.json

{
  "scripts": {
    "ws": "node server-ws.js",
    "sio": "node server-sio.js",
    "wss": "node secure-ws.js",
    "static": "node http-static.js"
  }
}

Ejecuta:

npm run ws
npm run sio
npm run wss
npm run static

9) Tips de estructura y escalabilidad

Mensajes JSON: estandariza un formato (ej. {type, payload}) para eventos.
Manejo de errores: onerror, try/catch y logs claros en servidor y cliente.
Reconexión (WS puro): si no usas Socket.IO, implementa retry con backoff.
Salas/rooms: si necesitas grupos y difusión selectiva, Socket.IO lo simplifica.
CORS: habilita cors: { origin: "http://localhost:8081" } si sirves el front aparte.

10) Checklist de resolución de problemas

¿Servidor arriba? Revisa logs. ¿Escucha en ws://?
¿Ruta correcta? Verifica ws://host:puerto o wss://.
¿Puerto libre? Cambia si está en uso.
¿Firewall? Permite el puerto.
¿WSS falla? Revisa cert/key y confianza del navegador.
¿Socket.IO desde CDN? Asegura que URL/puerto coincidan con el servidor.

Retornar