HTML SSE API
เหตุการณ์ที่เซิร์ฟเวอร์ส่ง (SSE) อนุญาตให้หน้าเว็บรับการอัปเดตจากเซิร์ฟเวอร์
กิจกรรมที่เซิร์ฟเวอร์ส่ง - การส่งข้อความทางเดียว
เหตุการณ์ที่เซิร์ฟเวอร์ส่งคือเมื่อหน้าเว็บได้รับการอัปเดตจากเซิร์ฟเวอร์โดยอัตโนมัติ
สิ่งนี้ก็เป็นไปได้มาก่อนเช่นกัน แต่หน้าเว็บจะต้องถามว่ามีการอัปเดตใด ๆ หรือไม่ ด้วยเหตุการณ์ที่เซิร์ฟเวอร์ส่ง การอัปเดตจะมาโดยอัตโนมัติ
ตัวอย่าง: การอัปเดต Facebook/Twitter การอัปเดตราคาหุ้น ฟีดข่าว ผลกีฬา ฯลฯ
รองรับเบราว์เซอร์
ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่สนับสนุนเหตุการณ์ที่เซิร์ฟเวอร์ส่งอย่างเต็มที่
| API | |||||
|---|---|---|---|---|---|
| SSE | 6.0 | 79.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 ของหน้าที่ส่งการอัปเดต (ในตัวอย่างนี้ "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)
ไวยากรณ์สตรีมเหตุการณ์ฝั่งเซิร์ฟเวอร์นั้นเรียบง่าย ตั้งค่าส่วนหัว "ประเภทเนื้อหา" เป็น "ข้อความ/สตรีมเหตุการณ์" ตอนนี้คุณสามารถเริ่มส่งสตรีมกิจกรรมได้
รหัสใน 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()
%>
รหัสอธิบาย:
- ตั้งค่าส่วนหัว "ประเภทเนื้อหา" เป็น "ข้อความ/สตรีมเหตุการณ์"
- ระบุว่าหน้าไม่ควรแคช
- ส่งออกข้อมูลที่จะส่ง ( เริ่มต้นด้วย "data: " เสมอ )
- ล้างข้อมูลเอาท์พุตกลับไปที่หน้าเว็บ
วัตถุที่มาของเหตุการณ์
ในตัวอย่างข้างต้น เราใช้เหตุการณ์ onmessage เพื่อรับข้อความ แต่ยังมีกิจกรรมอื่นๆ:
| Events | Description |
|---|---|
| onopen | When a connection to the server is opened |
| onmessage | When a message is received |
| onerror | When an error occurs |