HTML - Web Messaging

Bonjour, futurs développeurs web ! Aujourd'hui, nous allons plonger dans un sujet passionnant qui permet de faire communiquer différentes parties de vos applications web. C'est comme apprendre à vos pages web à avoir une conversation ! Explorons ensemble le monde du Web Messaging.

Introduction au Web Messaging

Avant de nous pencher sur le code, comprendreons ce qu'est le Web Messaging. Imaginez que vous avez deux pages web ouvertes dans des onglets différents de votre navigateur. Normalement, ces pages ne peuvent pas communiquer directement entre elles. Mais que se passe-t-il si vous souhaitez qu'elles partagent des informations ? C'est là que le Web Messaging entre en jeu !

Le Web Messaging permet à différentes parties d'une application web d'envoyer des messages entre elles, même si elles proviennent de sources différentes (comme des domaines différents). C'est comme donner à vos pages web leur propre ligne téléphonique spéciale pour bavarder !

L'événement Message

Au cœur du Web Messaging se trouve l'événement message. Cet événement est déclenché lorsque un message est reçu. Decomposons-le étape par étape.

Structure de Base

Voici un exemple simple de la manière d'écouter un message :

<script>
window.addEventListener("message", function(event) {
console.log("Message reçu de " + event.origin);
console.log("Contenu du message: " + event.data);
});
</script>

Décodons cela :

Nous utilisons window.addEventListener pour écouter l'événement "message".
Lorsqu'un message arrive, notre fonction est appelée.
La fonction reçoit un objet event, qui contient des informations sur le message.
Nous enregistrons l'origine du message et son contenu.

Envoyer un Message

Voyons maintenant comment envoyer un message :

<script>
// En supposant que nous voulons envoyer un message à un iframe avec l'id 'myFrame'
var iframe = document.getElementById('myFrame');
iframe.contentWindow.postMessage("Bonjour de la page parente !", "*");
</script>

Dans cet exemple :

Nous obtenons une référence à un iframe sur notre page.
Nous utilisons postMessage pour envoyer un message à cet iframe.
Le premier argument est le contenu du message.
Le second argument "*" signifie que nous permettons au message d'être envoyé à n'importe quelle origine. Dans les applications réelles, vous voudriez spécifier l'origine exacte pour des raisons de sécurité.

Considérations de Sécurité

N'oubliez jamais de vérifier l'origine des messages reçus ! Voici une version plus sécurisée de notre écouteur de message :

<script>
window.addEventListener("message", function(event) {
// Vérifiez si le message provient d'une source de confiance
if (event.origin !== "https://site-fiable.com") return;

console.log("Message de confiance reçu: " + event.data);
});
</script>

Cette vérification supplémentaire nous assure que nous ne traitons que les messages provenant de sources que nous trustons.

Exemples Pratiques

Regardons quelques scénarios du monde réel où le Web Messaging brille !

Exemple 1 : Communication entre une page et un iframe

Imaginez que vous avez une page principale qui charge un jeu dans un iframe. Vous souhaitez que la page principale démarre le jeu lorsque bouton est cliqué.

Page principale (parent.html) :

<!DOCTYPE html>
<html>
<body>
<button onclick="startGame()">Démarrer le Jeu</button>
<iframe id="gameFrame" src="game.html"></iframe>

<script>
function startGame() {
var gameFrame = document.getElementById('gameFrame');
gameFrame.contentWindow.postMessage("start", "*");
}

window.addEventListener("message", function(event) {
if (event.data === "gameOver") {
alert("Game Over ! Votre score a été enregistré.");
}
});
</script>
</body>
</html>

Page du jeu (game.html) :

<!DOCTYPE html>
<html>
<body>
<h1>Jeu Incroyable</h1>
<div id="gameArea">Le jeu va commencer...</div>

<script>
window.addEventListener("message", function(event) {
if (event.data === "start") {
document.getElementById('gameArea').innerHTML = "Le jeu est en cours !";
// Simuler la fin du jeu après 5 secondes
setTimeout(function() {
window.parent.postMessage("gameOver", "*");
}, 5000);
}
});
</script>
</body>
</html>

Dans cet exemple :

La page principale a un bouton pour démarrer le jeu.
Lorsqu'il est cliqué, il envoie un message "start" à l'iframe.
La page du jeu écoute ce message et démarre le jeu.
Lorsque le jeu est terminé, il envoie un message "gameOver" à la page parente.
La page parente affiche une alerte lorsqu'elle reçoit le message "gameOver".

Exemple 2 : Communication entre Fenêtres

Disons que vous avez un panier sur une page et les détails du produit sur une autre. Vous souhaitez ajouter des articles au panier depuis la page du produit.

Page du produit (product.html) :

<!DOCTYPE html>
<html>
<body>
<h1>Produit Incroyable</h1>
<button onclick="addToCart()">Ajouter au Panier</button>

<script>
function addToCart() {
window.opener.postMessage({
action: "addToCart",
product: "Produit Incroyable",
price: 19.99
}, "https://boutique.example.com");
}
</script>
</body>
</html>

Page du Panier (cart.html) :

<!DOCTYPE html>
<html>
<body>
<h1>Votre Panier</h1>
<ul id="cartItems"></ul>

<script>
window.addEventListener("message", function(event) {
if (event.origin !== "https://boutique.example.com") return;

if (event.data.action === "addToCart") {
var cartList = document.getElementById('cartItems');
var newItem = document.createElement('li');
newItem.textContent = event.data.product + " - $" + event.data.price;
cartList.appendChild(newItem);
}
});
</script>
</body>
</html>

Dans ce scénario :

La page du produit a un bouton "Ajouter au Panier".
Lorsqu'il est cliqué, il envoie un message à la page du panier (présumé être la fenêtre ouvrante).
La page du panier écoute les messages et ajoute le produit à la liste lorsqu'elle en reçoit un.

Conclusion

Le Web Messaging ouvre un monde de possibilités pour créer des applications web interactives et dynamiques. Il permet à différentes parties de votre écosystème web de communiquer sans effort, améliorant l'expérience utilisateur et la fonctionnalité.

Souvenez-vous, avec un grand pouvoir vient une grande responsabilité ! Toujours valider l'origine des messages et n'accepter que ceux provenant de sources de confiance. Bon codage, et que vos pages web aient toujours des conversations engageantes !

Méthode	Description
`window.postMessage(message, targetOrigin)`	Envoie un message à une autre fenêtre
`window.addEventListener("message", function(event) { ... })`	Écoute les messages entrants
`event.data`	Contient les données envoyées avec le message
`event.origin`	Indique l'origine de l'expéditeur
`event.source`	Fournit une référence à la fenêtre de l'expéditeur

Cette table résume les méthodes et propriétés clés que nous avons discutées dans notre voyage du Web Messaging. Gardez-la à portée de main lorsque vous commencez à expérimenter avec vos propres implémentations de messagerie !

Credits: Image by storyset