MessageEvent

Baseline Widely available

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.

L'interfaceMessageEvent 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 (voirEventSource.onmessage).
Sockets Web (voir la propriétéonmessage de l'interfaceWebSocket).
Messagerie inter-documents (voirWindow.postMessage() etWindow.onmessage).
Messagerie de canal (voirMessagePort.postMessage() etMessagePort.onmessage).
Messagerie inter-worker/document (voir les deux entrées ci-dessus, mais aussiWorker.postMessage(),Worker.onmessage,ServiceWorkerGlobalScope.onmessage, etc.)
Canaux de diffusion (voirBroadcastchannel.postMessage()) etBroadcastChannel.onmessage).
Les canaux de données WebRTC (voirRTCDataChannel.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énementmessage correspondant (par exemple, en utilisant un gestionnaireonmessage comme indiqué ci-dessus).

Note : Cette fonctionnalité est disponible via lesWeb Workers.

must be a string

Constructeur

MessageEvent(): Crée un nouveauMessageEvent.

Propriétés

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

MessageEvent.dataLecture seule: Les données envoyées par l'émetteur du message.
MessageEvent.originLecture seule: Une chaîne de caractèresUSVString représentant l'origine de l'émetteur du message.
MessageEvent.lastEventIdLecture seule: Une chaîne de caractèresDOMString représentant un identifiant unique pour l'événement.
MessageEvent.sourceLecture seule: UnMessageEventSource (qui peut être un objetWindowProxy,MessagePort, ouServiceWorker) représentant l'émetteur du message.
MessageEvent.portsLecture seule: Un tableau d'objetsMessagePort 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 constructeurMessageEvent() à la place.

Exemples

Dans notre exemple detravailleur 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 objetSharedWorker à l'aide du constructeurSharedWorker(). Les deux scripts contiennent ceci :

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

Les deux scripts accèdent ensuite au worker par le biais d'un objetMessagePort 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éthodestart() :

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 respectivementport.postMessage() etport.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 gestionnaireSharedWorkerGlobalScope.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énementconnect - nous utilisons ensuiteMessagePort La méthodestart() pour démarrer le port, et le handleronmessage 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.};