JavaScript Academy · Aula

Trocando mensagens com postMessage

Comunique-se entre a thread principal e o worker.

Trocando mensagens com postMessage é uma aula grátis de JavaScript Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de JavaScript Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de JavaScript Academy inclui 4 aulas no total.

Comunicando-se por mensagens

Como a linha de execução principal e o worker têm memórias separadas, eles se comunicam trocando mensagens. O método postMessage envia dados; o evento message os recebe.

Enviando dados ao worker

Na linha de execução principal, chame worker.postMessage(data). Os dados podem ser praticamente qualquer valor: números, textos, objetos ou matrizes.

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

Recebendo no worker

Dentro do worker, trate o evento message. O valor enviado chega em event.data.

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

Enviando uma resposta

O worker calcula um resultado e o envia de volta com seu próprio postMessage (usando self ou o 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
};

Recebendo a resposta

De volta à linha de execução principal, escute message no objeto worker para obter o resultado.

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

Estilo addEventListener

Você pode usar addEventListener('message', ...) em vez da propriedade onmessage. Isso permite vários ouvintes.

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

Clonagem estruturada

As mensagens são copiadas usando o algoritmo de clonagem estruturada, não compartilhadas. Ele lida com objetos, matrizes, Maps, Sets, Dates e matrizes tipadas, mas não com funções, nós do DOM ou métodos de classes.

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

Um protocolo de mensagens

Para várias operações, envie um campo type para que o worker saiba o que fazer. Isso mantém um único worker flexível.

// 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);
  }
};

Correlacionando solicitações

Ao enviar muitas mensagens, inclua um id para que as respostas possam ser associadas às solicitações correspondentes. O worker devolve o mesmo 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.

Conversa em duas vias

A troca de mensagens é bidirecional e assíncrona. A página pode continuar enviando tarefas enquanto o worker transmite resultados parciais, tudo sem bloquear a interface.

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

Limpando ouvintes

Quando um worker não for mais necessário, remova os ouvintes e encerre-o para evitar vazamentos, especialmente em aplicativos de página única que criam workers repetidamente.

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

Verificação rápida

Teste sua compreensão sobre a troca de mensagens com workers.

Recapitulação

Você aprendeu sobre a troca de mensagens com workers:

postMessage(data) envia; o evento message recebe.
Os dados chegam em event.data.
Ambos os lados podem publicar mensagens, tornando a comunicação bidirecional.
Os dados são copiados por clonagem estruturada, não compartilhados.
Use um protocolo com type/id para várias tarefas.

A seguir, objetos transferíveis para dados sem cópia.

Perguntas Frequentes

A aula “Trocando mensagens com postMessage” é grátis?

Sim — o texto completo de “Trocando mensagens com postMessage” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de JavaScript Academy, atualize para CoddyKit PRO. O curso de JavaScript Academy inclui 4 aulas no total.

O que vou aprender em “Trocando mensagens com postMessage”?

Comunique-se entre a thread principal e o worker. Você pratica JavaScript Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar JavaScript Academy?

Nenhuma experiência prévia é necessária. JavaScript Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.

Quanto tempo leva a aula “Trocando mensagens com postMessage”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de JavaScript Academy?

Sim. Cada aula de JavaScript Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

← Voltar para JavaScript Academy