ServiceWorkerGlobalScope: sự kiện message
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2018.
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is only available in Service Workers.
Sự kiện message của giao diện ServiceWorkerGlobalScope xảy ra khi các thông điệp đến được nhận. Các trang được điều khiển có thể sử dụng phương thức ServiceWorker.postMessage() để gửi thông điệp đến service workers.
Service worker có thể tùy chọn gửi phản hồi trở lại thông qua Client.postMessage(), tương ứng với trang được điều khiển.
Sự kiện này không thể hủy và không nổi bọt.
Cú pháp
Sử dụng tên sự kiện trong các phương thức như addEventListener(), hoặc thiết lập 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 ExtendableMessageEvent. Kế thừa từ ExtendableEvent.
Thuộc tính sự kiện
Kế thừa các thuộc tính từ giao diện cha, ExtendableEvent.
ExtendableMessageEvent.dataRead only-
Trả về dữ liệu của sự kiện. Nó có thể là bất kỳ kiểu dữ liệu nào. Nếu được gửi trong sự kiện
messageerror, thuộc tính sẽ lànull. ExtendableMessageEvent.originRead only-
Trả về nguồn gốc của
Clientđã gửi thông điệp. ExtendableMessageEvent.lastEventIdRead only-
Đại diện, trong server-sent events, cho ID sự kiện cuối cùng của nguồn sự kiện.
ExtendableMessageEvent.sourceRead only-
Trả về một tham chiếu đến đối tượng
Clientđã gửi thông điệp. ExtendableMessageEvent.portsRead only-
Trả về mảng chứa các đối tượng
MessagePortđại diện cho các cổng của kênh thông điệp được liên kết.
Ví dụ
Trong ví dụ dưới đây, một trang lấy tham chiếu đến đối tượng ServiceWorker thông qua ServiceWorkerRegistration.active, và sau đó gọi hàm postMessage() của nó.
// main.js
if (navigator.serviceWorker) {
navigator.serviceWorker.register("service-worker.js");
navigator.serviceWorker.addEventListener("message", (event) => {
// event is a MessageEvent object
console.log(`The service worker sent me a message: ${event.data}`);
});
navigator.serviceWorker.ready.then((registration) => {
registration.active.postMessage("Hi service worker");
});
}
Service worker có thể nhận thông điệp bằng cách lắng nghe sự kiện message:
// service-worker.js
addEventListener("message", (event) => {
// event is an ExtendableMessageEvent object
console.log(`The client sent me a message: ${event.data}`);
event.source.postMessage("Hi client");
});
Hoặc, tập lệnh có thể lắng nghe thông điệp bằng cách sử dụng onmessage:
// service-worker.js
self.onmessage = (event) => {
// event is an ExtendableMessageEvent object
console.log(`The client sent me a message: ${event.data}`);
event.source.postMessage("Hi client");
};
Đặc tả kỹ thuật
| Specification |
|---|
| Service Workers Nightly # eventdef-serviceworkerglobalscope-message |
| Service Workers Nightly # dom-serviceworkerglobalscope-onmessage |