HTML Server-Sent συμβάντα

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

Server-Sent συμβάντα - One Way Messaging

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

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

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

Υποστήριξη browser

Τα αριθμήματα στη διάταξη δείχνουν τον πρώτο browser που υποστηρίζει πλήρως τα 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, γράψαμε επιπλέον κώδικα για να ελέγξουμε την υποστήριξη του browser για την αποστολή συμβάντων από τον διακομιστή:

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: ")
  • Αποστολή δεδομένων ανανέωσης στη σελίδα

Οντότητα EventSource

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

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