MessageEvent

Baseline Widely available

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

Note: This feature is available in Web Workers.

Giao diện MessageEvent đại diện cho một thông điệp được nhận bởi một đối tượng mục tiêu.

Nó được sử dụng để đại diện cho các thông điệp trong:

Server-sent events (xem sự kiện message của EventSource).
Web sockets (xem sự kiện message của WebSocket).
Nhắn tin tài liệu chéo (xem Window.postMessage() và sự kiện message của Window).
Channel messaging (xem MessagePort.postMessage() và sự kiện message của MessagePort).
Nhắn tin worker/tài liệu chéo (xem hai mục trên, nhưng cũng xem Worker.postMessage(), sự kiện message của Worker, sự kiện message của ServiceWorkerGlobalScope, v.v.)
Broadcast channels (xem BroadcastChannel.postMessage() và sự kiện message của BroadcastChannel).
Các kênh dữ liệu WebRTC (xem sự kiện message của RTCDataChannel).

Hành động được kích hoạt bởi sự kiện này được định nghĩa trong một hàm được đặt làm trình xử lý sự kiện cho sự kiện message liên quan.

Hàm khởi tạo

MessageEvent(): Tạo một MessageEvent mới.

Thuộc tính phiên bản

Giao diện này cũng kế thừa các thuộc tính từ lớp cha của nó, Event.

MessageEvent.data Read only: Dữ liệu được gửi bởi người phát thông điệp.
MessageEvent.origin Read only: Một chuỗi đại diện cho nguồn gốc của người phát thông điệp.
MessageEvent.lastEventId Read only: Một chuỗi đại diện cho ID duy nhất cho sự kiện.
MessageEvent.source Read only: Một MessageEventSource (có thể là WindowProxy, MessagePort, hoặc đối tượng ServiceWorker) đại diện cho người phát thông điệp.
MessageEvent.ports Read only: Một mảng các đối tượng MessagePort chứa tất cả các đối tượng MessagePort được gửi kèm với thông điệp, theo thứ tự.

Phương thức phiên bản

Giao diện này cũng kế thừa các phương thức từ lớp cha của nó, Event.

initMessageEvent() Deprecated: Khởi tạo một message event. Đừng sử dụng điều này nữa — hãy sử dụng hàm khởi tạo MessageEvent() thay thế.

Trong ví dụ về shared worker cơ bản của chúng tôi (chạy shared worker), chúng tôi có hai trang HTML, mỗi trang sử dụng một số JavaScript để thực hiện tính toán. Các script khác nhau đang sử dụng cùng một file worker để thực hiện tính toán — cả hai đều có thể truy cập nó, ngay cả khi các trang của chúng đang chạy bên trong các cửa sổ khác nhau.

Đoạn mã sau cho thấy cách tạo một đối tượng SharedWorker bằng hàm khởi tạo SharedWorker(). Cả hai script đều chứa điều này:

const myWorker = new SharedWorker("worker.js");

Cả hai script sau đó truy cập worker thông qua một đối tượng MessagePort được tạo bằng thuộc tính SharedWorker.port. Nếu sự kiện onmessage được gắn bằng addEventListener, port được khởi động thủ công bằng phương thức start() của nó:

myWorker.port.start();

Khi port được khởi động, cả hai script đều đăng thông điệp lên worker và xử lý các thông điệp được gửi từ nó bằng port.postMessage() và port.onmessage, tương ứng:

[first, second].forEach((input) => {
  input.onchange = () => {
    myWorker.port.postMessage([first.value, second.value]);
    console.log("Message posted to worker");
  };
});

myWorker.port.onmessage = (e) => {
  result1.textContent = e.data;
  console.log("Message received from worker");
};

Bên trong worker, chúng ta sử dụng trình xử lý onconnect để kết nối với cùng một port được thảo luận ở trên. Các port liên kết với worker đó có thể truy cập trong thuộc tính ports của sự kiện connect — sau đó chúng ta sử dụng phương thức start() của MessagePort để khởi động port, và trình xử lý onmessage để xử lý các thông điệp được gửi từ các luồng chính.

onconnect = (e) => {
  const port = e.ports[0];

  port.addEventListener("message", (e) => {
    const workerResult = `Result: ${e.data[0] * e.data[1]}`;
    port.postMessage(workerResult);
  });

  port.start(); // Required when using addEventListener. Otherwise called implicitly by onmessage setter.
};