JavaScript Academy · Lezione

Comunicare con postMessage

Comunichi tra il thread principale e il worker.

Comunicare con postMessage è una lezione JavaScript Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento JavaScript Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso JavaScript Academy include 4 lezioni in totale.

Comunicare tramite messaggi

Poiché il thread principale e il worker hanno memorie separate, comunicano scambiandosi messaggi. Il metodo postMessage invia i dati; l'evento message li riceve.

Inviare messaggi al worker

Dal thread principale, chiami worker.postMessage(data). I dati possono essere quasi qualsiasi valore: numeri, stringhe, oggetti o array.

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

Ricezione nel worker

All'interno del worker, gestisca l'evento message. Il valore inviato arriva in event.data.

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

Invio di una risposta

Il worker calcola un risultato e lo invia indietro con il proprio postMessage (usando self o il globale implicito).

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

Ricezione della risposta

Nel thread principale, ascolti l'evento message sull'oggetto worker per ottenere il risultato.

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

Stile addEventListener

È possibile usare addEventListener('message', ...) invece della proprietà onmessage. Questo consente di usare più listener.

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

Structured clone

I messaggi vengono copiati usando l'algoritmo di structured clone, non condivisi. Sono supportati oggetti, array, Maps, Sets, Dates e array tipizzati, ma non funzioni, nodi DOM o metodi di classe.

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

Un protocollo per i messaggi

Per gestire più operazioni, invii un campo type affinché il worker sappia cosa fare. In questo modo un singolo worker rimane flessibile.

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

Associare le richieste

Quando invia molti messaggi, alleghi un id per poter associare le risposte alle richieste. Il worker restituisce lo stesso 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.

Comunicazione bidirezionale

La messaggistica è bidirezionale e asincrona. La pagina può continuare a inviare attività mentre il worker restituisce risultati parziali, il tutto senza bloccare l'interfaccia.

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

Rimozione dei listener

Quando un worker non è più necessario, rimuova i listener e lo termini per evitare perdite di memoria, soprattutto nelle app a pagina singola che creano ripetutamente dei worker.

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

Verifica rapida

Verifichi la Sua comprensione della messaggistica dei worker.

Riepilogo

Ha imparato a usare la messaggistica dei worker:

postMessage(data) invia; l'evento message riceve.
I dati arrivano in event.data.
Entrambi i lati possono usare post, rendendo la comunicazione bidirezionale.
I dati vengono copiati tramite structured clone, non condivisi.
Utilizzi un protocollo type/id per più attività.

Prossimo argomento: gli oggetti trasferibili per trasferire dati senza copiarli.

Domande Frequenti

La lezione «Comunicare con postMessage» è gratuita?

Sì — il testo completo di «Comunicare con postMessage» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso JavaScript Academy, passa a CoddyKit PRO. Il corso JavaScript Academy include 4 lezioni in totale.

Cosa imparerò in «Comunicare con postMessage»?

Comunichi tra il thread principale e il worker. Eserciti JavaScript Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare JavaScript Academy?

Non è richiesta alcuna esperienza precedente. JavaScript Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.

Quanto tempo richiede la lezione «Comunicare con postMessage»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione JavaScript Academy?

Sì. Ogni lezione JavaScript Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a JavaScript Academy