ServiceWorkerContainer: sự kiện message

Cú pháp

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

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

onmessage = (event) => { }

Loại sự kiện

Một MessageEvent. Kế thừa từ Event.

Thuộc tính sự kiện

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

MessageEvent.data Read only

Dữ liệu được gửi bởi trình phát tin nhắn.

MessageEvent.origin Read only

Một chuỗi đại diện cho origin của trình phát tin nhắn.

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à một đối tượng WindowProxy, MessagePort, hoặc ServiceWorker) đại diện cho trình phát tin nhắn.

MessageEvent.ports Read only

Một mảng các đối tượng MessagePort đại diện cho các port liên kết với kênh mà tin nhắn đang được gửi qua (nếu phù hợp, ví dụ: trong channel messaging hoặc khi gửi tin nhắn đến shared worker).

Ví dụ

Trong ví dụ này, service worker lấy ID của client từ sự kiện fetch và sau đó gửi tin nhắn cho nó bằng Client.postMessage:

// service-worker.js
async function messageClient(clientId) {
  const client = await clients.get(clientId);
  client.postMessage("Hi client!");
}

addEventListener("fetch", (event) => {
  messageClient(event.clientId);
  event.respondWith(() => {
    // …
  });
});

Client có thể nhận tin nhắn bằng cách lắng nghe sự kiện message:

// main.js
navigator.serviceWorker.addEventListener("message", (message) => {
  console.log(message);
});

Ngoài ra, client có thể nhận tin nhắn với trình xử lý sự kiện onmessage:

// main.js
navigator.serviceWorker.onmessage = (message) => {
  console.log(message);
};

Đặc tả kỹ thuật

Tương thích trình duyệt

Xem thêm

• Sử dụng Service Workers
• Ví dụ mã cơ bản về service workers
• Sử dụng web workers