From 1407c8fdef01ecd0ffb8a8bd46e7113f119b9fde Mon Sep 17 00:00:00 2001 From: julieng Date: Sat, 2 Oct 2021 17:20:24 +0200 Subject: convert content to md --- files/fr/web/api/messageevent/index.md | 147 +++++++++++++++------------------ 1 file changed, 66 insertions(+), 81 deletions(-) (limited to 'files/fr/web/api/messageevent') diff --git a/files/fr/web/api/messageevent/index.md b/files/fr/web/api/messageevent/index.md index 473489039a..2d975b87cc 100644 --- a/files/fr/web/api/messageevent/index.md +++ b/files/fr/web/api/messageevent/index.md @@ -12,76 +12,73 @@ tags: - messaging translation_of: Web/API/MessageEvent --- -
{{APIRef("HTML DOM")}}
+{{APIRef("HTML DOM")}} -

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

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

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

+Il est utilisé pour représenter les messages en : - +- [Événements envoyés par le serveur](/fr/docs/Web/API/Server-sent_events) (voir {{domxref("EventSource.onmessage")}}). +- [Sockets Web](/fr/docs/Web/API/WebSockets_API) (voir la propriété `onmessage` de l'interface [WebSocket](/fr/docs/Web/API/WebSocket)). +- Messagerie inter-documents (voir {{domxref("Window.postMessage()")}} et {{domxref("Window.onmessage")}}). +- [Messagerie de canal](/fr/docs/Web/API/Channel_Messaging_API) (voir {{domxref("MessagePort.postMessage()")}} et {{domxref("MessagePort.onmessage")}}). +- Messagerie inter-worker/document (voir les deux entrées ci-dessus, mais aussi {{domxref("Worker.postMessage()")}}, {{domxref("Worker.onmessage")}}, {{domxref("ServiceWorkerGlobalScope.onmessage")}}, etc.) +- [Canaux de diffusion](/fr/docs/Web/API/Broadcast_Channel_API) (voir {{domxref("Broadcastchannel.postMessage()")}}) et {{domxref("BroadcastChannel.onmessage")}}). +- Les canaux de données WebRTC (voir {{domxref("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 {{event("message")}} correspondant (par exemple, en utilisant un gestionnaire onmessage comme indiqué ci-dessus).

+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 {{event("message")}} correspondant (par exemple, en utilisant un gestionnaire `onmessage` comme indiqué ci-dessus). -

{{AvailableInWorkers}}

+{{AvailableInWorkers}} -

{{InheritanceDiagram(600, 80)}}

+{{InheritanceDiagram(600, 80)}} -

Constructeur

+## Constructeur -
-
{{domxref("MessageEvent.MessageEvent", "MessageEvent()")}}
-
Crée un nouveau MessageEvent.
-
+- {{domxref("MessageEvent.MessageEvent", "MessageEvent()")}} + - : Crée un nouveau `MessageEvent`. -

Propriétés

+## Propriétés -

Cette interface hérite également des propriétés de son parent, {{domxref("Event")}}.

+_Cette interface hérite également des propriétés de son parent, {{domxref("Event")}}._ -
-
{{domxref("MessageEvent.data")}} {{readonlyInline}}
-
Les données envoyées par l'émetteur du message.
-
{{domxref("MessageEvent.origin")}} {{readonlyInline}}
-
Une chaîne de caractères {{domxref("USVString")}} représentant l'origine de l'émetteur du message.
-
{{domxref("MessageEvent.lastEventId")}} {{readonlyInline}}
-
Une chaîne de caractères {{domxref("DOMString")}} représentant un identifiant unique pour l'événement.
-
{{domxref("MessageEvent.source")}} {{readonlyInline}}
-
Un MessageEventSource (qui peut être un objet {{domxref("WindowProxy")}}, {{domxref("MessagePort")}}, ou {{domxref("ServiceWorker")}}) représentant l'émetteur du message.
-
{{domxref("MessageEvent.ports")}} {{readonlyInline}}
-
Un tableau d'objets {{domxref("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é).
-
+- {{domxref("MessageEvent.data")}} {{readonlyInline}} + - : Les données envoyées par l'émetteur du message. +- {{domxref("MessageEvent.origin")}} {{readonlyInline}} + - : Une chaîne de caractères {{domxref("USVString")}} représentant l'origine de l'émetteur du message. +- {{domxref("MessageEvent.lastEventId")}} {{readonlyInline}} + - : Une chaîne de caractères {{domxref("DOMString")}} représentant un identifiant unique pour l'événement. +- {{domxref("MessageEvent.source")}} {{readonlyInline}} + - : Un `MessageEventSource` (qui peut être un objet {{domxref("WindowProxy")}}, {{domxref("MessagePort")}}, ou {{domxref("ServiceWorker")}}) représentant l'émetteur du message. +- {{domxref("MessageEvent.ports")}} {{readonlyInline}} + - : Un tableau d'objets {{domxref("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

+## Méthodes -

Cette interface hérite également des méthodes de son parent, {{domxref("Event")}}.

+_Cette interface hérite également des méthodes de son parent, {{domxref("Event")}}._ -
-
{{domxref("MessageEvent.initMessageEvent","initMessageEvent()")}} {{deprecated_inline}}
-
Initialise un événement de message. Ne plus utiliser ceci - utilisez le constructeur {{domxref("MessageEvent.MessageEvent", "MessageEvent()")}} à la place.
-
+- {{domxref("MessageEvent.initMessageEvent","initMessageEvent()")}} {{deprecated_inline}} + - : Initialise un événement de message. **Ne plus utiliser ceci - utilisez le constructeur {{domxref("MessageEvent.MessageEvent", "MessageEvent()")}} à la place.** -

Exemples

+## 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.

+Dans notre exemple de [travailleur partagé basique](https://github.com/mdn/simple-shared-worker) ([exécuter le travailleur partagé](https://mdn.github.io/simple-shared-worker/)), 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 {{domxref("SharedWorker")}} à l'aide du constructeur {{domxref("SharedWorker.SharedWorker", "SharedWorker()")}}. Les deux scripts contiennent ceci :

+L'extrait de code suivant montre la création d'un objet {{domxref("SharedWorker")}} à l'aide du constructeur {{domxref("SharedWorker.SharedWorker", "SharedWorker()")}}. Les deux scripts contiennent ceci : -
var myWorker = new SharedWorker('worker.js');
+```js +var myWorker = new SharedWorker('worker.js'); +``` -

Les deux scripts accèdent ensuite au worker par le biais d'un objet {{domxref("MessagePort")}} créé à l'aide de la propriété {{domxref("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() :

+Les deux scripts accèdent ensuite au worker par le biais d'un objet {{domxref("MessagePort")}} créé à l'aide de la propriété {{domxref("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();
+```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 :

+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() {
+```js
+first.onchange = function() {
   myWorker.port.postMessage([first.value,second.value]);
   console.log('Message posté au worker');
 }
@@ -94,11 +91,13 @@ second.onchange = function() {
 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 {{domxref("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 {{event("connect")}} - nous utilisons ensuite {{domxref("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.

+À l'intérieur du worker, nous utilisons le gestionnaire {{domxref("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 {{event("connect")}} - nous utilisons ensuite {{domxref("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) {
+```js
+onconnect = function(e) {
   var port = e.ports[0];
 
   port.addEventListener('message', function(e) {
@@ -107,33 +106,19 @@ myWorker.port.onmessage = function(e) {
   });
 
   port.start(); // Requis si vous utilisez addEventListener. Sinon, il est appelé implicitement par le paramètre onmessage.
-}
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "#messageevent", "MessageEvent")}}{{Spec2('HTML WHATWG')}}
- -

Compatibilité des navigateurs

- -

{{Compat("api.MessageEvent")}}

- -

Voir aussi

- - +} +``` + +## Spécifications + +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------- | -------------------------------- | ----------- | +| {{SpecName('HTML WHATWG', "#messageevent", "MessageEvent")}} | {{Spec2('HTML WHATWG')}} | | + +## Compatibilité des navigateurs + +{{Compat("api.MessageEvent")}} + +## Voir aussi + +- {{domxref("ExtendableMessageEvent")}} — similaire à cette interface mais utilisée dans les interfaces qui doivent donner plus de flexibilité aux auteurs. -- cgit v1.2.3-54-g00ecf