JavaScript Academy · Lección

Apertura de una conexión WebSocket

Conéctese a un servidor WebSocket.

Apertura de una conexión WebSocket es una lección gratuita de JavaScript Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de JavaScript Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de JavaScript Academy incluye 4 lecciones en total.

¿Qué son los WebSockets?

Los WebSockets proporcionan una conexión persistente y dúplex entre el navegador y el servidor mediante una única conexión TCP. A diferencia del modelo de solicitud y respuesta de HTTP, cualquiera de los dos extremos puede enviar mensajes en cualquier momento, lo que resulta ideal para chats, fuentes de datos en tiempo real y juegos.

Los esquemas ws y wss

Las URL de WebSocket utilizan ws:// (sin cifrado) o wss:// (cifrado mediante TLS). En producción, prefiera siempre wss://, al igual que https.

const url = "wss://example.com/socket";

Crear una conexión

Construya un socket con new WebSocket(url). El protocolo de enlace comienza de inmediato; la conexión no estará lista hasta que se abra.

const socket = new WebSocket("wss://example.com/socket");
console.log(socket.url);

El evento onopen

onopen se activa cuando finaliza el protocolo de enlace. Solo entonces es seguro enviar datos.

socket.onopen = (event) => {
  console.log("Connection established");
  socket.send("Hello server");
};

Alternativa con addEventListener

Puede utilizar addEventListener en lugar de las propiedades on* para asociar varios controladores.

socket.addEventListener("open", () => {
  console.log("open via listener");
});

El estado readyState de la conexión

readyState indica el ciclo de vida: CONNECTING (0), OPEN (1), CLOSING (2), CLOSED (3).

if (socket.readyState === WebSocket.OPEN) {
  socket.send("ready!");
}

Subprotocolos

Un segundo argumento permite negociar un subprotocolo. El servidor elige uno y usted puede leer socket.protocol después de abrir la conexión.

const s = new WebSocket("wss://example.com", ["chat", "v2.chat"]);
s.onopen = () => console.log("Using", s.protocol);

Mismo origen y contenido mixto

Una página cargada mediante https solo puede abrir conexiones wss://; abrir una conexión ws:// se bloquea por considerarse contenido mixto. Planifique las URL en consecuencia.

Tipo binario

Establezca binaryType en "blob" (valor predeterminado) o "arraybuffer" para controlar cómo se reciben las tramas binarias.

socket.binaryType = "arraybuffer";

Un cliente mínimo

Para reunirlo todo: abra la conexión, registre el estado y haga la limpieza.

const socket = new WebSocket("wss://example.com/socket");
socket.onopen = () => console.log("opened");
socket.onclose = () => console.log("closed");

Tiempos de espera de conexión

Los WebSockets no tienen un tiempo de espera de conexión integrado. Utilice un temporizador que cierre el socket si onopen no se ha activado a tiempo.

const socket = new WebSocket(url);
const timer = setTimeout(() => {
  if (socket.readyState !== WebSocket.OPEN) socket.close();
}, 5000);
socket.onopen = () => clearTimeout(timer);

Comprobación rápida

Ponga a prueba los conceptos básicos de las conexiones.

Repaso: abrir una conexión

Ha aprendido los esquemas ws/wss, ha creado un socket con new WebSocket, ha gestionado onopen, ha comprobado readyState, ha negociado subprotocolos y ha añadido un tiempo de espera de conexión. A continuación: envío y recepción de mensajes.

Preguntas frecuentes

¿La lección «Apertura de una conexión WebSocket» es gratis?

Sí — el texto completo de «Apertura de una conexión WebSocket» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de JavaScript Academy, actualiza a CoddyKit PRO. El curso de JavaScript Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Apertura de una conexión WebSocket»?

Conéctese a un servidor WebSocket. Practicas JavaScript Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar JavaScript Academy?

No se requiere experiencia previa. JavaScript Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.

¿Cuánto tiempo toma la lección «Apertura de una conexión WebSocket»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de JavaScript Academy?

Sí. Cada lección de JavaScript Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

← Volver a JavaScript Academy