JavaScript Academy · Lektion

Kommunikation med postMessage

Kommunikér mellem hovedtråden og workeren.

Lektion 2 af 413 trin

Kommunikation med postMessage er en gratis JavaScript Academy-lektion på CoddyKit. Dette er lektion 2 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i JavaScript Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. JavaScript Academy-kurset indeholder 4 lektioner i alt.

Kommunikation med meddelelser

Da hovedtråden og workeren har separat hukommelse, kommunikerer de ved at sende meddelelser. Metoden postMessage sender data, og hændelsen message modtager dem.

Afsendelse til workeren

Fra hovedtråden skal du kalde worker.postMessage(data). Dataene kan være næsten enhver værdi: tal, strenge, objekter eller arrays.

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

Modtagelse i workeren

Inde i workeren skal du håndtere hændelsen message. Den sendte værdi kommer i event.data.

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

Afsendelse af et svar

Workeren beregner et resultat og sender det tilbage med sin egen postMessage (ved hjælp af self eller det implicitte globale objekt).

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

Modtagelse af svaret

Tilbage på hovedtråden skal du lytte efter message på worker-objektet for at hente resultatet.

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

Stilen med addEventListener

Du kan bruge addEventListener('message', ...) i stedet for egenskaben onmessage. Det gør det muligt at have flere lyttere.

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

Struktureret kloning

Meddelelser kopieres ved hjælp af algoritmen for struktureret kloning, de deles ikke. Den håndterer objekter, arrays, Maps, Sets, Dates og typede arrays, men ikke funktioner, 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 meddelelsesprotokol

Ved flere handlinger skal du sende et type-felt, så workeren ved, hvad den skal gøre. Det holder en enkelt 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);
  }
};

Sammenkædning af forespørgsler

Når du sender mange meddelelser, skal du vedhæfte et id, så svarene kan knyttes til deres forespørgsler. Workeren sender id'et tilbage.

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

Tovejsdialog

Kommunikation med meddelelser går begge veje og er asynkron. Siden kan blive ved med at sende opgaver, mens workeren løbende sender delvise resultater tilbage, alt sammen uden at blokere brugergrænsefladen.

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

Oprydning af lyttere

Når en worker ikke længere er nødvendig, skal du fjerne lyttere og afslutte den for at undgå lækager, især i apps med én side, der opretter workers igen og igen.

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

Hurtig test

Test din forståelse af meddelelser mellem workers.

Besvar den i den interaktive lektion

Opsummering

Du har lært om meddelelser mellem workers:

postMessage(data) sender; hændelsen message modtager.
Data ankommer i event.data.
Begge sider kan sende meddelelser, så kommunikationen går begge veje.
Data kopieres via struktureret kloning, den deles ikke.
Brug en type/id-protokol til flere opgaver.

Dernæst: overførbare objekter til data uden kopiering.

Gratis at komme i gang

Lær JavaScript med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 59
Lektioner: 200

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Kommunikation med postMessage” gratis?

Ja — alle 3 lektioner i læringssporet JavaScript Academy, inklusive “Kommunikation med postMessage”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. JavaScript Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Kommunikation med postMessage”?

Kommunikér mellem hovedtråden og workeren. Du øver dig i JavaScript Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på JavaScript Academy?

Der kræves ingen tidligere erfaring. JavaScript Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 2 af 4.

Hvor lang tid tager lektionen “Kommunikation med postMessage”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne JavaScript Academy-lektion?

Ja. Alle JavaScript Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

← Tilbage til JavaScript Academy