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 :

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

Événement

<🎜><🎜>Description<🎜><🎜>

onopen

Lorsque la connexion au serveur est ouverte

onmessage

Lorsqu'un message est reçu

erreur

Lorsqu'une erreur se produit

<🎜><🎜><🎜>

Formation continue

nouveau fichier

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

soumettre Réinitialiser le code

Opération automatique

HTML5ESS

ÉlémentaireTutoriel de site Web d'imitation d'entreprise Imperial CMS

ÉlémentaireLes débutants sans aucune base dans WordPress créent des blogs personnels et des sites Web d'entreprise

ÉlémentaireVidéo d'instructions sur la création de sites Web à base zéro Ultimate CMS

ÉlémentaireProjet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]

IntermédiaireVue3.0 de 0 pour créer une pratique de projet de système de gestion backend universel

ÉlémentaireCours frontal base zéro [Vue apprentissage avancé et application pratique]

ÉlémentaireTutoriel WEB front-end [HTML5+CSS3+JS]

ÉlémentaireIntroduction rapide à apipost

IntermédiaireTutoriel pratique Vue3+TypeScript au niveau de l'entreprise

ÉlémentaireParlons brièvement de la création d'une entreprise en PHP

IntermédiaireProjet de commerce électronique VUE (combat réel de projet double front-end et back-end)

ÉlémentaireApplication pratique Apipost [api, interface, tests automatisés, mock]