MessageEvent
L'interface MessageEvent
représente un message reçu par un objet cible.
Il est utilisé pour représenter les messages en :
- Événements envoyés par le serveur (voir
EventSource.onmessage
). - Sockets Web (voir la propriété
onmessage
de l'interface WebSocket). - Messagerie inter-documents (voir
Window.postMessage()
etWindow.onmessage
). - Messagerie de canal (voir
MessagePort.postMessage()
etMessagePort.onmessage
). - Messagerie inter-worker/document (voir les deux entrées ci-dessus, mais aussi
Worker.postMessage()
,Worker.onmessage
,ServiceWorkerGlobalScope.onmessage
, etc.) - Canaux de diffusion (voir
Broadcastchannel.postMessage()
) etBroadcastChannel.onmessage
). - Les canaux de données WebRTC (voir
RTCDataChannel.onmessage
).
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.
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 objetWindowProxy
,MessagePort
, ouServiceWorker
) 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 :
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()
:
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
:
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.
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 Standard # the-messageevent-interface |
Compatibilité des navigateurs
BCD tables only load in the browser
Voir aussi
ExtendableMessageEvent
— similaire à cette interface mais utilisée dans les interfaces qui doivent donner plus de flexibilité aux auteurs.