Maison > interface Web > tutoriel HTML > Comment utiliser le serveur h5 sse pour envoyer des événements EventSource

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

php中世界最好的语言
Libérer: 2018-01-19 09:55:49
original
2429 Les gens l'ont consulté

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


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


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();
?>
Copier après la connexion
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 事件...";
Copier après la connexion
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!

É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