Comment utiliser le serveur h5 sse pour envoyer des événements EventSource

Cette fois, je vais vous montrer comment utiliser le serveur sse de h5 pour envoyer des événements EventSource, et quelles sont les précautions pour utiliser le serveur sse de h5 pour envoyer des événements EventSource. un cas pratique. Jetons un coup d’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

mises à jour de temps en temps. 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 EventSource

objet. Il existe 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

Prise en charge de la détection des événements envoyés par le serveur

if(typeof(EventSource)!=="undefined")
{
  // 浏览器支持 Server-Sent
  // 一些代码.....
}
else
{
// 浏览器不支持 Server-Sent..
}

Recevoir une notification d'événement envoyé par le serveur

var source=new EventSource("haorooms_sse.php");
source.onmessage=function(event)
{
    document.getElementById("result").innerHTML+=event.data + "<br>";
};

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

Des événements de lien et des é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 事件...";

Je pense que vous maîtrisez la méthode après avoir lu ces lignes cas, plus excitants. Veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Comment implémenter le tri par glisser-déplacer de la souris dans un tableau HTML

Comment résoudre divers problèmes de compatibilité ie6-ie10 problèmes

Comment formater les données json en html

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!