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(&#39;Content-Type: text/event-stream&#39;); 
header(&#39;Cache-Control: no-cache&#39;); 
$time = date(&#39;r&#39;); 
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 que

Le 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(&#39;Content-Type: text/event-stream&#39;); 
header(&#39;Cache-Control: no-cache&#39;); 
$time = date(&#39;r&#39;); 
  $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.js

peut ê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-polyfill

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