div>

Pour envoyer des messages entre des contextes de navigation tels que des fenêtres, des onglets, des cadres ou des iframes dans la même origine, nous pouvons utiliser le API de canal de diffusion.

Dans cet article, nous verrons comment l’utiliser pour envoyer et recevoir des messages.

Pour utiliser l’API, nous devons créer un objet BroadcastChannel qui écoute le canal sous-jacent.

Ensuite, nous pouvons recevoir tous les messages qui y ont été postés. Nous n’avons pas à maintenir une référence aux iframes ou aux travailleurs avec lesquels nous voulons communiquer.

Tout élément de la même origine peut s’abonner à un canal particulier en créant un BroadcasChannel, puis ils auront une communication en duplex intégral entre tous.

Nous pouvons l’utiliser comme suit:

const bc = new BroadcastChannel("test_channel");
bc.postMessage("test");
bc.onmessage = ev => {
console.log(ev.data);
};
bc.close();

Dans le code ci-dessus, nous avons créé une instance BroadcastChannel puis nous avons appelé postMessage et défini la propriété onmessage pour écouter les messages qui ont été envoyés.

Les données sont accessibles en utilisant la propriété data.

Nous pouvons alors appeler close pour fermer le canal lorsque nous avons terminé.

Nous pouvons envoyer n’importe quel type d’objet et pas seulement une chaîne.

Événement de message

Le paramètre ev dans le gestionnaire onmessage est l’objet MessageEvent.

Il a quelques propriétés en lecture seule auxquelles nous pouvons accéder :

• data — les données envoyées par l’émetteur du message. Ce sera le contenu que nous avons passé dans postMessage
• origin — une chaîne qui représente l’origine du message émis
• lastEventId — une chaîne représentant un identifiant unique pour l’événement
• source — un objet MessageEventSource, (qui peut être un objet WindowProxyMessagePort, ou ServiceWorker), représentant l’émetteur de message
• ports — un tableau d’objet MessagePort représentant le ports associés au canal par lequel le message est envoyé.

Gestion des erreurs

Pour gérer les erreurs lors de l’envoi de messages, nous pouvons définir un gestionnaire d’événements sur la propriété onmessageerror de l’objet Canal de diffusion.

Par exemple, nous pouvons écrire:

bc.onmessageerror = e => console.log(e);

Ensuite, nous pouvons enregistrer toutes les erreurs qui apparaissent.

Name

Nous pouvons obtenir le nom du canal avec la propriété name.

Pour ce faire, nous pouvons écrire:

const bc = new BroadcastChannel("test_channel");
console.log(bc.name);

Alors nous pouvons voir que le nom de notre canal de diffusion est test_channel à partir du console.log.

Conclusion

L’API Broadcast Channel est une API très simple qui nous permet de communiquer entre contextes.

Il peut être utilisé pour détecter les actions de l’utilisateur dans les autres onglets de l’environnement d’origine du même site, comme lorsqu’un utilisateur se connecte à un compte.

Il n’y a pas de protocole de messagerie et différents documents dans différents contextes doivent l’implémenter eux-mêmes.

De plus, il n’y a pas non plus de négociation et ce n’est pas requis par la spécification.