Maison > Article > interface Web > Explication détaillée de l'événement d'envoi du serveur sse de H5 EventSource
Cette fois je vais vous apporter une explication détaillée de l'EventSource envoyé par le serveur sse en H5 Quelles sont les précautions de l'EventSource envoyé par le serveur sse Ce qui suit est un cas pratique, allons-y. jetez un oeil.
Avant-propos
J'ai parlé de l'écran Big Data dans l'article précédent, et les données qu'il contient sont constamment mises à jour. Il existe également des données boursières qui sont mises à jour de temps en temps, les mises à jour Facebook/Twitter, les mises à jour de valorisation, les nouveaux articles de blog, les résultats d'événements, etc., nécessitent tous une mise à jour des données de temps en temps. Avant, nous demandions généralement au serveur si des données pouvaient être mises à jour. HTML5 fournit la méthode Server-Sent Events, qui envoie des événements via le serveur et les mises à jour peuvent arriver automatiquement.
Utilisation des événements envoyés par le serveur
Les événements envoyés par le serveur sont très simples à utiliser. Il accepte les messages côté serveur via l'objet EventSource. Il y a les événements suivants :
onopen Lorsque la connexion au serveur est ouverte
onmessage Lorsqu'un message est reçu
onerror Lorsqu'une erreur se produit
Détecter la prise en charge des événements envoyés par le serveur
if(typeof(EventSource)!=="undefined") { // 浏览器支持 Server-Sent // 一些代码..... } else { // 浏览器不支持 Server-Sent.. }
Recevoir le serveur -Notification d'événement envoyé
var source=new EventSource("haorooms_sse.php"); source.onmessage=function(event) { document.getElementById("result").innerHTML+=event.data + "<br>"; };
Exemple de code côté serveur
<?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(); ?>
Les événements de lien et les événements d'erreur sont ajoutés
if(typeof(EventSource)!=="undefined") { var source=new EventSource("server.php"); source.onopen=function() { console.log("Connection to server opened."); }; source.onmessage=function(event) { document.getElementById("result").innerHTML+=event.data + "<br>"; }; source.onerror=function() { console.log("EventSource failed."); }; } else { document.getElementById("result").innerHTML="抱歉,你的浏览器不支持 server-sent 事件..."; }
Nous constaterons que la console imprime comme suit :
Continuez à saisir les liens et les erreurs. Pour plus de détails, veuillez cliquer sur
C'est parce queLe code php n'est qu'un simple écho et ne s'affiche pas en continu. Nous améliorons le code php ci-dessus comme suit
<?php header('Content-Type: text/event-stream'); header('Cache-Control: no-cache'); $time = date('r'); $i = 0; $c = $i + 100; while (++$i < $c) { echo "id: " . $i . "\n"; echo "data: " . $time. ";\n\n"; ob_flush(); flush(); sleep(1); } ?>et il n'y aura pas d'erreurs continues !
Compatible avec le navigateur IESolution
Nous savons que le navigateur IE ne supporte pas EventSource, il existe les solutions suivantes :L'introduction de
eventsource.min.jspeut être une solution parfaite. Vous pouvez vérifier son adresse github :
https://github.com/Yaffle/EventSource Il est également très pratique de l'utiliser avec nodejs. Juste
npm install event-source-polyfillje crois que vous l'avez. maîtrisé la méthode après avoir lu le cas dans cet article, pour un contenu plus passionnant, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php ! Lecture recommandée :
H5 implémente une animation d'horloge évolutive
Comment utiliser les attributs de données et l'ensemble de données de préfixe
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!