Γεγονότα Server-Sent HTML

Τα γεγονότα Server-Sent επιτρέπουν στην ιστοσελίδα να λαμβάνει ενημερώσεις από τον διακομιστή.

Γεγονότα Server-Sent - Μηδενιστική Μεταφορά

Τα γεγονότα Server-Sent αναφέρονται στην αυτόματη λήψη ενημερώσεων από τον διακομιστή από την ιστοσελίδα.

Πριν από αυτό, ήταν δυνατό να γίνει το ίδιο, προϋποθέτοντας ότι η ιστοσελίδα θα πρέπει να ρωτήσει αν υπάρχουν διαθέσιμες ενημερώσεις. Με τα γεγονότα Server-Sent, οι ενημερώσεις μπορούν να φτάσουν αυτόματα.

Παράδειγμα: Ενημερώσεις του Facebook/Twitter, ενημερώσεις τιμών μετοχών, νέα άρθρα, αποτελέσματα αγώνων, κ.λπ.

Υποστήριξη περιηγητή

Τα αριθμήματα στη διάταξη δείχνουν τον πρώτο περιηγητή που υποστηρίζει πλήρως τα γεγονότα server-sent.

API
SSE 6.0 Μη υποστηριζόμενο 6.0 5.0 11.5

Λήψη ειδοποιήσεων Server-Sent γεγονότων

Το αντικείμενο EventSource χρησιμοποιείται για να λαμβάνει ειδοποιήσεις γεγονότων από τον διακομιστή:

Παράδειγμα

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

Δοκιμάστε το προσωπικά

Παράδειγμα εξήγησης:

  • Δημιουργείται ένα νέο αντικείμενο EventSource και καθορίζεται η URL της σελίδας που αποστέλλει τις ενημερώσεις (στο παράδειγμα είναι "demo_sse.php")
  • Κάθε φορά που λαμβάνεται μια ενημέρωση, συμβαίνει το γεγονός onmessage
  • Όταν συμβαίνει το γεγονός onmessage, το δεδομένο που έχει λάβει εισάγεται στο στοιχείο με το id "result"

Έλεγχος υποστήριξης για Server-Sent γεγονότα

Στο παράδειγμα του TIY, έγραψα έναν επιπλέον κώδικα για να ελέγξω την υποστήριξη του διακομιστή για την αποστολή γεγονότων από τον浏览器:

if(typeof(EventSource) !== "undefined") {
    // Ναι! Υποστηρίζεται η αποστολή γεγονότων από τον διακομιστή!
    // Κάποιοι κώδικες.....
} else {
    // Συγγνώμη! Δεν υποστηρίζεται η αποστολή γεγονότων από τον διακομιστή!
}

Παράδειγμα κώδικα διακομιστή

Για να εκτελεστεί το παράδειγμα, χρειάζεστε έναν διακομιστή που μπορεί να στείλει ενημερώσεις δεδομένων (π.χ. PHP ή ASP).

Η σύνταξη της γλώσσας της πλευράς του διακομιστή για τα γεγονότα είναι πολύ απλή. Ρυθμίστε το κεφαλίδι "Content-Type" σε "text/event-stream". Τώρα, μπορείτε να ξεκινήσετε να στείλετε τη ροή γεγονότων.

Κώδικας στο 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();
?>

Κώδικας στο ASP (VB) (demo_sse.asp):

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

Αναλυτική Επεξήγηση Κώδικα:

  • Ρυθμίστε το κεφαλίδι "Content-Type" σε "text/event-stream"
  • Καθορίζετε ότι η σελίδα δεν πρέπει να αποθηκεύεται στη μνήμη
  • Ορίζετε την ημερομηνία που πρέπει να σταλεί (τα δεδομένα πρέπει να ξεκινούν με "data: ")
  • Εμφάνιση δεδομένων ανανέωσης της ιστοσελίδας

Όνειρο Σourse Object

Στο παραπάνω παράδειγμα, χρησιμοποιούμε το γεγονός onmessage για να πάρουμε το μήνυμα. Αλλά μπορείτε να χρησιμοποιήσετε και άλλα γεγονότα:

Εγενές Περιγραφή
onopen Όταν ανοίγει η σύνδεση προς τον διακομιστή
onmessage Όταν λαμβάνεται μήνυμα
onerror Όταν γίνεται σφάλμα