Événements envo...LOGIN

Événements envoyés par le serveur HTML5

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

Ce qui suit est un exemple de code sur W3School, comprenant du code JavaScript côté client et du code PHP côté serveur :

var source = new EventSource("demo_sse.php");

source.onmessage = function(event) {

Document.getElementById("result").innerHTML += event.data + "< ; br />";

};

Ce code récupère en continu les données de demo_sse.php et affiche le résultat vers l'ID de dans le div de résultat.

<?php

header('Content-Type : texte/event-stream');

header('Cache-Control: no-cache');

$time = date('r');

echo "data : L'heure du serveur est : {$time}nn";

flush();

?>

Ce code renvoie l'heure actuelle du serveur au client. Enfin, des résultats similaires aux suivants sont affichés sur la page client :

L'heure du serveur est : Fri, 29 août 2016 02:03:21 +0800

L'heure du serveur est : Fri, 29 août 2016 02:03:24 +0800

L'heure du serveur est : vendredi 29 août 2016 02:03:27 +0800

L'heure du serveur est : vendredi 29 août 2016 02 : 03:30 +0800

L'heure du serveur est : vendredi 29 août 2016 02:03:33 +0800

...

Recevoir la notification d'événement envoyée par le serveur

L'objet EventSource est utilisé pour recevoir la notification d'événement envoyée par le serveur :

Instance

var source=new EventSource("demo_sse.php");
source.onmessage=function(event)
{
Document.getElementById("result").innerHTML+=event.data + " <br> ";
};


Exemple d'analyse :

Créez un nouvel objet EventSource, puis spécifiez l'URL de la page pour envoyer la mise à jour (dans ce cas, "demo_sse.php")

Chaque fois qu'une mise à jour est reçue, l'événement onmessage se produira

Lorsque l'événement onmessage se produit, transférez les données reçues dans l'élément portant l'identifiant "result"

Détecter la prise en charge de l'événement envoyé par le serveur

Dans l'exemple suivant, nous avons écrit un morceau de code supplémentaire pour détecter la prise en charge par le navigateur des événements envoyés par le serveur :

if(typeof(EventSource)!=="undefined")
{
// Le navigateur prend en charge 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 aurez également besoin d'un serveur capable d'envoyer des mises à jour de données (telles que 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.

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




section suivante
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>服务器推送SSE</title> <script type="text/javascript"> $(document).ready(function(){ //检查浏览器支持情况 if(typeof(EventSource)!=="undefined") { //定义个对象,用于初始化事件源,这里用c.php这个页面实现 var eSource = new EventSource("c.php"); //detect message receipt eSource.onmessage = function(event) { //将收到的数据展示到页面的ID=content元素中 document.getElementById("content").innerHTML += event.data+'<br />'; }; }else { document.getElementById("content").innerHTML="没有收到服务端Server-Sent数据."; } }); </script> </head> <body> <div id="content"></div> </body> <p>服务器端c.php 页面写在HTML外部</p> </html> <?php // 要声明头部 header("Content-Type: text/event-stream"); header("Cache-Control: no-cache"); // 直接打印当前时间 echo "data: ".date('Y-m-d H:i:s').PHP_EOL; flush(); ?>
soumettreRéinitialiser le code
chapitredidacticiel