HTML5ESS
É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.
Événement envoyé par le serveur - 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.
Prise en charge du navigateur
Les événements envoyés par le serveur sont pris en charge par tous les principaux navigateurs, à l'exception d'Internet Explorer.
Recevoir une notification d'événement envoyée par le serveur
L'objet EventSource est utilisé pour recevoir une notification d'événement envoyée par le serveur :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<h1>获取服务端更新数据</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="抱歉，你的浏览器不支持 server-sent 事件...";
}
</script>
</body>
</html> Code demo_sse.php
<?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();
?>Exécutez le programme et essayez-le
Exemple d'analyse :
Créez un nouvel objet EventSource , puis précisez d'envoyer les mises à jour L'URL de la page ("demo_sse.php" dans cet exemple)
Chaque fois qu'une mise à jour est reçue, l'événement onmessage se produira
Lorsque l'événement onmessage se produit, poussez les données reçues dans l'élément avec l'identifiant "result"
Détecter la prise en charge de l'événement envoyé par le serveur
Dans le Dans l'exemple suivant, nous avons écrit un paragraphe supplémentaire Code pour détecter la prise en charge du navigateur pour les événements envoyés par le serveur :
if(typeof(EventSource)!=="undefined")
{
// Prise en charge du navigateur Server-Sent
// Du code...
}
else
{
// Le navigateur ne prend pas en charge Server-Sent..
}
Exemple de code côté serveur
Pour que l'exemple ci-dessus fonctionne, vous devrez également être capable pour envoyer des mises à jour de données aux serveurs (tels 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();
?>Code 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 n'est pas mise en cache
Affiche la date d'envoi (en commençant toujours par "data: " )
Actualiser les données de sortie sur la page Web
Objet EventSource
Dans l'exemple ci-dessus, nous utilisons l'événement onmessage pour obtenir le message. Mais d'autres événements peuvent également être utilisés :
Événement | <🎜><🎜>Description<🎜><🎜> | ||||||||
| onopen | Lorsque la connexion au serveur est ouverte | ||||||||
| onmessage | Lorsqu'un message est reçu | ||||||||
| erreur | Lorsqu'une erreur se produit |
