new MessageEvent() — Methode · JavaScript-Referenz

Signatur

new MessageEvent(type, options)

Beschreibung

Mit new MessageEvent() erstellst du ein Ereignisobjekt, wie es der Browser bei postMessage(), WebSockets, BroadcastChannel, MessagePort, Web Workern oder Server-Sent Events (EventSource) liefert. Die übertragenen Nutzdaten stehen in der Eigenschaft data, dazu kommen Metadaten wie origin, lastEventId, source und ports.

Gebraucht wird der Konstruktor vor allem in Tests (z. B. eine WebSocket- oder Worker-Nachricht simulieren, ohne dass ein Server läuft), in Polyfills und Mocks sowie in eigenen Klassen auf Basis von EventTarget, die sich wie ein Nachrichtenkanal verhalten sollen.

Das erzeugte Ereignis wird nicht automatisch ausgelöst. Du musst es selbst mit dispatchEvent() an ein Ziel schicken. Solche von Skripten erzeugten Ereignisse haben isTrusted === false.

Parameter

Name	Typ	Default	Beschreibung
$type Pflicht	string		Name des Ereignisses, meist `"message"`. Groß- und Kleinschreibung wird unterschieden. Auch eigene Namen wie `"chat"` sind möglich.
$options	object	{}	Optionales Wörterbuch (`MessageEventInit`). Enthält zusätzlich die `EventInit`-Felder `bubbles`, `cancelable` und `composed` (alle standardmäßig `false`).
$options.data	any	null	Die Nutzdaten der Nachricht. Später über `event.data` lesbar.
$options.origin	string	""	Herkunft (Origin) des Absenders, z. B. `"https://example.com"`.
$options.lastEventId	string	""	Eindeutige ID des Ereignisses; wird vor allem bei Server-Sent Events genutzt.
$options.source	Window \| MessagePort \| ServiceWorker \| null	null	Absender der Nachricht (Fenster, Port oder Service Worker).
$options.ports	MessagePort[]	[]	Array von `MessagePort`-Objekten, die mit der Nachricht übergeben werden.

Rückgabewert

Typ

MessageEvent

Beschreibung

Ein neues MessageEvent-Objekt mit den angegebenen Eigenschaften. Es ist noch nicht ausgelöst.

Beispiele

MessageEvent erzeugen und auslesen

const event = new MessageEvent('message', {
  data: { user: 'anna', text: 'Hallo!' },
  origin: 'https://chat.example.com',
  lastEventId: '42'
});

console.log(event.type);        // Ereignisname
console.log(event.data.text);   // Nutzdaten
console.log(event.origin);
console.log(event.isTrusted);   // von einem Skript erzeugt

message Hallo! https://chat.example.com false

Eingehende postMessage im Test simulieren

// Produktivcode: Handler mit Prüfung der Herkunft
const ERLAUBT = 'https://partner.example.com';

window.addEventListener('message', (e) => {
  if (e.origin !== ERLAUBT) return; // Fremde Herkunft ignorieren
  console.log('Befehl erhalten:', e.data.cmd);
});

// Test: Nachricht einer vertrauenswürdigen und einer fremden Quelle simulieren
window.dispatchEvent(new MessageEvent('message', {
  data: { cmd: 'refresh' },
  origin: ERLAUBT
}));

window.dispatchEvent(new MessageEvent('message', {
  data: { cmd: 'deleteAll' },
  origin: 'https://evil.example'
}));

Befehl erhalten: refresh

WebSocket-Mock auf Basis von EventTarget

class FakeSocket extends EventTarget {
  onmessage = null;

  // Serverantwort simulieren
  receive(payload) {
    const event = new MessageEvent('message', {
      data: JSON.stringify(payload),
      origin: 'wss://api.example.com'
    });
    this.onmessage?.(event);
    this.dispatchEvent(event);
  }
}

const socket = new FakeSocket();
socket.addEventListener('message', (e) => {
  const msg = JSON.parse(e.data);
  console.log(`Kurs ${msg.symbol}: ${msg.price}`);
});

socket.receive({ symbol: 'ACME', price: 123.45 });

Kurs ACME: 123.45

// Wichtig · Fallstricke

Nicht automatisch ausgelöst: Der Konstruktor erzeugt nur das Objekt. Erst target.dispatchEvent(event) ruft die Listener auf. Ein Ereignisobjekt, das gerade ausgelöst wird, kann nicht gleichzeitig ein zweites Mal ausgelöst werden.
Sicherheit: Weil jedes Skript beliebige MessageEvent-Objekte mit frei gewähltem origin erzeugen kann, ist origin nur bei echten Browser-Ereignissen (isTrusted === true) aussagekräftig. Prüfe in message-Handlern trotzdem immer event.origin gegen eine Positivliste und behandle event.data als nicht vertrauenswürdige Eingabe. Gib sie also niemals ungeprüft an innerHTML oder eval weiter (XSS-Gefahr).
Keine Kopie der Daten: Anders als bei postMessage() wird data hier nicht per Structured Clone kopiert. Der Listener erhält dieselbe Objektreferenz.
ports muss ein Array (bzw. iterierbar) aus echten MessagePort-Objekten sein, sonst wird ein TypeError geworfen. Für source sind nur Window, MessagePort, ServiceWorker oder null erlaubt.
Die veraltete Methode initMessageEvent() solltest du nicht mehr verwenden. Nimm stattdessen den Konstruktor.
Kompatibilität: Der Konstruktor wird von allen aktuellen Browsern unterstützt, auch in Workern. In Node.js ist MessageEvent ab Version 15 global verfügbar. Der Internet Explorer unterstützt den Konstruktor nicht.

Siehe auch

new MIDIMessageEvent() new MouseEvent() new StorageEvent() new CloseEvent() new DragEvent()