MessageEvent.data — Eigenschaft · JavaScript-Referenz

Signatur

MessageEvent.data

Beschreibung

MessageEvent.data ist der zentrale Wert jedes message-Ereignisses. Die Eigenschaft enthält die Daten, die der Absender verschickt hat, etwa per window.postMessage(), Worker.postMessage(), MessagePort.postMessage(), BroadcastChannel.postMessage() oder über eine WebSocket- bzw. Server-Sent-Events-Verbindung.

Welchen Typ der Wert hat, hängt von der Quelle ab:

postMessage-APIs (Fenster, Worker, MessagePort, BroadcastChannel): Hier kommt eine Kopie des Originals an, die mit dem Structured-Clone-Algorithmus erzeugt wurde. Das kann ein beliebiger klonbarer Wert sein, also primitive Werte, Objekte, Arrays, Map, Set, Date, Blob, ArrayBuffer und Ähnliches.
WebSocket: Bei Textnachrichten ein string, bei Binärnachrichten je nach binaryType ein Blob oder ein ArrayBuffer.
EventSource (Server-Sent Events): immer ein string.

Die Eigenschaft ist schreibgeschützt. Eigene MessageEvent-Objekte bekommen ihren Wert beim Erzeugen über das Optionsobjekt des Konstruktors: new MessageEvent('message', { data }). Wenn nichts angegeben ist, ist der Wert null.

Rückgabewert

Typ

any

Beschreibung

Die gesendeten Daten: bei postMessage ein strukturiert geklonter Wert beliebigen Typs, bei WebSocket ein string, Blob oder ArrayBuffer, bei EventSource ein string. Ohne Angabe ist der Wert null.

Beispiele

Daten von einem Web Worker empfangen

// main.js
const worker = new Worker('worker.js');

worker.addEventListener('message', (event) => {
  const { type, result } = event.data;
  console.log(`Typ: ${type}, Ergebnis: ${result}`);
});

worker.postMessage({ numbers: [1, 2, 3, 4] });

// worker.js
// self.onmessage = (event) => {
//   const sum = event.data.numbers.reduce((a, b) => a + b, 0);
//   self.postMessage({ type: 'sum', result: sum });
// };

Typ: sum, Ergebnis: 10

Cross-Origin-Nachricht sicher auswerten (iframe)

const TRUSTED_ORIGIN = 'https://widget.example.com';

window.onmessage = (event) => {
  // Zuerst immer den Absender prüfen
  if (event.origin !== TRUSTED_ORIGIN) return;

  const msg = event.data;
  // Aufbau der Daten prüfen, bevor man ihnen vertraut
  if (typeof msg !== 'object' || msg === null || msg.type !== 'resize') return;

  const height = Number(msg.height);
  if (Number.isFinite(height)) {
    document.querySelector('#widget').style.height = `${height}px`;
  }
};

Text- und Binärdaten bei WebSocket unterscheiden

const socket = new WebSocket('wss://echo.example.org');
socket.binaryType = 'arraybuffer';

socket.addEventListener('message', (event) => {
  if (typeof event.data === 'string') {
    console.log('Text:', event.data);
  } else if (event.data instanceof ArrayBuffer) {
    const bytes = new Uint8Array(event.data);
    console.log('Binär, Länge:', bytes.length);
  }
});

socket.addEventListener('open', () => {
  socket.send('Hallo');
  socket.send(new Uint8Array([1, 2, 3]));
});

Text: Hallo Binär, Länge: 3

Eigenes MessageEvent mit data erzeugen

const target = new EventTarget();

target.addEventListener('message', (event) => {
  console.log(event.data.user, event.data instanceof Object);
});

target.dispatchEvent(new MessageEvent('message', {
  data: { user: 'anna' }
}));

console.log(new MessageEvent('message').data);

anna true null

// Wichtig · Fallstricke

Sicherheit: Bei window.postMessage() kann jedes beliebige Fenster Nachrichten schicken. Prüfen Sie deshalb immer zuerst event.origin (und bei Bedarf event.source) und erst danach data. Behandeln Sie data grundsätzlich als nicht vertrauenswürdige Eingabe und geben Sie sie nie ungeprüft an innerHTML, eval() oder location.href weiter, sonst drohen XSS-Lücken.
Kopie statt Referenz: Bei postMessage enthält data eine strukturiert geklonte Kopie. Änderungen daran wirken sich nicht auf das Original aus. Funktionen, DOM-Knoten und Klassenprototypen werden nicht übertragen: Klassen-Instanzen kommen als einfache Objekte an, und Funktionen lösen beim Senden einen DataCloneError aus.
Übertragene Objekte: Wurde ein ArrayBuffer als Transferable mitgeschickt, ist er beim Absender danach geleert (byteLength ist 0).
Typ prüfen: Bei WebSocket hängt der Typ von binaryType ab (Standard: 'blob'). Bei EventSource ist data immer ein String, JSON muss also selbst mit JSON.parse() umgewandelt werden.
Wenn der Klon beim Empfänger nicht erzeugt werden kann, wird statt message das Ereignis messageerror ausgelöst.
Die Eigenschaft wird von allen modernen Browsern unterstützt und ist auch in Web Workers verfügbar.

Siehe auch

MessageEvent.ports MessageEvent.origin MessageEvent.source MessageEvent.lastEventId MIDIMessageEvent.data