From 99efa5cfa34c3f9d38b75352881acdfc99508ebf Mon Sep 17 00:00:00 2001 From: tristantheb Date: Fri, 2 Apr 2021 13:50:14 +0200 Subject: UPDATE: FR-ONLY - Remove all old CompatibilityTable to replace with {{Compat()}} (#311) * UPDATE: Removing CompatibilityTable script - Part 1 * UPDATE: Removing CompatibilityTable script - Part 2 * UPDATE: Removing CompatibilityTable script - Part 3 * UPDATE: Removing CompatibilityTable script - Part 4 * UPDATE: Removing CompatibilityTable script - Part 5/5 * FIX: Repair the EOL of one page * FIX: Fix conflicting file --- files/fr/web/api/messageevent/index.html | 182 ++++++++++++++++++------------- 1 file changed, 109 insertions(+), 73 deletions(-) (limited to 'files/fr/web/api/messageevent/index.html') diff --git a/files/fr/web/api/messageevent/index.html b/files/fr/web/api/messageevent/index.html index 79a62f3ab3..473489039a 100644 --- a/files/fr/web/api/messageevent/index.html +++ b/files/fr/web/api/messageevent/index.html @@ -1,103 +1,139 @@ --- title: MessageEvent slug: Web/API/MessageEvent +tags: + - API + - Channels + - Interface + - Reference + - WebSockets + - Window + - Workers + - messaging translation_of: Web/API/MessageEvent --- -
Une interface MessageEvent permet de recevoir un message (une donnée texte), grâce soit au {{domxref("WebSocket")}} soit par un WebRTC {{domxref("RTCDataChannel")}}. 
+
{{APIRef("HTML DOM")}}
-
 
+

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

-

L'interface dispose d'un gestionnaire d'événements déclenché par l'événement {{domxref("WebSocket.onmessage")}} ou {{domxref("RTCDataChannel.onmessage")}}.

+

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

{{AvailableInWorkers}}

-

Constructor

+

{{InheritanceDiagram(600, 80)}}

+ +

Constructeur

-
{{domxref("MessageEvent.MessageEvent", "MessageEvent()")}}
-
Créer une nouvelle instance MessageEvent.
+
{{domxref("MessageEvent.MessageEvent", "MessageEvent()")}}
+
Crée un nouveau MessageEvent.
-

Properties

+

Propriétés

-

Cette interface hérite des méthodes et 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}}
-
Retourne un {{domxref("DOMString")}}, {{domxref("Blob")}} ou un tableau {{domxref("ArrayBuffer")}} contenant les données émises par le serveur/ l'émetteur. 
-
{{domxref("MessageEvent.origin")}}
-
est une {{domxref("DOMString")}} …
-
{{domxref("MessageEvent.ports")}}
-
…
-
{{domxref("MessageEvent.source")}}
-
…
+
{{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é).
-

Methods

+

Méthodes

-

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

+

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

-
{{domxref("MessageEvent.initMessageEvent()")}} {{deprecated_inline}}
-
… Ne pas utiliser directement (déprécié) : préférer le constructeur {{domxref("MessageEvent.MessageEvent", "MessageEvent()")}} en lieu et 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.
-

Browser compatibility

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatUnknown}}{{CompatGeckoDesktop("2.0")}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - +

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 {{domxref("SharedWorker")}} à l'aide du constructeur {{domxref("SharedWorker.SharedWorker", "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 {{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();
+ +

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 {{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) {
+  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

+ +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+ + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "#messageevent", "MessageEvent")}}{{Spec2('HTML WHATWG')}}
-
-

[1] As of Gecko 11.0 {{geckoRelease("11.0")}}, Gecko supports ArrayBuffer for data, but not {{domxref("Blob")}}.

+

Compatibilité des navigateurs

+ +

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

-

See also

+

Voir aussi

-- cgit v1.2.3-54-g00ecf