Server-Sent 事件 HTML

Server-Sent 事件 อนุญาตให้หน้าเว็บรับข้อมูลปรับปรุงจากเซิร์ฟเวอร์

Server-Sent 事件 - สื่อสารทางหนึ่งทางเดียว

Server-Sent 事件 หมายถึงหน้าเว็บที่รับข้อมูลปรับปรุงโดยอัตโนมัติจากเซิร์ฟเวอร์

ก่อนหน้านี้ก็อาจทำได้ ก่อนที่หน้าเว็บจะต้องถามว่ามีการปรับปรุงที่สามารถใช้ได้หรือไม่ ผ่าน Server-Sent 事件 การปรับปรุงจะมาถึงอัตโนมัติ

เช่น: การปรับปรุงของ Facebook/Twitter การปรับปรุงหุ้นสินและราคาหุ้น บทความใหม่ ผลการแข่งขัน และอื่นๆ

การสนับสนุนของเบราเซอร์

ตัวเลขในตารางบอกว่าเบราเซอร์ที่สนับสนุน server-sent 事件ทั้งหมด

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 จะนำข้อมูลที่ได้รับเข้าไปที่ element ที่มี id ว่า "result"

ตรวจสอบการสนับสนุน Server-Sent 事件

ในตัวอย่าง TIY พวกเราเขียนรหัสบทเพิ่มเติมเพื่อตรวจสอบการสนับสนุนเหตุการณ์การส่งข้อมูลโดยเซิร์ฟเวอร์ของเบราเซอร์:

if(typeof(EventSource) !== "undefined") {
    // ใช่แล้ว! สนับสนุนเหตุการณ์การส่งข้อมูลโดยเซิร์ฟเวอร์!
    // บางรหัสบท.....
}
    // ขอโทษ! ไม่สนับสนุนเหตุการณ์การส่งข้อมูลโดยเซิร์ฟเวอร์!
}

ตัวอย่างเว็บบริการ

เพื่อที่จะให้ตัวอย่างที่เคยใช้งานได้ คุณจำเป็นต้องสามารถส่งข้อมูลปรับปรุงของเซิร์ฟเวอร์ (เช่น PHP หรือ ASP) ได้

การใช้งานสyntax ของ Event Stream ที่เซิร์ฟเวอร์ด้านบนเป็นที่ง่าย โปรดตั้งค่าหัวข้อ "Content-Type" ให้เป็น "text/event-stream" ตอนนี้ คุณสามารถเริ่มส่ง 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 เมื่อเกิดข้อผิดพลาด