JavaScript Academy · Lección

Comunicación con postMessage

Comunique el hilo principal con el worker.

Comunicación con postMessage 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.

Comunicarse mediante mensajes

Como el hilo principal y el worker tienen memoria independiente, se comunican mediante mensajes. El método postMessage envía datos; el evento message los recibe.

Enviar al worker

Desde el hilo principal, llame a worker.postMessage(data). Los datos pueden ser casi cualquier valor: números, cadenas, objetos o arrays.

const worker = new Worker('worker.js');
worker.postMessage({ task: 'sum', numbers: [1, 2, 3, 4] });

Recepción en el worker

Dentro del worker, gestione el evento message. El valor enviado llega en event.data.

// worker.js
self.onmessage = (event) => {
  const { task, numbers } = event.data;
  console.log('worker received task:', task);
};

Envío de una respuesta

El worker calcula un resultado y lo envía de vuelta con su propio postMessage (usando self o el global implícito).

// worker.js
self.onmessage = (event) => {
  const { numbers } = event.data;
  const total = numbers.reduce((a, b) => a + b, 0);
  self.postMessage(total); // send result back
};

Recepción de la respuesta

De vuelta en el hilo principal, escuche message en el objeto worker para obtener el resultado.

worker.onmessage = (event) => {
  console.log('result from worker:', event.data);
};

Estilo addEventListener

Puede usar addEventListener('message', ...) en lugar de la propiedad onmessage. Esto permite varios listeners.

worker.addEventListener('message', (event) => {
  console.log('got:', event.data);
});

Clonación estructurada

Los mensajes se copian mediante el algoritmo de clonación estructurada, no se comparten. Este admite objetos, arrays, Maps, Sets, Dates y arrays tipados, pero no funciones, nodos DOM ni métodos de clase.

// OK to send: numbers, strings, plain objects, arrays,
// Map, Set, Date, ArrayBuffer, typed arrays.
// NOT cloneable: functions, DOM nodes, Error stacks lost.

Un protocolo de mensajes

Para varias operaciones, envíe un campo type para que el worker sepa qué debe hacer. Así, un solo worker puede seguir siendo flexible.

// main:
worker.postMessage({ type: 'multiply', a: 6, b: 7 });

// worker.js:
self.onmessage = (e) => {
  if (e.data.type === 'multiply') {
    self.postMessage(e.data.a * e.data.b);
  }
};

Correlación de solicitudes

Al enviar muchos mensajes, añada un id para poder asociar las respuestas con sus solicitudes. El worker devuelve el mismo id.

// main: worker.postMessage({ id: 42, value: 'x' });
// worker: self.postMessage({ id: e.data.id, done: true });
// main can now match reply id 42 to its request.

Comunicación bidireccional

La comunicación mediante mensajes es bidireccional y asíncrona. La página puede seguir enviando tareas mientras el worker devuelve resultados parciales progresivamente, todo ello sin bloquear la interfaz.

// Worker can report progress repeatedly:
// self.postMessage({ type: 'progress', percent: 50 });
// self.postMessage({ type: 'done', result: data });

Limpieza de listeners

Cuando ya no necesite un worker, elimine los listeners y termínelo para evitar fugas de memoria, especialmente en aplicaciones de una sola página que crean workers repetidamente.

worker.onmessage = null;
worker.terminate();

Comprobación rápida

Compruebe cuánto ha entendido sobre la comunicación mediante workers.

Repaso

Ha aprendido sobre la comunicación mediante workers:

postMessage(data) envía; el evento message recibe.
Los datos llegan en event.data.
Ambos lados pueden publicar mensajes, por lo que la comunicación es bidireccional.
Los datos se copian mediante clonación estructurada, no se comparten.
Use un protocolo con type/id para varias tareas.

A continuación, objetos transferibles para trabajar con datos sin copias.

Preguntas frecuentes

¿La lección «Comunicación con postMessage» es gratis?

Sí — el texto completo de «Comunicación con postMessage» 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 «Comunicación con postMessage»?

Comunique el hilo principal con el worker. 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 «Comunicación con postMessage»?

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