ServiceWorkerContainer: message Event
Sicherer Kontext: Diese Funktion ist nur in sicheren Kontexten (HTTPS) in einigen oder allen unterstützenden Browsern verfügbar.
Hinweis: Dieses Feature ist verfügbar in Web Workers.
Das message
-Ereignis wird auf einer Seite verwendet, die von einem Service Worker gesteuert wird, um Nachrichten vom Service Worker zu empfangen.
Dieses Ereignis ist nicht abbrechbar und wird nicht propagiert.
Syntax
Verwenden Sie den Ereignisnamen in Methoden wie addEventListener()
oder setzen Sie eine Ereignishandlereigenschaft.
addEventListener("message", (event) => {});
onmessage = (event) => {};
Ereignistyp
Ein MessageEvent
. Erbt von Event
.
Ereigniseigenschaften
Diese Schnittstelle erbt auch Eigenschaften von ihrem Elternteil, Event
.
MessageEvent.data
Nur lesbar-
Die vom Nachrichtensender gesendeten Daten.
MessageEvent.origin
Nur lesbar-
Ein String, der den Ursprung des Nachrichtensenders darstellt.
MessageEvent.lastEventId
Nur lesbar-
Ein String, der eine eindeutige ID für das Ereignis darstellt.
MessageEvent.source
Nur lesbar-
Eine
MessageEventSource
(die ein WindowProxy,MessagePort
oderServiceWorker
-Objekt sein kann), die den Nachrichtensender darstellt. MessageEvent.ports
Nur lesbar-
Ein Array von
MessagePort
-Objekten, das die Ports darstellt, die mit dem Kanal verbunden sind, über den die Nachricht gesendet wird (wo zutreffend, z. B. in der Kanalnachrichtenübertragung oder beim Senden einer Nachricht an einen gemeinsam genutzten Worker).
Beispiele
In diesem Beispiel erhält der Service Worker die ID des Clients von einem fetch
-Ereignis und sendet dann eine Nachricht mit 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(() => {
// …
});
});
Der Client kann die Nachricht empfangen, indem er das message
-Ereignis überwacht:
// main.js
navigator.serviceWorker.addEventListener("message", (message) => {
console.log(message);
});
Alternativ kann der Client die Nachricht mit dem onmessage
-Ereignishandler empfangen:
// main.js
navigator.serviceWorker.onmessage = (message) => {
console.log(message);
};
Spezifikationen
Specification |
---|
Service Workers # dom-serviceworkercontainer-onmessage |
Browser-Kompatibilität
BCD tables only load in the browser