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.

L'interface MessageEvent représente un message reçu par un objet cible.

Il est utilisé pour représenter les messages en :

L'action déclenchée par cet événement est définie dans une fonction définie comme gestionnaire d'événement pour l'événement message correspondant (par exemple, en utilisant un gestionnaire onmessage comme indiqué ci-dessus).

Note : Cette fonctionnalité est disponible via les Web Workers.

must be a string

Constructeur

MessageEvent()

Crée un nouveau MessageEvent.

Propriétés

Cette interface hérite également des propriétés de son parent, Event.

MessageEvent.data Lecture seule

Les données envoyées par l'émetteur du message.

MessageEvent.origin Lecture seule

Une chaîne de caractères USVString représentant l'origine de l'émetteur du message.

MessageEvent.lastEventId Lecture seule

Une chaîne de caractères DOMString représentant un identifiant unique pour l'événement.

MessageEvent.source Lecture seule

Un MessageEventSource (qui peut être un objet WindowProxy, MessagePort, ou ServiceWorker) représentant l'émetteur du message.

MessageEvent.ports Lecture seule

Un tableau d'objets MessagePort représentant les ports associés au canal par lequel le message est envoyé (le cas échéant, par exemple dans la messagerie de canal ou lors de l'envoi d'un message à un travailleur partagé).

Méthodes

Cette interface hérite également des méthodes de son parent, Event.

initMessageEvent() Obsolète

Initialise un événement de message. Ne plus utiliser ceci - utilisez le constructeur MessageEvent() à la place.

Exemples

Dans notre exemple de travailleur partagé basique (exécuter le travailleur partagé), nous avons deux pages HTML, dont chacune utilise un peu de JavaScript pour effectuer un calcul simple. Les différents scripts utilisent le même fichier worker pour effectuer le calcul - ils peuvent tous deux y accéder, même si leurs pages s'exécutent dans des fenêtres différentes.

L'extrait de code suivant montre la création d'un objet SharedWorker à l'aide du constructeur SharedWorker(). Les deux scripts contiennent ceci :

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

Les deux scripts accèdent ensuite au worker par le biais d'un objet MessagePort créé à l'aide de la propriété SharedWorker.port. Si l'événement onmessage est attaché à l'aide de addEventListener, le port est démarré manuellement à l'aide de sa méthode start() :

js
myWorker.port.start();

Lorsque le port est démarré, les deux scripts postent des messages au worker et traitent les messages envoyés par celui-ci en utilisant respectivement port.postMessage() et port.onmessage :

js
first.onchange = function () {
  myWorker.port.postMessage([first.value, second.value]);
  console.log("Message posté au worker");
};

second.onchange = function () {
  myWorker.port.postMessage([first.value, second.value]);
  console.log("Message posté au worker");
};

myWorker.port.onmessage = function (e) {
  result1.textContent = e.data;
  console.log("Message reçu du worker");
};

À l'intérieur du worker, nous utilisons le gestionnaire SharedWorkerGlobalScope.onconnect pour nous connecter au même port que celui mentionné ci-dessus. Les ports associés à ce worker sont accessibles dans la propriété ports de l'événement connect - nous utilisons ensuite MessagePort La méthode start() pour démarrer le port, et le handler onmessage pour gérer les messages envoyés par les processus principaux.

js
onconnect = function (e) {
  var port = e.ports[0];

  port.addEventListener("message", function (e) {
    var workerResult = "Result: " + e.data[0] * e.data[1];
    port.postMessage(workerResult);
  });

  port.start(); // Requis si vous utilisez addEventListener. Sinon, il est appelé implicitement par le paramètre onmessage.
};

Spécifications

Specification
HTML
# the-messageevent-interface

Compatibilité des navigateurs

Report problems with this compatibility data on GitHub
desktopmobileserver
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Deno
Node.js
MessageEvent
MessageEvent() constructor
data
initMessageEvent
Deprecated
lastEventId
origin
ports
source
userActivation
Non-standard

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Non-standard. Check cross-browser support before using.
Deprecated. Not for use in new websites.

Voir aussi

  • ExtendableMessageEvent — similaire à cette interface mais utilisée dans les interfaces qui doivent donner plus de flexibilité aux auteurs.