HTML - Événements envoyés par le serveur

Salut à toi, futur développeur web ! Aujourd'hui, nous allons plonger dans le monde passionnant des Événements envoyés par le serveur (Server-Sent Events, SSE). Ne t'inquiète pas si tu es nouveau dans la programmation ; je vais te guider pas à pas à travers ce sujet, tout comme j'ai fait pour des centaines d'étudiants au fil des ans. Alors, prends une tasse de café et c'est parti !

Qu'est-ce que les Événements envoyés par le serveur ?

Avant de nous plonger dans le code, comprenons ce qu'est l'Événement envoyé par le serveur. Imagine que tu regardes un match de sport en direct en ligne. Tu veux voir les mises à jour du score en temps réel sans recharger la page. C'est là que les SSE deviennent pratiques !

Les Événements envoyés par le serveur permettent à une page web de recevoir automatiquement des mises à jour d'un serveur. C'est comme avoir une ligne directe vers le serveur, où il peut t'envoyer des messages quand il le souhaite, sans que tu doives demander à plusieurs reprises.

Comment utiliser les SSE dans les applications web ?

Maintenant que nous comprenons le concept, voyons comment nous pouvons implémenter les SSE dans nos applications web. Nous allons commencer par le code côté client, qui est écrit en HTML et JavaScript.

Étape 1 : Créer un objet EventSource

Premièrement, nous devons créer un objet EventSource dans notre code JavaScript. Cet objet va établir une connexion avec le serveur.

<h1>Score en direct des sports</h1>
<div id="score"></div>

<script>
if(typeof(EventSource) !== "undefined") {
var source = new EventSource("score_updates.php");
source.onmessage = function(event) {
document.getElementById("score").innerHTML = event.data;
};
} else {
document.getElementById("score").innerHTML = "Désolé, votre navigateur ne prend pas en charge les événements envoyés par le serveur...";
}
</script>

Reprenons cela :

1. Nous créons un titre et un élément div où nous afficherons le score.
2. Dans le script, nous vérifions d'abord si le navigateur prend en charge EventSource.
3. Si c'est le cas, nous créons un nouvel objet EventSource, en spécifiant l'URL de notre script côté serveur.
4. Nous définissons un gestionnaire d'événement onmessage. Cette fonction sera appelée chaque fois que nous recevons un message du serveur.
5. À l'intérieur de la fonction, nous mettons à jour le contenu de notre div "score" avec les données reçues du serveur.
6. Si le navigateur ne prend pas en charge SSE, nous affichons un message informant l'utilisateur.

Script côté serveur pour SSE

Maintenant, voyons comment nous configurons le script côté serveur pour envoyer des événements. Nous utiliserons PHP pour cet exemple, mais le concept est similaire dans d'autres langages côté serveur.

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

function sendUpdate($score) {
echo "data: $score\n\n";
ob_flush();
flush();
}

$score = 0;
while (true) {
$score++;
sendUpdate("Score actuel: $score");
sleep(5);  // Attendre 5 secondes avant d'envoyer la prochaine mise à jour
}
?>

Analysons ce script :

1. Nous définissons les en-têtes appropriés pour SSE.
2. Nous définissons une fonction sendUpdate qui envoie des données dans le format correct pour SSE.
3. Nous démarrons une boucle infinie (dans une application réelle, tu aurais une condition pour arrêter cela).
4. Dans chaque itération, nous incrémentons le score et envoyons une mise à jour.
5. Ensuite, nous attendons 5 secondes avant la prochaine mise à jour.

Gérer les événements envoyés par le serveur

Maintenant que nous avons à la fois le code client et serveur, voyons comment nous pouvons gérer différents types d'événements.

<h1>Mises à jour en direct des sports</h1>
<div id="score"></div>
<div id="commentary"></div>

<script>
var source = new EventSource("sports_updates.php");

source.addEventListener('score', function(e) {
document.getElementById('score').innerHTML = e.data;
}, false);

source.addEventListener('commentary', function(e) {
document.getElementById('commentary').innerHTML = e.data;
}, false);

source.onerror = function(e) {
console.log("Erreur: " + e);
};
</script>

Dans cet exemple :

1. Nous créons deux éléments div pour le score et les commentaires.
2. Nous configurons des gestionnaires d'événement pour deux types d'événements : 'score' et 'commentary'.
3. Chaque événement met à jour un élément différent sur la page.
4. Nous ajoutons également un gestionnaire d'erreur pour enregistrer toute erreur.

Le script côté serveur correspondant pourrait ressembler à ceci :

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

function sendEvent($event, $data) {
echo "event: $event\n";
echo "data: $data\n\n";
ob_flush();
flush();
}

$score = 0;
$commentary = ["Gros arrêt !", "Tir près !", "Carton jaune !"];

while (true) {
$score++;
sendEvent('score', "Score actuel: $score");

if ($score % 3 == 0) {
$randomComment = $commentary[array_rand($commentary)];
sendEvent('commentary', $randomComment);
}

sleep(5);
}
?>

Ce script envoie un événement 'score' toutes les 5 secondes, et un événement 'commentary' toutes les 15 secondes (quand le score est divisible par 3).

Tableau des méthodes

Voici un tableau récapitulatif des méthodes clés que nous avons utilisées :

Méthode	Description
new EventSource(url)	Crée une nouvelle connexion vers le serveur
EventSource.onmessage	Gère les messages sans un nom d'événement spécifique
EventSource.addEventListener(event, callback)	Gère les messages avec un nom d'événement spécifique
EventSource.onerror	Gère toute erreur dans la connexion

Conclusion

Et voilà ! Nous avons couvert les bases des Événements envoyés par le serveur, de la configuration du code côté client à la création d'un serveur qui envoie des mises à jour. Souviens-toi, SSE est un outil puissant pour créer des applications web en temps réel, mais c'est une communication unidirectionnelle. Si tu as besoin de communication bidirectionnelle, tu pourrais vouloir te pencher vers les WebSockets à l'avenir.

Comme pour tout concept de programmation, le meilleur moyen d'apprendre est de faire. Essaye de créer ton propre application SSE - peut-être un système de chat en direct ou un indicateur de cours de bourse. Les possibilités sont infinies !

Bonne programmation, futurs développeurs ! Souviens-toi, chaque expert a déjà été un débutant, donc ne te décourage pas si les choses ne se mettent pas en place immédiatement. Continue à pratiquer, et tu deviendras un pro en un rien de temps !

Credits: Image by storyset