Comunicação entre Web Workers e o Thread Principal - JavaScript

O thread principal de uma aplicação JavaScript e os Web Workers podem interagir trocando mensagens. Essa comunicação é realizada por meio do método postMessage() no objeto Worker.

Enviando mensagens para o Web Worker

O método postMessage() é usado para enviar dados do thread principal ao Web Worker. Sua assinatura é a seguinte:

postMessage(message);
postMessage(message, options);
postMessage(message, transfer);

Parâmetro obrigatório message: Representa os dados a serem enviados ao Web Worker. Ele pode ser qualquer valor serializável, como strings, números ou objetos. Ao ser enviado, o Worker recebe uma cópia dos dados, e não o objeto original.
Parâmetro opcional options: Um objeto de configuração que pode incluir a propriedade transfer. Essa propriedade permite a transferência de objetos, como buffers ou canais de comunicação, do thread principal para o Web Worker. Essa transferência ocorre também no terceiro parâmetro transfer, quando usado diretamente.
Observação importante: Quando um objeto é transferido, o thread principal perde o controle sobre ele, e somente o Worker pode acessá-lo.

Recebendo mensagens no Web Worker

No Web Worker, é necessário configurar um handler para processar as mensagens recebidas. Isso pode ser feito de duas formas: usando o método addEventListener ou atribuindo uma função diretamente à propriedade onmessage.

// Usando addEventListener
worker.addEventListener("message", (event) => {
    console.log(event.data);
});

// Usando a propriedade onmessage
worker.onmessage = (event) => {
    console.log(event.data);
};

No handler, o objeto de evento (event) contém a propriedade data, que armazena os dados enviados pelo thread principal.

Enviando mensagens do Web Worker para o Thread Principal

Os detalhes necessários para configurar o servidor local e preparar o ambiente para executar os exemplos deste artigo foram abordados no tema anterior.

Da mesma forma, o Web Worker pode enviar mensagens de volta ao thread principal usando o método postMessage(). O thread principal, então, configura um handler para o evento message e processa as mensagens recebidas.

Para exemplificar, definimos o seguinte código no arquivo worker.js:

No Web Worker, o seguinte código define como mensagens recebidas são processadas e como respostas são enviadas ao thread principal:

// Ouvindo o evento "message"
self.addEventListener("message", (event) => {
    // Exibindo a mensagem recebida no console
    console.log(`[Worker] Mensagem recebida: ${event.data}`);
    
    // Enviando uma resposta ao thread principal
    self.postMessage("Olá, thread principal");
});

Aqui, o objeto global self é usado para configurar o handler do evento message e acessar o método postMessage. Quando uma mensagem é recebida, ela é registrada no console. Em seguida, o Worker envia uma resposta ao thread principal.

Durante a execução do Web Worker, podem ocorrer erros. No thread principal, esses erros disparam o evento error no objeto Worker, que pode ser tratado para capturar informações detalhadas e reagir adequadamente.

Abaixo, temos um exemplo completo que ilustra a interação entre o thread principal e um Web Worker:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Exemplo de Web Worker</title>
</head>
<body>
    <script>
        // Inicializando o Web Worker
        const worker = new Worker("worker.js");

        // Mensagem para o Web Worker
        const message = "Olá, Web Worker";
        console.log(`[Main thread] Enviando mensagem: ${message}`);

        // Enviando mensagem ao Web Worker
        worker.postMessage(message);

        // Recebendo respostas do Web Worker
        worker.addEventListener("message", (event) => {
            console.log(`[Main thread] Resposta do Worker: ${event.data}`);
        });

        // Tratando erros no Web Worker
        worker.addEventListener("error", (event) => {
            console.error("Erro no Worker:", event.message);
        });
    </script>
</body>
</html>

O resultado da execução do código acima é será exibido no console do navegador:

Comunicação entre Web Workers e o Thread Principal em JavaScript