Introduction à EventSource envoyé par le serveur sse en html5

Cet article présente principalement l'introduction d'EventSource des événements envoyés par le serveur sse en HTML5. Il a une certaine valeur de référence. Ceux qui sont intéressés peuvent en savoir plus

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 mises à jour de temps en temps, des mises à jour Facebook/Twitter, des mises à jour d'évaluation, de nouveaux articles de blog, des résultats d'événements, etc., qui nécessitent tous que les données soient mises à jour 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 une notification d'événement envoyée par le serveur

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(); 
?>

Ajoutez

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 事件...";
}

aux événements de lien et aux événements d'erreur. Nous trouverons cela. la console s'affiche 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 le fait. pas de sortie en continu. Nous mettons ce qui précède. Apportez les améliorations suivantes au code php

<?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 plus d'erreurs !

Solution compatible avec le navigateur IE

Nous savons que le navigateur IE ne supporte pas EventSource, il existe les solutions suivantes :

Introduction

eventsource.min.js

peut être parfaitement résolu. Vous pouvez vérifier son adresse github : https://github.com/Yaffle/EventSource Il est également très pratique de l'utiliser avec nodejs Just

npm install event-source-polyfill

.

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!