ServiceWorkerGlobalScope: message Ereignis

Sicherer Kontext: Diese Funktion ist nur in sicheren Kontexten (HTTPS) in einigen oder allen unterstützenden Browsern verfügbar.

Hinweis: Dieses Feature ist nur verfügbar in Service Workers.

Das message Ereignis der ServiceWorkerGlobalScope Schnittstelle tritt auf, wenn eingehende Nachrichten empfangen werden. Kontrollierte Seiten können die ServiceWorker.postMessage()-Methode verwenden, um Nachrichten an Service Worker zu senden. Der Service Worker kann optional über die Client.postMessage() eine Antwort an die kontrollierte Seite zurücksenden.

Dieses Ereignis kann nicht abgebrochen werden und erfolgt nicht in einem Ereignis-Bubble.

Syntax

Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Event-Handler-Eigenschaft.

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

onmessage = (event) => {};

Ereignistyp

Ein ExtendableMessageEvent. Erbt von ExtendableEvent.

Event ExtendableEvent ExtendableMessageEvent

Ereigniseigenschaften

Erbt Eigenschaften von seinem Elternteil, ExtendableEvent.

ExtendableMessageEvent.data Nur lesbar

Gibt die Daten des Ereignisses zurück. Es kann sich um jeden Datentyp handeln. Wird es im messageerror-Ereignis ausgelöst, wird die Eigenschaft null sein.

ExtendableMessageEvent.origin Nur lesbar

Gibt den Ursprung des Client zurück, der die Nachricht gesendet hat.

ExtendableMessageEvent.lastEventId Nur lesbar

Repräsentiert bei serverseitig gesendeten Ereignissen die letzte Ereignis-ID der Ereignisquelle.

ExtendableMessageEvent.source Nur lesbar

Gibt eine Referenz zum Client-Objekt zurück, das die Nachricht gesendet hat.

ExtendableMessageEvent.ports Nur lesbar

Gibt das Array zurück, das die MessagePort-Objekte enthält, die die Ports des zugehörigen Nachrichtenkanals darstellen.

Beispiele

Im folgenden Beispiel erhält eine Seite Zugriff auf das ServiceWorker-Objekt über ServiceWorkerRegistration.active und ruft dann dessen postMessage()-Funktion auf.

js
// 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");
  });
}

Der Service Worker kann die Nachricht empfangen, indem er das message-Ereignis abhört:

js
// 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");
});

Alternativ kann das Skript die Nachricht mithilfe von onmessage abhören:

js
// 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");
};

Spezifikationen

Specification
Service Workers
# eventdef-serviceworkerglobalscope-message
Service Workers
# dom-serviceworkerglobalscope-onmessage

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch