Événements envoyés par le serveur HTML5
Événements HTML5 envoyés par le serveur
L'événement HTML5 envoyé par le serveur permet aux pages Web d'obtenir des mises à jour du serveur.
Prise en charge des navigateurs
Tous les principaux navigateurs prennent en charge les événements envoyés par le serveur, à l'exception d'Internet Explorer.
Événement Server-Sent - messagerie unidirectionnelle
L'événement Server-Sent fait référence à la page Web qui reçoit automatiquement les mises à jour du serveur.
Cela était également possible auparavant, si la page Web devait demander si une mise à jour était disponible. En envoyant des événements via le serveur, les mises à jour peuvent arriver automatiquement.
Exemples : mises à jour Facebook/Twitter, mises à jour de valorisation, nouveaux articles de blog, résultats d'événements, etc.
Récupérez les données envoyées par le serveur côté client et mettez à jour
<!DOCTYPE html>
<html>
<body>
<h1>获得服务器更新</h1>
<div id="result">
</div>
<script>if(typeof(EventSource)!=="undefined"){
var source=new EventSource("http://www.w3school.com.cn/example/html5/demo_sse.php");
source.onmessage=function(event)
{
document.getElementById("result").innerHTML+=event.data + "<br />";
};
}else{
document.getElementById("result").innerHTML="Sorry, your browser does not support server-sent events...";}
</script>
</body>
</html>Le code du serveur de support (PHP ou ASP) est le suivant :
<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
$time = date('r');
echo "data: The server time is: {$time}\n\n";
flush();
?>Explication du code :
Définissez l'en-tête "Content-Type" sur "text/event-stream"
Spécifiez que la page n'est pas mise en cache
Sortez la date d'envoi (en commençant toujours par "data : ")
Actualiser les données de sortie sur la page Web
Détecter la prise en charge des événements envoyés par le serveur
Dans l'exemple suivant, nous avons écrit un morceau de code supplémentaire pour détecter l'événement envoyé par le serveur. Prise en charge du navigateur :
if(typeof(EventSource)!=="undefined")
{
// 浏览器支持 Server-Sent
// 一些代码.....
}
else
{
// 浏览器不支持 Server-Sent..
}Exemple de code côté serveur
Pour que l'exemple ci-dessus fonctionne, vous aurez également besoin d'un serveur capable de envoyer des mises à jour de données (telles que PHP et ASP).
La syntaxe du streaming d'événements côté serveur est très simple. Définissez l'en-tête "Content-Type" sur "text/event-stream". Vous pouvez maintenant commencer à envoyer le flux d'événements.
Exemple
<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
$time = date('r');
echo "data: The server time is: {$time}\n\n";flush();
?>
ASP 代码 (VB) (demo_sse.asp):
<%
Response.ContentType="text/event-stream"
Response.Expires=-1
Response.Write("data: " & now())
Response.Flush()
%>Explication du code :
Définissez l'en-tête "Content-Type" sur "text/event-stream"
Spécifie que la page sera ne pas être mis en cache
Date d'envoi de la sortie (commence toujours par "data:")
Actualiser les données de sortie sur la page Web
Objet EventSource
Dans Dans l'exemple ci-dessus, nous utilisons l'événement onmessage pour obtenir des messages. Cependant, d'autres événements peuvent être utilisés :
Description de l'événement
onopen Lorsque la connexion au serveur est ouverte
onmessage Lorsque le message est reçu
onerror Lorsqu'une erreur se produit
![Projet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Cours frontal base zéro [Vue apprentissage avancé et application pratique]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![Tutoriel WEB front-end [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Application pratique Apipost [api, interface, tests automatisés, mock]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
