JavaScript Academy · leksjon

Meldingsutveksling med postMessage

Kommuniser mellom hovedtråden og workeren.

Leksjon 2 av 413 trinn

Meldingsutveksling med postMessage er en gratis leksjon i JavaScript Academy på CoddyKit. Dette er leksjon 2 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i JavaScript Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i JavaScript Academy inneholder totalt 4 leksjoner.

Kommunisere med meldinger

Siden hovedtråden og workeren har separat minne, kommuniserer de ved å sende meldinger. Metoden postMessage sender data, mens message-hendelsen mottar dem.

Sende til workeren

Fra hovedtråden kaller De worker.postMessage(data). Dataene kan være nesten hvilken som helst verdi: tall, strenger, objekter eller matriser.

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

Motta i workeren

Håndter message-hendelsen inne i workeren. Den sendte verdien kommer i event.data.

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

Sende et svar

Workeren beregner et resultat og sender det tilbake med sin egen postMessage (ved hjelp av self eller den implisitte globale variabelen).

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

Motta svaret

Tilbake i hovedtråden lytter du etter message på worker-objektet for å hente resultatet.

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

addEventListener-stil

Du kan bruke addEventListener('message', ...) i stedet for egenskapen onmessage. Dette gjør det mulig å ha flere lyttere.

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

Structured clone

Meldinger kopieres ved hjelp av structured clone-algoritmen; de deles ikke. Den håndterer objekter, arrayer, Maps, Sets, Dates og typede arrayer, men ikke funksjoner, DOM-noder eller klassemetoder.

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

En meldingsprotokoll

For flere operasjoner sender du et type-felt slik at workeren vet hva den skal gjøre. Dette gjør én worker fleksibel.

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

Knytte forespørsler sammen

Når du sender mange meldinger, legger du ved en id slik at svarene kan kobles til de riktige forespørslene. Workeren sender id-en tilbake.

// 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.

Toveiskommunikasjon

Meldingsutvekslingen er toveis og asynkron. Siden kan fortsette å sende oppgaver mens workeren sender tilbake delresultater, uten å blokkere brukergrensesnittet.

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

Rydde opp i lyttere

Når en worker ikke lenger trengs, fjerner du lytterne og avslutter den for å unngå lekkasjer, spesielt i enkeltsideapplikasjoner som oppretter workere gjentatte ganger.

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

Hurtigsjekk

Test forståelsen din av meldingsutveksling med workere.

Besvar den i den interaktive leksjonen

Oppsummering

Du har lært om meldingsutveksling med workere:

postMessage(data) sender; message-hendelsen mottar.
Data kommer i event.data.
Begge sider kan sende meldinger, slik at kommunikasjonen blir toveis.
Data kopieres via structured clone, ikke deles.
Bruk en type/id-protokoll for flere oppgaver.

Deretter ser vi på overførbare objekter for data uten kopiering.

Gratis å komme i gang

Lær deg JavaScript med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 59
Leksjoner: 200

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Meldingsutveksling med postMessage» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien JavaScript Academy, inkludert «Meldingsutveksling med postMessage», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i JavaScript Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Meldingsutveksling med postMessage»?

Kommuniser mellom hovedtråden og workeren. Du øver på JavaScript Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med JavaScript Academy?

Ingen tidligere erfaring er nødvendig. JavaScript Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 2 av 4.

Hvor lang tid tar leksjonen «Meldingsutveksling med postMessage»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne JavaScript Academy-leksjonen?

Ja. Alle JavaScript Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

← Tilbake til JavaScript Academy