JavaScript Academy · Lección

Envío y recepción de mensajes

Intercambie datos con send y onmessage.

Envío y recepción de mensajes es una lección gratuita de JavaScript Academy en CoddyKit. Esta es la lección 2 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.

Enviar texto

Una vez abierta la conexión, socket.send(string) transmite un mensaje de texto al servidor.

socket.onopen = () => {
  socket.send("ping");
};

Recibir con onmessage

onmessage se activa con cada trama entrante. Los datos están en event.data.

socket.onmessage = (event) => {
  console.log("Received:", event.data);
};

Estructuración con JSON

Los WebSockets transportan cadenas sin procesar. Para enviar datos estructurados, serialícelos con JSON.stringify y analícelos al recibirlos.

socket.send(JSON.stringify({ type: "chat", text: "hi" }));
socket.onmessage = (e) => {
  const msg = JSON.parse(e.data);
  console.log(msg.type, msg.text);
};

Enrutamiento por tipo de mensaje

Un patrón habitual consiste en incluir un campo type y distribuir el mensaje según su valor.

socket.onmessage = (e) => {
  const msg = JSON.parse(e.data);
  switch (msg.type) {
    case "chat": showChat(msg); break;
    case "presence": updatePresence(msg); break;
  }
};

Enviar datos binarios

send también acepta ArrayBuffer, arrays tipados y Blob como cargas binarias.

const bytes = new Uint8Array([1, 2, 3, 4]);
socket.send(bytes.buffer);

Recibir datos binarios

Con binaryType = "arraybuffer", event.data es un ArrayBuffer que puede envolver en un array tipado.

socket.binaryType = "arraybuffer";
socket.onmessage = (e) => {
  if (e.data instanceof ArrayBuffer) {
    const view = new Uint8Array(e.data);
    console.log(view.length);
  }
};

Control de flujo con bufferedAmount

bufferedAmount indica cuántos bytes están en cola pero aún no se han enviado. Compruébelo antes de saturar el socket para evitar un crecimiento ilimitado del uso de memoria.

if (socket.bufferedAmount < 1_000_000) {
  socket.send(payload);
}

Latidos

Envíe mensajes de ping periódicamente para que ambos extremos sepan que la conexión sigue activa y los intermediarios no cierren las conexiones inactivas.

setInterval(() => {
  if (socket.readyState === WebSocket.OPEN) {
    socket.send(JSON.stringify({ type: "ping" }));
  }
}, 30000);

Solicitud y respuesta mediante WebSocket

Asigne un id a los mensajes salientes y resuelva una promesa pendiente cuando llegue la respuesta correspondiente.

const pending = new Map();
function request(payload) {
  const id = crypto.randomUUID();
  socket.send(JSON.stringify({ id, ...payload }));
  return new Promise((res) => pending.set(id, res));
}
socket.onmessage = (e) => {
  const msg = JSON.parse(e.data);
  if (pending.has(msg.id)) { pending.get(msg.id)(msg); pending.delete(msg.id); }
};

Encolar mensajes antes de abrir la conexión

Si es posible que envíe mensajes antes de que se abra el socket, almacénelos en un búfer y envíelos todos desde onopen.

const queue = [];
function safeSend(data) {
  if (socket.readyState === WebSocket.OPEN) socket.send(data);
  else queue.push(data);
}
socket.onopen = () => { queue.forEach((d) => socket.send(d)); queue.length = 0; };

Validar los datos entrantes

No confíe nunca en los datos recibidos por la red. Incluya JSON.parse en un bloque try/catch y valide la estructura antes de utilizarla.

socket.onmessage = (e) => {
  let msg;
  try { msg = JSON.parse(e.data); }
  catch { return; }
  if (typeof msg.type !== "string") return;
  handle(msg);
};

Comprobación rápida

Ponga a prueba el envío y la recepción de mensajes.

Repaso: enviar y recibir

Ha enviado texto y datos binarios, ha gestionado onmessage, ha estructurado los datos como JSON, ha distribuido los mensajes por tipo, ha supervisado bufferedAmount para controlar el flujo, ha añadido latidos y ha puesto en cola los mensajes antes de abrir el socket. A continuación: el ciclo de vida de la conexión.

Preguntas frecuentes

¿La lección «Envío y recepción de mensajes» es gratis?

Sí — el texto completo de «Envío y recepción de mensajes» 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 «Envío y recepción de mensajes»?

Intercambie datos con send y onmessage. 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 2 de 4.

¿Cuánto tiempo toma la lección «Envío y recepción de mensajes»?

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