Maison > interface Web > Tutoriel H5 > le corps du texte

Explication détaillée de l'événement d'envoi du serveur sse de H5 EventSource

php中世界最好的语言
Libérer: 2018-03-27 10:47:54
original
3262 Les gens l'ont consulté

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..
}
Copier après la connexion

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>";
};
Copier après la connexion

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(); 
?>
Copier après la connexion

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 事件...";
}
Copier après la connexion

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);
  }
?>
Copier après la connexion
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
Copier après la connexion
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
Copier après la connexion
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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal