Thứ Tư, 25 tháng 12, 2013
HTML5 Sự kiện Server gửi
HTML5 Server-Sent Sự kiện cho phép một trang web để có được thông tin cập nhật từ một máy chủ.
Sự kiện máy chủ gửi - Một chiều nhắn
Một sự kiện máy chủ gửi là khi một trang web sẽ tự động được cập nhật từ một máy chủ.
Đây cũng là có thể trước đó, nhưng các trang web sẽ phải yêu cầu nếu có bản cập nhật đã có sẵn. Với các sự kiện máy chủ gửi đi, các bản cập nhật tự động đến.
Ví dụ: cập nhật Facebook / Twitter, cập nhật giá cổ phiếu, nguồn cấp dữ liệu tin tức, kết quả thể thao, vv
Hỗ trợ trình duyệt
Sự kiện máy chủ gửi được hỗ trợ trong tất cả các trình duyệt chính, ngoại trừ Internet Explorer.
Nhận Server gửi thông báo tổ chức sự kiện
Đối tượng EventSource được sử dụng để nhận được thông báo sự kiện máy chủ gửi:
Ví dụ
<!DOCTYPE html>
<html>
<body>
<h1>Getting server updates</h1>
<div id="result"></div>
<script>
if(typeof(EventSource)!=="undefined")
{
var source=new EventSource("demo_sse.php");
source.onmessage=function(event)
{
document.getElementById("result").innerHTML+=event.data + "<br>";
};
}
else
{
document.getElementById("result").innerHTML="Sorry, your browser does not support server-sent events...";
}
</script>
</body>
</html>
Thử nó cho mình »
Ví dụ giải thích:
- Tạo một đối tượng mới EventSource, và chỉ định các URL của trang gửi các bản cập nhật (trong ví dụ này "demo_sse.php")
- Mỗi lần một bản cập nhật nhận được, các sự kiện xảy ra onmessage
- Khi một sự kiện xảy ra onmessage, đặt các dữ liệu nhận được vào các phần tử với id = "kết quả"
Kiểm tra sự kiện Server-Sent Hỗ trợ
Trong ví dụ TryIt trên có một số dòng thêm mã để kiểm tra trình duyệt hỗ trợ cho các sự kiện máy chủ gửi:
if(typeof(EventSource)!=="undefined")
{
// Yes! Server-sent events support!
// Some code.....
}
else
{
// Sorry! No server-sent events support..
}
{
// Yes! Server-sent events support!
// Some code.....
}
else
{
// Sorry! No server-sent events support..
}
Server-Side Mã số Ví dụ
Đối với ví dụ trên để làm việc, bạn cần một máy chủ có khả năng gửi thông tin cập nhật dữ liệu (như PHP hay ASP).
Cú pháp dòng sự kiện phía máy chủ là đơn giản. Thiết lập "Content-Type" tiêu đề "text / sự kiện dòng". Bây giờ bạn có thể bắt đầu gửi dò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();
?>
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: " & now())
Response.Flush()
%>
Response.ContentType="text/event-stream"
Response.Expires=-1
Response.Write("data: " & now())
Response.Flush()
%>
Mã giải thích:
- Thiết lập "Content-Type" tiêu đề "text / sự kiện dòng"
- Xác định rằng trang không nên bộ nhớ cache
- Xuất dữ liệu để gửi ( Luôn luôn bắt đầu với "dữ liệu:")
- Tuôn ra những dữ liệu đầu ra trở lại trang web
Các đối tượng EventSource
Trong ví dụ trên, chúng tôi sử dụng các sự kiện onmessage để nhận được tin nhắn. Nhưng sự kiện khác cũng có sẵn:
| Events | Description |
|---|---|
| onopen | When a connection to the server is opened |
| onmessage | When a message is received |
| onerror | When an error occurs |
Đăng ký:
Đăng Nhận xét (Atom)
Không có nhận xét nào:
Đăng nhận xét