Event ที่ส่งมาทางเซิร์ฟเวอร์ ของ HTML
- หน้าก่อนหน้า Web Worker HTML5
- หน้าต่อไป ตัวอย่าง HTML
Event ที่ส่งมาทางเซิร์ฟเวอร์ อนุญาตให้เว็บได้รับการปรับปรุงจากเซิร์ฟเวอร์
Event ที่ส่งมาทางเซิร์ฟเวอร์ - การส่งข้อความทางเดียว
Event ที่ส่งมาทางเซิร์ฟเวอร์เป็นการที่เว็บได้รับการปรับปรุงโดยอัตโนมัติ
ก่อนหน้านี้ก็เคยทำได้แล้ว ในกรณีที่เว็บจะต้องถามว่ามีการปรับปรุงที่สามารถใช้ได้หรือไม่ ผ่าน Event ที่ส่งมาทางเซิร์ฟเวอร์ การปรับปรุงจะมาถึงโดยอัตโนมัติ
เช่น: การปรับปรุงของ Facebook/Twitter หรือ การปรับปรุงราคาหุ้น หรือ บล็อกใหม่ หรือ ผลการแข่งขัน และอื่นๆ
การสนับสนุนของเบราเซอร์
ตัวเลขในตารางนี้บอกว่าเบราเซอร์แรกที่สนับสนุน Event ที่ส่งมาทางเซิร์ฟเวอร์ได้ทั้งหมด
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 ของ Event จะนำข้อมูลที่ได้รับมาเอาไปใส่ในองค์ประกอบที่มี id ว่า "result"
ตรวจสอบการสนับสนุน Server-Sent 事件
ในตัวอย่าง TIY ของเรา เราเขียนโค้ดเพิ่มเติมเพื่อตรวจสอบการสนับสนุน EventSource ของเบราเซอร์ที่ส่งมาจากเซิร์ฟเวอร์:
if(typeof(EventSource) !== "undefined") { // ใช่แล้ว! สนับสนุน EventSource ที่ส่งมาจากเซิร์ฟเวอร์! // บางส่วนของโค้ด..... } // ขอโทษ! ไม่สนับสนุน EventSource ที่ส่งมาจากเซิร์ฟเวอร์! }
ตัวอย่างเว็บเซิร์ฟเวอร์
เพื่อที่จะให้ที่สามารถปฏิบัติการเรียกใช้ตัวอย่างดังกล่าวได้ คุณจำเป็นต้องสามารถส่งข้อมูลปรับปรุงไปยังเซิร์ฟเวอร์ (เช่น PHP หรือ ASP) ได้
การใช้งานสyntax ของสายเหตุการณ์บนเซิร์ฟเวอร์เป็นที่ง่าย โปรดตั้งค่าหัวข้อ '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 | เมื่อเกิดข้อผิดพลาด |
- หน้าก่อนหน้า Web Worker HTML5
- หน้าต่อไป ตัวอย่าง HTML