HTML5ESS


HTML5 Événements envoyés par le serveur

Les événements HTML5 envoyés par le serveur permettent aux pages Web d'obtenir des mises à jour du serveur.

É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.

Prise en charge des navigateurs

Internet Explorer

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 :

Instance

<!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>

Exécuter l'instance»

Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne

Analyse de l'instance :

  • Création d'un nouvel objet EventSource, puis précisez l'URL de la page pour envoyer la mise à jour (dans ce cas "demo_sse.php")

  • À chaque réception d'une mise à jour , l'événement onmessage se produira

  • Lorsque l'événement onmessage se produira, poussez les données reçues dans l'élément avec l'identifiant "result"

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 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
// Certains codes....
}
autre
{
/ / Le navigateur ne prend pas en charge Server-Sent..
}

Exemple de code côté serveur

Pour que l'exemple ci-dessus fonctionne, vous aurez également besoin d'un serveur capable d'envoyer des mises à jour de données (comme 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.

Instance

<?php
en-tête('Content-Type : texte/ event-stream');
en-tête('Cache-Control : pas de cache' );

$time = date('r');
echo "data : L'heure du serveur est : {$time} nn";
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écifiez que la page n'est pas mise 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 l'exemple ci-dessus, nous utilisons l'événement onmessage pour obtenir le message. Cependant, d'autres événements peuvent également être utilisés :

事件描述
onopen当通往服务器的连接被打开
onmessage当接收到消息
onerror当发生错误