FlowChat (Chat-node) — v2026

Chat en tiempo real con Node.js puro — sin Socket.io, sin frameworks frontend, cero dependencias npm.

Versión: 2026.0.0

Stack

Capa	Herramienta	Por qué
Runtime	Node.js 18+	Servidor y lógica
HTTP	http (nativo)	Servir archivos estáticos
WebSocket	Implementación propia (server/websocket.js)	RFC 6455 desde cero, sin dependencias
Chat logic	ChatServer (módulo propio)	Reutilizable en otras apps Node
Protocolo	JSON custom (protocol.js)	Contrato claro cliente ↔ servidor
Frontend	HTML + CSS + JS vanilla	Sin React/Vue, fácil de integrar
Cliente	ChatClient (módulo propio)	Importable en cualquier web app

Inicio rápido

npm start
# Abre http://localhost:3000

Conectar varios usuarios

Escenario	Cómo
Misma PC	Otra pestaña o ventana incógnito en http://localhost:3000
Otro dispositivo en tu red	Comparte la URL de red que muestra el servidor al iniciar
Internet	Despliega el servidor o usa un túnel (ngrok http 3000)

Cada persona entra con un nombre único y queda en la misma sala automáticamente.

Estructura

server/
  index.js        → HTTP server + punto de entrada
  websocket.js    → WebSocket server (desde cero)
  chatServer.js   → Lógica del chat (reutilizable)
  protocol.js     → Tipos de mensaje

public/
  index.html      → Pantalla de login (nombre)
  chat.html       → Sala de chat
  css/chat.css    → Estilos
  js/
    chatClient.js → Cliente reutilizable
    protocol.js   → Mismo contrato que el server
    app.js        → UI de la demo

Reutilizar en otra app

Frontend (cualquier web app)

import { ChatClient } from './chatClient.js';

const chat = new ChatClient({ url: 'ws://localhost:3000/ws' });

chat.on('message', (msg) => console.log(msg.username, msg.text));
chat.on('users', (users) => console.log('Online:', users));

await chat.connect('TuNombre');
chat.send('Hola mundo');

Backend (otra app Node.js)

import { ChatServer } from './server/chatServer.js';
import { WebSocketServer } from './server/websocket.js';

const chat = new ChatServer();
const wss = new WebSocketServer({ server: httpServer, path: '/ws' });
wss.on('connection', (ws) => chat.handleConnection(ws));

Protocolo de mensajes

Tipo	Dirección	Payload
join	Cliente → Server	{ username }
message	Cliente → Server	{ text }
history	Server → Cliente	{ messages: [...] }
message	Server → Cliente	{ id, username, text, timestamp }
user_joined	Server → Cliente	{ username }
user_left	Server → Cliente	{ username }
users	Server → Cliente	{ users: [...] }
error	Server → Cliente	{ message }