JavaScript Academy · Lekcja

Komunikacja za pomocą postMessage

Proszę komunikować wątek główny z workerem.

Komunikacja za pomocą postMessage to bezpłatna lekcja JavaScript Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej JavaScript Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs JavaScript Academy zawiera 4 lekcji w sumie.

Komunikacja za pomocą komunikatów

Ponieważ wątek główny i worker mają oddzielną pamięć, komunikują się przez przekazywanie komunikatów. Metoda postMessage wysyła dane, a zdarzenie message je odbiera.

Wysyłanie do workera

Z głównego wątku należy wywołać worker.postMessage(data). Dane mogą mieć niemal dowolną postać: liczb, ciągów znaków, obiektów lub tablic.

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

Odbieranie w workerze

W workerze należy obsłużyć zdarzenie message. Wysłana wartość dociera w event.data.

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

Wysyłanie odpowiedzi

Worker oblicza wynik i odsyła go za pomocą własnego postMessage (z użyciem self lub niejawnego obiektu globalnego).

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

Odbieranie odpowiedzi

Z powrotem w głównym wątku należy nasłuchiwać zdarzenia message na obiekcie workera, aby odebrać wynik.

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

Styl addEventListener

Można użyć addEventListener('message', ...) zamiast właściwości onmessage. Umożliwia to dodanie wielu listenerów.

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

Klonowanie strukturalne

Komunikaty są kopiowane za pomocą algorytmu klonowania strukturalnego, a nie współdzielone. Obsługuje on obiekty, tablice, mapy, zbiory, obiekty Date i tablice typowane, ale nie obsługuje funkcji, węzłów DOM ani metod klas.

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

Protokół komunikatów

W przypadku wielu operacji należy wysyłać pole type, aby worker wiedział, co ma zrobić. Dzięki temu jeden worker pozostaje elastyczny.

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

Powiązywanie żądań

Przy wysyłaniu wielu komunikatów należy dołączyć id, aby można było dopasować odpowiedzi do żądań. Worker odsyła ten identyfikator.

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

Komunikacja dwukierunkowa

Komunikacja jest dwukierunkowa i asynchroniczna. Strona może nadal wysyłać zadania, podczas gdy worker odsyła strumieniowo częściowe wyniki, a wszystko to bez blokowania interfejsu użytkownika.

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

Usuwanie listenerów

Gdy worker nie jest już potrzebny, należy usunąć listenery i zakończyć jego działanie, aby uniknąć wycieków, szczególnie w aplikacjach jednostronicowych, które wielokrotnie tworzą workery.

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

Szybki test

Proszę sprawdzić, czy rozumieją Państwo komunikację workerów.

Podsumowanie

Poznali Państwo komunikację workerów:

Metoda postMessage(data) wysyła dane, a zdarzenie message służy do ich odbierania.
Dane docierają w event.data.
Obie strony mogą wywoływać metodę postMessage, dzięki czemu komunikacja jest dwukierunkowa.
Dane są kopiowane za pomocą klonowania strukturalnego, a nie współdzielone.
W przypadku wielu zadań należy używać protokołu z polami type/id.

Następnie omówimy obiekty transferowalne umożliwiające przesyłanie danych bez kopiowania.

Często zadawane pytania

Czy lekcja „Komunikacja za pomocą postMessage” jest bezpłatna?

Tak — pełny tekst „Komunikacja za pomocą postMessage” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu JavaScript Academy, przejdź na CoddyKit PRO. Kurs JavaScript Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Komunikacja za pomocą postMessage”?

Proszę komunikować wątek główny z workerem. Ćwiczysz JavaScript Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć JavaScript Academy?

Nie wymagamy żadnego doświadczenia. JavaScript Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.

Ile czasu zajmuje lekcja „Komunikacja za pomocą postMessage”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji JavaScript Academy?

Tak. Każda lekcja JavaScript Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do JavaScript Academy