English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
HTML5 Événements envoyés par le serveur (server-sent event) permet au site web d'obtenir les données les plus récentes provenant du serveur sans actualiser la page, permettant ainsi de récupérer des données dynamiques en temps réel.
Server-Les événements Sent désignent l'obtention automatique de mises à jour de données provenant du serveur par le biais du site web.
Les méthodes traditionnelles pour obtenir les données les plus récentes du serveur consistaient à rafraîchir ou à utiliser des timers pour déclencher, mais maintenant, grâce aux événements envoyés par le serveur Server-En envoyant un événement Sent, vous pouvez obtenir automatiquement les données les plus récentes.
Exemple : Facebook/Mises à jour Twitter, cours de bourse, Weibo, résultats des compétitions sportives, messages dynamiques, commentaires, etc.
Tous les navigateurs populaires prennent en charge les événements envoyés par le serveur, à l'exception d'Internet Explorer.
L'objet EventSource est utilisé pour recevoir des notifications d'événements envoyés par le serveur :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>基础教程网(oldtoolbag.com)</title>
</head>
<body>
<h1>Obtenir les données les plus récentes du serveur</h1>
<div id="result"></div>
<script>
if(typeof(EventSource) !== "undefined")
{
var source=new EventSource("demo-sse.php");
source.onmessage=function(event)
{
document.getElementById("result").innerHTML+=event.data + "<br>";
};
}
else
{
document.getElementById("result").innerHTML="Désolé, votre navigateur ne prend pas en charge Server-sent événement...";
}
</script>
</body>
</html>Voyons voir ‹/›Analyse de l'exemple :
Créez un nouveau objet EventSource, puis définissez l'URL de la page envoyant les mises à jour (dans cet exemple, "demo_sse.php")
Un événement onmessage se produit à chaque réception de mise à jour
Lorsqu'un événement onmessage se produit, mettez les données reçues dans l'élément d'ID "result"
Dans l'exemple suivant, nous avons écrit un code supplémentaire pour détecter la prise en charge du navigateur pour les événements envoyés par le serveur :
if(typeof(EventSource) !== "undefined")
{
// Le navigateur prend en charge Server-Sent
// Some code.....
}
else
{
// Le navigateur ne prend pas en charge Server-Sent..
}Pour que l'exemple ci-dessus puisse fonctionner, vous avez besoin d'un serveur capable d'envoyer des mises à jour de données (par exemple PHP et ASP).
La syntaxe des flux d'événements côté serveur est très simple. Mettez "Content-Type" en-tête réglé sur "text/event-stream". Maintenant, vous pouvez commencer à envoyer les flux d'événements.
<?php
header(&39;Content-Type: text/event-stream&39;);
header(&39;Cache-Control: no-cache&39;);
$time = date(&39;r&39;);
echo "data: The server current time: {$time}\n\n";
flush();
?>Code ASP (VB) (demo_sse.asp):
<%
Response.ContentType="text/event-stream"
Response.Expires=-1
Response.Write("data: The server current time" & now())
Response.Flush()
%>Explication du code:
Mettre l'en-tête "Content-Type" réglé sur "text/event-stream"
Ne pas mettre en cache la page
Date d'envoi de la sortie (toujours commence par "data: ")
Affichage des données de rafraîchissement de la page web
Dans l'exemple ci-dessus, nous utilisons l'événement onmessage pour obtenir le message. Cependant, d'autres événements peuvent être utilisés :
| Événement | Description |
| onopen | Lorsque la connexion vers le serveur est ouverte |
| onmessage | Lorsque le message est reçu |
| onerror | Lorsqu'une erreur se produit |