JavaScript Academy · Lektion

Mit postMessage Nachrichten senden

Kommunizieren Sie zwischen Haupt-Thread und Worker.

Mit postMessage Nachrichten senden ist eine kostenlose JavaScript Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des JavaScript Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Über Nachrichten kommunizieren

Da Hauptthread und Worker über getrennten Speicher verfügen, kommunizieren sie durch das Senden von Nachrichten. Die Methode postMessage sendet Daten; das message-Ereignis empfängt sie.

An den Worker senden

Rufen Sie im Hauptthread worker.postMessage(data) auf. Die Daten können nahezu jeden Wert enthalten: Zahlen, Zeichenketten, Objekte oder Arrays.

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

Empfangen im Worker

Behandeln Sie im Worker das message-Ereignis. Der gesendete Wert ist über event.data verfügbar.

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

Eine Antwort senden

Der Worker berechnet ein Ergebnis und sendet es mit seinem eigenen postMessage zurück (über self oder das implizite 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
};

Die Antwort empfangen

Hören Sie im Hauptthread am Worker-Objekt auf message, um das Ergebnis zu erhalten.

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

addEventListener-Stil

Sie können anstelle der Eigenschaft onmessage auch addEventListener('message', ...) verwenden. Dadurch sind mehrere Listener möglich.

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

Structured Clone

Nachrichten werden mithilfe des Structured-Clone-Algorithmus kopiert und nicht gemeinsam genutzt. Er verarbeitet Objekte, Arrays, Maps, Sets, Dates und typisierte Arrays, jedoch keine Funktionen, DOM-Knoten oder Klassenmethoden.

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

Ein Nachrichtenprotokoll

Für mehrere Vorgänge senden Sie ein Feld type, damit der Worker weiß, was zu tun ist. So bleibt ein einzelner Worker flexibel.

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

Anfragen zuordnen

Wenn Sie viele Nachrichten senden, fügen Sie eine id hinzu, damit Antworten ihren Anfragen zugeordnet werden können. Der Worker sendet die ID unverändert zurück.

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

Zwei-Wege-Kommunikation

Die Kommunikation ist bidirektional und asynchron. Die Seite kann weiterhin Aufgaben senden, während der Worker schrittweise Teilergebnisse zurücksendet – und das alles, ohne die Benutzeroberfläche zu blockieren.

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

Listener aufräumen

Wenn ein Worker nicht mehr benötigt wird, entfernen Sie die Listener und beenden Sie ihn, um Speicherlecks zu vermeiden – besonders in Single-Page-Apps, die wiederholt Worker erstellen.

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

Kurzer Test

Testen Sie Ihr Verständnis der Kommunikation mit Workern.

Zusammenfassung

Sie haben die Kommunikation mit Workern gelernt:

postMessage(data) sendet; das message-Ereignis empfängt.
Die Daten sind über event.data verfügbar.
Beide Seiten können Nachrichten senden, die Kommunikation ist also bidirektional.
Daten werden per Structured Clone kopiert und nicht gemeinsam genutzt.
Verwenden Sie für mehrere Aufgaben ein Protokoll mit type und id.

Als Nächstes geht es um transferierbare Objekte für Datenübertragungen ohne Kopieren.

Häufig gestellte Fragen

Ist die Lektion „Mit postMessage Nachrichten senden“ kostenlos?

Ja — der vollständige Text von „Mit postMessage Nachrichten senden“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des JavaScript Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Mit postMessage Nachrichten senden“?

Kommunizieren Sie zwischen Haupt-Thread und Worker. Du übst JavaScript Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um JavaScript Academy zu starten?

Keine Vorkenntnisse erforderlich. JavaScript Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.

Wie lange dauert die Lektion „Mit postMessage Nachrichten senden“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser JavaScript Academy-Lektion Code schreiben und ausführen?

Ja. Jede JavaScript Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu JavaScript Academy