JavaScript Academy · Oppitunti

Viestintä postMessagella

Viestikää pääsäikeen ja workerin välillä.

Oppitunti 2/413 vaihetta

Viestintä postMessagella on ilmainen JavaScript Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu JavaScript Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. JavaScript Academy-kurssilla on yhteensä 4 oppituntia.

Viestintä viestien avulla

Koska pääsäikeellä ja workerilla on erilliset muistit, ne viestivät lähettämällä viestejä. postMessage-metodi lähettää tietoja, ja message-tapahtuma vastaanottaa niitä.

Viestin lähettäminen workerille

Kutsu pääsäikeestä worker.postMessage(data). Data voi olla lähes mikä tahansa arvo: numero, merkkijono, olio tai taulukko.

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

Vastaanottaminen workerissa

Workerissa käsitellään message-tapahtuma. Lähetetty arvo saapuu kohtaan event.data.

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

Vastauksen lähettäminen

Worker laskee tuloksen ja lähettää sen takaisin omalla postMessage-metodillaan käyttäen self-viitettä tai implisiittistä globaalia.

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

Vastauksen vastaanottaminen

Pääsäikeessä kuunnellaan worker-objektin message-tapahtumaa tuloksen saamiseksi.

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

addEventListener-tyyli

onmessage-ominaisuuden sijaan voidaan käyttää addEventListener('message', ...)-kutsua. Näin voidaan käyttää useita kuuntelijoita.

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

Structured clone

Viestit kopioidaan structured clone -algoritmilla, eikä niitä jaeta. Se käsittelee objekteja, taulukoita, Mapseja, Setejä, Dateja ja tyypitettyjä taulukoita, mutta ei funktioita, DOM-solmuja eikä luokkien metodeja.

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

Viestiprotokolla

Kun operaatioita on useita, lähetetään type-kenttä, jotta worker tietää, mitä sen pitää tehdä. Näin yksi worker pysyy joustavana.

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

Pyyntöjen yhdistäminen vastauksiin

Kun viestejä lähetetään paljon, niihin liitetään id, jotta vastaukset voidaan yhdistää niitä vastaaviin pyyntöihin. Worker palauttaa saman id:n vastauksessa.

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

Kaksisuuntainen viestintä

Viestintä on kaksisuuntaista ja asynkronista. Sivu voi jatkaa tehtävien lähettämistä samalla, kun worker lähettää osittaisia tuloksia takaisin, eikä käyttöliittymää tarvitse lukita.

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

Kuuntelijoiden poistaminen

Kun workeria ei enää tarvita, kuuntelijat poistetaan ja worker lopetetaan muistivuotojen välttämiseksi. Tämä on erityisen tärkeää yksisivuisissa sovelluksissa, jotka luovat workereita toistuvasti.

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

Pikatesti

Testatkaa, kuinka hyvin ymmärrätte workerien välisen viestinnän.

Vastaa interaktiivisessa oppitunnissa

Kertaus

Opitte workerien välisen viestinnän perusteet:

postMessage(data) lähettää ja message-tapahtuma vastaanottaa.
Data saapuu kohtaan event.data.
Molemmat osapuolet voivat lähettää viestejä, joten viestintä on kaksisuuntaista.
Data kopioidaan structured clone -algoritmilla, eikä sitä jaeta.
Useita tehtäviä varten kannattaa käyttää type/id-protokollaa.

Seuraavaksi käsitellään siirrettäviä objekteja, joiden avulla dataa voidaan käsitellä ilman kopiointia.

Aloita maksutta

Opi JavaScript tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 59
Oppitunnit: 200

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Viestintä postMessagella” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa JavaScript Academy-oppimispolun 3 oppituntia, myös oppitunnin “Viestintä postMessagella”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. JavaScript Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Viestintä postMessagella”?

Viestikää pääsäikeen ja workerin välillä. Harjoittelet JavaScript Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni JavaScript Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin JavaScript Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/4.

Kuinka kauan ”Viestintä postMessagella”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä JavaScript Academy-oppitunnilla?

Kyllä. Jokainen JavaScript Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

← Takaisin: JavaScript Academy