El WebSocket nativo del navegador

El navegador trae una API de WebSocket incorporada, sin librerías: new WebSocket(url). Con ella abres la conexión, escuchas mensajes con onmessage, envías con send, y cierras con close. Entender esta API cruda es clave —Socket.io (próxima lección) la envuelve, pero por dentro es esto—. Hoy ves el mecanismo real: los cuatro eventos de una conexión y cómo se envían datos en ambos sentidos.

Los cuatro momentos de una conexión

La API nativa

Abres la conexión con new WebSocket(url) (nota el esquema ws:// o wss:// seguro) y registras los cuatro manejadores:

// abrir la conexión (wss:// = WebSocket seguro, como https)
const socket = new WebSocket("wss://servidor.com/chat");

// 1. se abrió la conexión
socket.onopen = () => {
console.log("Conectado");
socket.send(JSON.stringify({ tipo: "hola", usuario: "Sara" })); // ENVIAR
};

// 2. llegó un mensaje del servidor (push)
socket.onmessage = (evento) => {
const datos = JSON.parse(evento.data); // los datos vienen como string
console.log("Recibido:", datos);
};

// 3. hubo un error
socket.onerror = (evento) => {
console.error("Error de conexión", evento);
};

// 4. se cerró la conexión
socket.onclose = () => {
console.log("Desconectado");
};

// más tarde, para cerrar:
// socket.close();

new WebSocket(url) abre la conexión. onopen avisa cuando está lista (y recién ahí puedes enviar). send manda datos —siempre como STRING, por eso el JSON.stringify (y JSON.parse al recibir)—. onmessage recibe lo que el servidor empuja. onerror y onclose manejan los problemas y el cierre. Cuatro eventos, un modelo idéntico al de los eventos del DOM: registras reacciones, no sondeas.

Enviar y recibir: siempre strings

Por qué no basta el nativo

Mini-reto

Diseña (en papel) el protocolo de mensajes de un chat sobre WebSocket nativo: 1) define los tipos de mensaje con un campo tipo discriminante ("mensaje", "entra", "sale", "escribiendo") y qué datos lleva cada uno; 2) escribe cómo el onmessage haría JSON.parse y un switch sobre tipo para tratar cada caso (¡las discriminated unions del SC-03!); 3) lista qué le agregarías para producción (reconexión, salas) —y nota que eso es justo lo que trae Socket.io—.

Qué sigue

Ya conoces el WebSocket crudo. La próxima lección trae Socket.io: la librería que lo envuelve y le suma reconexión automática, eventos con nombre, salas y fallback —el estándar para tiempo real en el mundo Node/React, y lo que usarás en el proyecto final—.