BroadcastChannel : évènement message
====================================

Baseline 2022
-------------

Newly availableSince March 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
L'évènement `message` est déclenché sur un objet `BroadcastChannel` lorsqu'un message arrive sur le canal.

Syntaxe
-------

Utilisez le nom de l'évènement dans les méthodes telles que `addEventListener()`, ou définissez un gestionnaire d'évènements.


```js
addEventListener("message", (event) => {});
onmessage = (event) => {};
```

Type de l'évènement
-------------------

Un `MessageEvent`. Hérite de l'interface `Event`.

Event

MessageEventPropriété de l'évènement
------------------------

*En plus des propriétés listées ci-dessous, celles provenant de l'interface parente `Event` sont disponibles.*

* `data` (en-US) Lecture seule 
    + : Les données envoyées par l'émetteur du message.
* `origin` (en-US) Lecture seule
* `lastEventId` (en-US) Lecture seule 
    + : Une chaîne représentant l'identifiant unique pour l'évènement.
* `source` (en-US) Lecture seule 
    + : Un `MessageEventSource`, qui peut être soit un `WindowProxy` (en-US), un `MessagePort` (en-US), ou un objet `ServiceWorker` représentant l'émetteur du message.
* `ports` (en-US) Lecture seule 
    + : Un tableau d'objets `MessagePort` (en-US) représentant les ports associés au canal par lequel le message est envoyé (lorsque c'est approprié, par exemple, dans le canal de communication ou lorsqu'un message est envoyé à un *worker* partagé).
Exemples
--------

Dans cet exemple, il y a un `<iframe>` « émetteur » qui diffuse le contenu du `<textarea>` lorsque l'utilisatrice ou l'utilisateur clique sur le bouton. Il y a deux `iframe`s « récepteurs » qui écoutent le message diffusé et écrivent le résultat dans un élément `<div>`.

### Émetteur
```

<h1>Émetteur</h1>
<label for="message">Saisissez un message à diffuser :</label><br />
<textarea id="message" name="message" rows="1" cols="40">Hello</textarea>
<button id="broadcast-message" type="button">Diffusez le message</button>
```


```
body {
  border: 1px solid black;
  padding: 0.5rem;
  height: 150px;
  font-family: "Fira Sans", sans-serif;
}

h1 {
  font:
    1.6em "Fira Sans",
    sans-serif;
  margin-bottom: 1rem;
}

textarea {
  padding: 0.2rem;
}

label,
br {
  margin: 0.5rem 0;
}

button {
  vertical-align: top;
  height: 1.5rem;
}
```



```js
const canal = new BroadcastChannel("canal\_exemple");
const commandeMessage = document.querySelector("#message");
const boutonDeDiffusion = document.querySelector("#broadcast-message");

boutonDeDiffusion.addEventListener("click", () => {
  canal.postMessage(commandeMessage.value);
});
```

### Récepteur 1
```

<h1>Récepteur 1</h1>
<div id="recu"></div>
```


```
body {
  border: 1px solid black;
  padding: 0.5rem;
  height: 100px;
  font-family: "Fira Sans", sans-serif;
}

h1 {
  font:
    1.6em "Fira Sans",
    sans-serif;
  margin-bottom: 1rem;
}
```



```js
const canal = new BroadcastChannel("canal\_exemple");
canal.addEventListener("message", (event) => {
  recu.textContent = event.data;
});
```

### Récepteur 2
```

<h1>Récepteur 2</h1>
<div id="recu"></div>
```


```
body {
  border: 1px solid black;
  padding: 0.5rem;
  height: 100px;
  font-family: "Fira Sans", sans-serif;
}

h1 {
  font:
    1.6em "Fira Sans",
    sans-serif;
  margin-bottom: 1rem;
}
```



```js
const canal = new BroadcastChannel("canal\_exemple");
canal.addEventListener("message", (event) => {
  recu.textContent = event.data;
});
```

### Résultat

Spécifications
--------------

| Specification |
| --- |
| HTML Standard # event-message |
| HTML Standard # handler-broadcastchannel-onmessage |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* Évènements liés : `messageerror`.