Sự kiện Server-Sent HTML

Sự kiện Server-Sent cho phép trang web nhận cập nhật từ máy chủ.

Sự kiện Server-Sent - Thông điệp Đi Chỉ Một Lượt

Sự kiện Server-Sent là trang web tự động nhận cập nhật từ máy chủ.

Trước đây cũng có thể thực hiện điều này, nhưng điều kiện là trang web phải hỏi xem có cập nhật可用 hay không. Bằng sự kiện Server-Sent, cập nhật có thể đến tự động.

Ví dụ: Cập nhật Facebook/Twitter, cập nhật giá cổ phiếu, bài viết mới, kết quả sự kiện, v.v.

Hỗ trợ trình duyệt

Số trong bảng chỉ ra trình duyệt đầu tiên hỗ trợ hoàn toàn sự kiện server-sent.

API
SSE 6.0 Không hỗ trợ 6.0 5.0 11.5

Nhận thông báo sự kiện Server-Sent

Đối tượng EventSource được sử dụng để nhận thông báo sự kiện gửi từ máy chủ:

Ví dụ

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

Thử ngay

Giải thích ví dụ:

  • Tạo một đối tượng EventSource mới, sau đó quy định URL của trang gửi cập nhật (trong ví dụ này là "demo_sse.php").
  • Mỗi khi nhận được một cập nhật, sự kiện onmessage sẽ xảy ra.
  • Khi sự kiện onmessage xảy ra, đẩy dữ liệu đã nhận vào phần tử có id là "result".

Kiểm tra hỗ trợ sự kiện Server-Sent

Trong ví dụ TIY, chúng tôi đã viết một đoạn mã bổ sung để kiểm tra hỗ trợ sự kiện gửi từ máy chủ của trình duyệt:

if(typeof(EventSource) !== "undefined") {
    // Đúng rồi! Hỗ trợ sự kiện gửi từ máy chủ!
    // Một số mã.....
}
    // XIN LỜI! Không hỗ trợ sự kiện gửi từ máy chủ!
}

Mã nguồn máy chủ

Để chạy ví dụ trên, bạn cần có một máy chủ gửi cập nhật dữ liệu (ví dụ: PHP hoặc ASP).

Cú pháp của luồng sự kiện máy chủ rất đơn giản. Hãy đặt tiêu đề "Content-Type" thành "text/event-stream". Bây giờ, bạn có thể bắt đầu gửi luồng sự kiện.

Mã trong 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();
?>

Mã trong ASP (VB) (demo_sse.asp):

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

Giải thích mã:

  • Đặt tiêu đề "Content-Type" thành "text/event-stream"
  • Định nghĩa không lưu trữ trang
  • Xuất ngày cần gửi (luôn bắt đầu bằng "data: ")
  • Xuất dữ liệu cho trang web làm mới

Đối tượng EventSource

Trong ví dụ trên, chúng ta sử dụng sự kiện onmessage để nhận thông điệp. Tuy nhiên, bạn cũng có thể sử dụng các sự kiện khác:

Sự kiện Mô tả
onopen Khi kết nối đến máy chủ được mở
onmessage Khi nhận được thông điệp
onerror Khi xảy ra lỗi