Event ที่ส่งมาทางเซิร์ฟเวอร์ ของ 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 เมื่อเกิดข้อผิดพลาด