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 ⁨Januar 2020⁩.

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

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

Dieses Ereignis ist nicht abbruchfähig und wird nicht weitergeleitet.

Syntax

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

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

onmessage = (event) => { }

Ereigniseigenschaften

Erbt auch Eigenschaften von seinem Eltern-Interface, Event.

MessageEvent.data Schreibgeschützt: Die von der Nachrichtenquelle gesendeten Daten.
MessageEvent.origin Schreibgeschützt: Ein String, der den Ursprung der Nachrichtenquelle repräsentiert.
MessageEvent.lastEventId Schreibgeschützt: Ein String, der eine eindeutige ID für das Ereignis darstellt.
MessageEvent.source Schreibgeschützt: Ein Verweis auf die Nachrichtenquelle, einer von WindowProxy, MessagePort oder ServiceWorker.
MessageEvent.ports Schreibgeschützt: Ein Array von MessagePort-Objekten, die die mit dem Kanal, über den die Nachricht gesendet wird, assoziierten Ports darstellen (wo zutreffend, z.B. bei Kanalnachrichten oder beim Senden einer Nachricht an einen Shared Worker).

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

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

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

Wir erstellen zuerst das neue Absatz-Element und fügen die Nachrichtendaten als neuen Textknoten hinzu. Dann fügen wir den neuen Absatz am Ende des Body des Dokuments an.

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

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

  document.body.appendChild(newParagraph);
};