Derniers tutoriels de développement web

HTML5 serveur-événements envoyés


Événements serveur-Sent permettent une page Web pour obtenir des mises à jour à partir d'un serveur.


Événements serveur-Sent - One Way Messaging

Un événement envoyé sur le serveur est lorsqu'une page Web est automatiquement mises à jour à partir d'un serveur.

Cela a également été possible avant, mais la page Web devrait demander si des mises à jour sont disponibles. Avec les événements envoyés par le serveur, les mises à jour sont automatiquement.

Exemples: Facebook/Twitter mises à jour, les mises à jour des prix des actions, des nouvelles RSS, les résultats sportifs, etc.


Support du navigateur

Les chiffres du tableau indiquent la première version du navigateur qui supporte entièrement les événements envoyés par le serveur.

API
SSE 6.0 Non supporté 6.0 5.0 11.5

Recevoir Sent-serveur notifications d'événements

Le EventSource objet est utilisé pour recevoir les notifications d'événement envoyé par le serveur:

Exemple

var source = new EventSource("demo_sse.php");
source.onmessage = function(event) {
    document.getElementById("result").innerHTML += event.data + "<br>";
};
Essayez vous - même »

Exemple expliqué:

  • Créer un nouveau EventSource objet et spécifier l'URL de la page d' envoyer les mises à jour (in this example "demo_sse.php")
  • Chaque fois qu'une mise à jour est reçue, le onmessage événement se produit
  • Lorsqu'un onmessage événement se produit, mettre les données reçues dans l'élément avec id="result"

Vérifiez les événements serveur Sent soutien

Dans le tryit exemple ci - dessus , il y avait quelques lignes de code supplémentaires pour vérifier le soutien du navigateur pour les événements envoyés par le serveur:

if(typeof(EventSource) !== "undefined") {
    // Yes! Server-sent events support!
    // Some code.....
} else {
    // Sorry! No server-sent events support..
}

Côté serveur Exemple de code

Pour l'exemple ci-dessus fonctionne, vous avez besoin d'un serveur capable d'envoyer des mises à jour de données (comme PHP ou ASP).

La syntaxe de flux d'événements côté serveur est simple. Réglez le "Content-Type" tête à "text/event-stream" . Maintenant, vous pouvez commencer à envoyer des flux d'événements.

Code en PHP (demo_sse.php) :

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

$time = date('r');
echo "data: The server time is: {$time}\n\n";
flush();
?>

Code dans ASP (VB) (demo_sse.asp) :

<%
Response.ContentType = "text/event-stream"
Response.Expires = -1
Response.Write("data: The server time is: " & now())
Response.Flush()
%>

Code explique:

  • Réglez le "Content-Type" tête à "text/event-stream"
  • Spécifiez que la page ne doit pas mettre en cache
  • Sortie les données à envoyer ( Always start with "data: ")
  • Purger les données de sortie vers la page web

L'objet EventSource

Dans les exemples ci-dessus, nous avons utilisé l'événement onmessage pour obtenir des messages. Mais d'autres événements sont également disponibles:

Événements La description
onopen Lorsqu'une connexion au serveur est ouvert
onmessage Lorsqu'un message est reçu
onerror Lorsqu'une erreur se produit