diff options
Diffstat (limited to 'files/fr/web/api/messageevent/index.md')
| -rw-r--r-- | files/fr/web/api/messageevent/index.md | 147 |
1 files changed, 66 insertions, 81 deletions
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 --- -<div>{{APIRef("HTML DOM")}}</div> +{{APIRef("HTML DOM")}} -<p>L'interface <code><strong>MessageEvent</strong></code> représente un message reçu par un objet cible.</p> +L'interface **`MessageEvent`** représente un message reçu par un objet cible. -<p>Il est utilisé pour représenter les messages en :</p> +Il est utilisé pour représenter les messages en : -<ul> - <li><a href="/fr/docs/Web/API/Server-sent_events">Événements envoyés par le serveur</a> (voir {{domxref("EventSource.onmessage")}}).</li> - <li><a href="/fr/docs/Web/API/WebSockets_API">Sockets Web</a> (voir la propriété <code>onmessage</code> de l'interface <a href="/fr/docs/Web/API/WebSocket">WebSocket</a>).</li> - <li>Messagerie inter-documents (voir {{domxref("Window.postMessage()")}} et {{domxref("Window.onmessage")}}).</li> - <li><a href="/fr/docs/Web/API/Channel_Messaging_API">Messagerie de canal</a> (voir {{domxref("MessagePort.postMessage()")}} et {{domxref("MessagePort.onmessage")}}).</li> - <li>Messagerie inter-worker/document (voir les deux entrées ci-dessus, mais aussi {{domxref("Worker.postMessage()")}}, {{domxref("Worker.onmessage")}}, {{domxref("ServiceWorkerGlobalScope.onmessage")}}, etc.)</li> - <li><a href="/fr/docs/Web/API/Broadcast_Channel_API">Canaux de diffusion</a> (voir {{domxref("Broadcastchannel.postMessage()")}}) et {{domxref("BroadcastChannel.onmessage")}}).</li> - <li>Les canaux de données WebRTC (voir {{domxref("RTCDataChannel.onmessage")}}).</li> -</ul> +- [É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")}}). -<p>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 <code>onmessage</code> comme indiqué ci-dessus).</p> +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). -<p>{{AvailableInWorkers}}</p> +{{AvailableInWorkers}} -<p>{{InheritanceDiagram(600, 80)}}</p> +{{InheritanceDiagram(600, 80)}} -<h2 id="Constructor">Constructeur</h2> +## Constructeur -<dl> - <dt>{{domxref("MessageEvent.MessageEvent", "MessageEvent()")}}</dt> - <dd>Crée un nouveau <code>MessageEvent</code>.</dd> -</dl> +- {{domxref("MessageEvent.MessageEvent", "MessageEvent()")}} + - : Crée un nouveau `MessageEvent`. -<h2 id="Properties">Propriétés</h2> +## Propriétés -<p><em>Cette interface hérite également des propriétés de son parent, {{domxref("Event")}}.</em></p> +_Cette interface hérite également des propriétés de son parent, {{domxref("Event")}}._ -<dl> - <dt>{{domxref("MessageEvent.data")}} {{readonlyInline}}</dt> - <dd>Les données envoyées par l'émetteur du message.</dd> - <dt>{{domxref("MessageEvent.origin")}} {{readonlyInline}}</dt> - <dd>Une chaîne de caractères {{domxref("USVString")}} représentant l'origine de l'émetteur du message.</dd> - <dt>{{domxref("MessageEvent.lastEventId")}} {{readonlyInline}}</dt> - <dd>Une chaîne de caractères {{domxref("DOMString")}} représentant un identifiant unique pour l'événement.</dd> - <dt>{{domxref("MessageEvent.source")}} {{readonlyInline}}</dt> - <dd>Un <code>MessageEventSource</code> (qui peut être un objet {{domxref("WindowProxy")}}, {{domxref("MessagePort")}}, ou {{domxref("ServiceWorker")}}) représentant l'émetteur du message.</dd> - <dt>{{domxref("MessageEvent.ports")}} {{readonlyInline}}</dt> - <dd>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é).</dd> -</dl> +- {{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é). -<h2 id="Methods">Méthodes</h2> +## Méthodes -<p><em>Cette interface hérite également des méthodes de son parent, {{domxref("Event")}}.</em></p> +_Cette interface hérite également des méthodes de son parent, {{domxref("Event")}}._ -<dl> - <dt>{{domxref("MessageEvent.initMessageEvent","initMessageEvent()")}} {{deprecated_inline}}</dt> - <dd>Initialise un événement de message. <strong>Ne plus utiliser ceci - utilisez le constructeur {{domxref("MessageEvent.MessageEvent", "MessageEvent()")}} à la place.</strong></dd> -</dl> +- {{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.** -<h2 id="Examples">Exemples</h2> +## Exemples -<p>Dans notre exemple de <a href="https://github.com/mdn/simple-shared-worker">travailleur partagé basique</a> (<a href="https://mdn.github.io/simple-shared-worker/">exécuter le travailleur partagé</a>), 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.</p> +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. -<p>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 :</p> +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 : -<pre class="brush: js">var myWorker = new SharedWorker('worker.js');</pre> +```js +var myWorker = new SharedWorker('worker.js'); +``` -<p>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 <code>start()</code> :</p> +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()` : -<pre class="brush: js">myWorker.port.start();</pre> +```js +myWorker.port.start(); +``` -<p>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 <code>port.postMessage()</code> et <code>port.onmessage</code> :</p> +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` : -<pre class="brush: js">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'); -}</pre> +} +``` -<p>À 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é <code>ports</code> de l'événement {{event("connect")}} - nous utilisons ensuite {{domxref("MessagePort")}} La méthode <code>start()</code> pour démarrer le port, et le handler <code>onmessage</code> pour gérer les messages envoyés par les processus principaux.</p> +À 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. -<pre class="brush: js">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. -}</pre> - -<h2 id="Specifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', "#messageevent", "MessageEvent")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.MessageEvent")}}</p> - -<h2 id="See_also">Voir aussi</h2> - -<ul> - <li>{{domxref("ExtendableMessageEvent")}} — similaire à cette interface mais utilisée dans les interfaces qui doivent donner plus de flexibilité aux auteurs.</li> -</ul> +} +``` + +## 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. |