HTML5 - เหตุการณ์ที่เซิร์ฟเวอร์ส่ง
เว็บแอปพลิเคชันทั่วไปจะสร้างเหตุการณ์ที่ส่งไปยังเว็บเซิร์ฟเวอร์ ตัวอย่างเช่นการคลิกลิงก์แบบธรรมดาจะขอเพจใหม่จากเซิร์ฟเวอร์
ประเภทของเหตุการณ์ที่ไหลจากเว็บเบราว์เซอร์ไปยังเว็บเซิร์ฟเวอร์อาจเรียกว่าเหตุการณ์ที่ไคลเอ็นต์ส่ง
นอกเหนือจาก HTML5 แล้วWHATWG Web Applications 1.0 จะแนะนำเหตุการณ์ที่ไหลจากเว็บเซิร์ฟเวอร์ไปยังเว็บเบราว์เซอร์และเรียกว่าเหตุการณ์ที่ส่งผ่านเซิร์ฟเวอร์ (SSE) การใช้ SSE คุณสามารถพุชเหตุการณ์ DOM จากเว็บเซิร์ฟเวอร์ของคุณไปยังเบราว์เซอร์ของผู้เยี่ยมชมได้อย่างต่อเนื่อง
วิธีการสตรีมเหตุการณ์จะเปิดการเชื่อมต่อแบบต่อเนื่องไปยังเซิร์ฟเวอร์ส่งข้อมูลไปยังไคลเอนต์เมื่อมีข้อมูลใหม่ทำให้ไม่จำเป็นต้องทำการสำรวจอย่างต่อเนื่อง
เหตุการณ์ที่เซิร์ฟเวอร์ส่งเป็นมาตรฐานในการสตรีมข้อมูลจากเซิร์ฟเวอร์ไปยังไคลเอนต์
Web Application สำหรับ SSE
ในการใช้ Server-Sent Events ในเว็บแอปพลิเคชันคุณจะต้องเพิ่มองค์ประกอบ <eventsource> ลงในเอกสาร
src แอตทริบิวต์ขององค์ประกอบ <eventsource> ควรชี้ไปที่ URL ซึ่งควรมีการเชื่อมต่อ HTTP แบบต่อเนื่องที่ส่งสตรีมข้อมูลที่มีเหตุการณ์
URL จะชี้ไปที่ PHP, PERL หรือสคริปต์ Python ใด ๆ ซึ่งจะดูแลการส่งข้อมูลเหตุการณ์อย่างสม่ำเสมอ ต่อไปนี้เป็นตัวอย่างง่ายๆของเว็บแอปพลิเคชันที่คาดว่าจะมีเวลาเซิร์ฟเวอร์
<!DOCTYPE HTML>
<html>
<head>
<script type = "text/javascript">
/* Define event handling logic here */
</script>
</head>
<body>
<div id = "sse">
<eventsource src = "/cgi-bin/ticker.cgi" />
</div>
<div id = "ticker">
<TIME>
</div>
</body>
</html>สคริปต์ฝั่งเซิร์ฟเวอร์สำหรับ SSE
สคริปต์ฝั่งเซิร์ฟเวอร์ควรส่ง Content-typeส่วนหัวระบุชนิดtext / event-streamดังนี้
print "Content-Type: text/event-stream\n\n";หลังจากตั้งค่า Content-Type สคริปต์ฝั่งเซิร์ฟเวอร์จะส่งไฟล์ Event: tag ตามด้วยชื่อเหตุการณ์ ตัวอย่างต่อไปนี้จะส่ง Server-Time เป็นชื่อเหตุการณ์ที่สิ้นสุดด้วยอักขระบรรทัดใหม่
print "Event: server-time\n";ขั้นตอนสุดท้ายคือการส่งข้อมูลเหตุการณ์โดยใช้ Data: แท็กซึ่งจะตามด้วยจำนวนเต็มของค่าสตริงที่สิ้นสุดด้วยอักขระบรรทัดใหม่ดังนี้ -
$time = localtime();
print "Data: $time\n";สุดท้ายต่อไปนี้คือ ticker.cgi ที่เขียนใน Perl -
#!/usr/bin/perl
print "Content-Type: text/event-stream\n\n";
while(true) {
print "Event: server-time\n";
$time = localtime();
print "Data: $time\n";
sleep(5);
}จัดการเหตุการณ์ที่เซิร์ฟเวอร์ส่ง
ให้เราแก้ไขเว็บแอปพลิเคชันของเราเพื่อจัดการกับเหตุการณ์ที่เซิร์ฟเวอร์ส่ง ต่อไปนี้เป็นตัวอย่างสุดท้าย
<!DOCTYPE HTML>
<html>
<head>
<script type = "text/javascript">
document.getElementsByTagName("eventsource")[0].addEventListener("server-time",
eventHandler, false);
function eventHandler(event) {
// Alert time sent by the server
document.querySelector('#ticker').innerHTML = event.data;
}
</script>
</head>
<body>
<div id = "sse">
<eventsource src = "/cgi-bin/ticker.cgi" />
</div>
<div id = "ticker" name = "ticker">
[TIME]
</div>
</body>
</html>ก่อนทดสอบเหตุการณ์ที่เซิร์ฟเวอร์ส่งฉันขอแนะนำให้คุณตรวจสอบให้แน่ใจว่าเว็บเบราว์เซอร์ของคุณรองรับแนวคิดนี้