RTCDataChannel: message-Ereignis

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Das WebRTC message-Ereignis wird an den onmessage Ereignis-Handler eines RTCDataChannel-Objekts gesendet, wenn eine Nachricht vom entfernten Peer empfangen wurde.

Hinweis: Das message-Ereignis verwendet als Ereignisobjekttyp die MessageEvent-Schnittstelle, die durch die HTML-Spezifikation definiert ist.

Dieses Ereignis kann nicht abgebrochen werden und löst keine Blasenbildung aus.

Syntax

Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignis-Handler-Eigenschaft.

js
addEventListener("message", (event) => { })

onmessage = (event) => { }

Ereignistyp

Ein MessageEvent. Erbt von Event.

Event MessageEvent

Ereigniseigenschaften

Erbt auch Eigenschaften von seiner Elternschnittstelle, Event.

MessageEvent.data Schreibgeschützt

Die Daten, die vom Ereignisauslöser gesendet wurden.

MessageEvent.origin Schreibgeschützt

Ein String, der den Ursprung des Ereignisauslösers darstellt.

MessageEvent.lastEventId Schreibgeschützt

Ein String, der eine eindeutige ID für das Ereignis darstellt.

MessageEvent.source Schreibgeschützt

Ein Verweis auf den Ereignisauslöser, eines von WindowProxy, MessagePort oder ServiceWorker.

MessageEvent.ports Schreibgeschützt

Ein Array von MessagePort-Objekten, die die mit dem Kanal verbundenen Ports darstellen, durch den die Nachricht gesendet wird (wo zutreffend, z.B. bei Kanal-Messaging oder beim Senden einer Nachricht an einen Shared Worker).

Beispiele

Für ein gegebenes RTCDataChannel, dc, das für eine Peer-Verbindung mit seiner Methode createDataChannel() erstellt wurde, richtet dieser Code einen Handler für eingehende Nachrichten ein und reagiert auf diese, indem er die im Nachrichtentext enthaltenen Daten dem aktuellen Dokument als neues <p> (Paragraph) Element hinzufügt.

js
dc.addEventListener(
  "message",
  (event) => {
    let newParagraph = document.createElement("p");
    let textNode = document.createTextNode(event.data);
    newParagraph.appendChild(textNode);

    document.body.appendChild(newParagraph);
  },
  false,
);

Zuerst erstellen wir das neue Paragraph-Element und fügen die Nachrichtendaten als neuen Textknoten hinzu. Anschließend fügen wir das neue Paragraph am Ende des Dokumentenbodies hinzu.

Sie können auch die onmessage-Ereignis-Handler-Eigenschaft eines RTCDataChannel-Objekts verwenden, um den Ereignis-Handler festzulegen:

js
dc.onmessage = (event) => {
  let newParagraph = document.createElement("p");
  let textNode = document.createTextNode(event.data);
  newParagraph.appendChild(textNode);

  document.body.appendChild(newParagraph);
};

Spezifikationen

Specification
WebRTC: Real-Time Communication in Browsers
# event-datachannel-message
WebRTC: Real-Time Communication in Browsers
# dom-rtcdatachannel-onmessage

Browser-Kompatibilität

Siehe auch