เหตุการณ์เซิร์ฟเวอร์ส่งช่วยให้หน้าเว็บที่ได้รับการปรับปรุงจากเซิร์ฟเวอร์
เซิร์ฟเวอร์ส่งกิจกรรม - One Way การส่งข้อความ
เหตุการณ์เซิร์ฟเวอร์ส่งคือเมื่อหน้าเว็บโดยอัตโนมัติได้รับการอัปเดตจากเซิร์ฟเวอร์
นี่ก็เป็นไปได้ก่อน แต่หน้าเว็บจะต้องถามว่าการปรับปรุงใด ๆ ที่มีอยู่ กับเหตุการณ์เซิร์ฟเวอร์ส่งการปรับปรุงมาโดยอัตโนมัติ
ตัวอย่าง: Facebook/Twitter ปรับปรุงปรับปรุงที่ราคาหุ้นของฟีดข่าวผลกีฬาอื่น ๆ
สนับสนุนเบราว์เซอร์
ตัวเลขในตารางระบุราว์เซอร์รุ่นแรกที่สนับสนุนอย่างเต็มที่เหตุการณ์เซิร์ฟเวอร์ส่ง
| API | |||||
|---|---|---|---|---|---|
| SSE | 6.0 | ได้รับการสนับสนุน | 6.0 | 5.0 | 11.5 |
รับการแจ้งเตือนเหตุการณ์เซิร์ฟเวอร์ส่ง
EventSource วัตถุที่ใช้ในการได้รับการแจ้งเตือนเหตุการณ์เซิร์ฟเวอร์ส่ง:
ตัวอย่าง
var source = new EventSource("demo_sse.php");
source.onmessage = function(event) {
document.getElementById("result").innerHTML += event.data + "<br>";
}; ลองตัวเอง» ตัวอย่างอธิบาย:
- สร้างใหม่ EventSource วัตถุและระบุ URL ของหน้าส่งการปรับปรุงที่ (in this example "demo_sse.php")
- เวลาการปรับปรุงที่ได้รับแต่ละ onmessage เหตุการณ์เกิดขึ้น
- เมื่อ onmessage เหตุการณ์เกิดขึ้นจะนำข้อมูลที่ได้รับเข้าไปในองค์ประกอบที่มี id="result"
ตรวจสอบเซิร์ฟเวอร์ส่งการสนับสนุนกิจกรรม
ใน tryit ตัวอย่างข้างต้นมีบางสายพิเศษของรหัสที่จะตรวจสอบการสนับสนุนเบราว์เซอร์สำหรับเหตุการณ์เซิร์ฟเวอร์ส่ง:
if(typeof(EventSource) !== "undefined") {
// Yes! Server-sent events support!
// Some code.....
} else {
// Sorry! No server-sent events support..
}
ฝั่งเซิร์ฟเวอร์ตัวอย่างรหัส
สำหรับตัวอย่างข้างต้นในการทำงานที่คุณต้องการเซิร์ฟเวอร์ที่มีความสามารถในการส่งการอัปเดตข้อมูล (เช่น 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"
- ระบุว่าหน้าไม่ควรแคช
- ส่งออกข้อมูลที่จะส่ง ( Always start with "data: ")
- ล้างข้อมูลออกกลับไปที่หน้าเว็บ
วัตถุ EventSource
ในตัวอย่างข้างต้นเราใช้เหตุการณ์ OnMessage ที่จะได้รับข้อความ แต่กิจกรรมอื่น ๆ นอกจากนี้ยังมี:
| เหตุการณ์ที่เกิดขึ้น | ลักษณะ |
|---|---|
| onopen | เมื่อมีการเชื่อมต่อกับเซิร์ฟเวอร์ที่มีการเปิด |
| onmessage | เมื่อได้รับข้อความ |
| onerror | เมื่อเกิดข้อผิดพลาด |