RTCDataChannel: sự kiện tin nhắn

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.

Sự kiện WebRTC message được gửi đến trình xử lý sự kiện onmessage trên đối tượng RTCDataChannel khi nhận được tin nhắn từ thiết bị ngang hàng từ xa.

[!LƯU Ý] Sự kiện message sử dụng loại đối tượng sự kiện là giao diện MessageEvent được xác định bởi đặc tả HTML.

Sự kiện này không thể hủy và không bong bóng.

Cú pháp

Sử dụng tên sự kiện trong các phương thức như addEventListener() hoặc đặt thuộc tính xử lý sự kiện.

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

onmessage = (event) => { }

Thuộc tính sự kiện

Cũng kế thừa các thuộc tính từ giao diện chính của nó, Event.

MessageEvent.data Read only: Dữ liệu được gửi bởi bộ phát tin nhắn.
MessageEvent.origin Read only: Một chuỗi biểu thị nguồn gốc của bộ phát thông báo.
MessageEvent.lastEventId Read only: Một chuỗi đại diện cho một ID duy nhất cho sự kiện.
MessageEvent.source Read only: Tham chiếu đến bộ phát thông báo, một trong WindowProxy, MessagePort hoặc ServiceWorker.
MessageEvent.ports Read only: Một mảng các đối tượng MessagePort đại diện cho các cổng được liên kết với kênh mà tin nhắn đang được gửi qua (nếu thích hợp, ví dụ: trong nhắn tin kênh hoặc khi gửi tin nhắn đến nhân viên dùng chung).

Đối với RTCDataChannel, dc nhất định, được tạo cho kết nối ngang hàng bằng phương thức createDataChannel() của nó, mã này thiết lập trình xử lý cho các tin nhắn đến và xử lý chúng bằng cách thêm dữ liệu có trong tin nhắn vào tài liệu hiện tại dưới dạng phần tử <p> (đoạn) mới.

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

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

Trước tiên, chúng tôi tạo thành phần đoạn văn mới và thêm dữ liệu tin nhắn vào đó dưới dạng nút văn bản mới. Sau đó, chúng tôi nối đoạn văn mới vào cuối nội dung tài liệu.

Bạn cũng có thể sử dụng thuộc tính trình xử lý sự kiện onmessage của đối tượng RTCDataChannel để đặt trình xử lý sự kiện:

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


  document.body.appendChild(newParagraph);
};