พัฒนาเว็บไซต์ด้วย HTML5

HTML5 การใช้งาน SSE API

Server-Sent Events (SSE) เป็นเทคโนโลยีที่อนุญาตให้เซิร์ฟเวอร์ส่งข้อมูลไปยังเว็บเบราว์เซอร์โดยอัตโนมัติเมื่อมีข้อมูลใหม่ โดยไม่จำเป็นที่ฝั่งผู้ใช้จะต้องร้องขอ ซึ่งเป็นการทำงานแบบ push-based เหมาะสำหรับการแจ้งเตือนข้อมูลแบบเรียลไทม์ เช่น ข่าวสาร การอัพเดตข้อมูลในหน้าต่างๆ หรือแชทออนไลน์

การทำงานของ SSE

  • Client: ฝั่งเบราว์เซอร์ร้องขอการเชื่อมต่อ SSE โดยใช้ JavaScript
  • Server: เซิร์ฟเวอร์จะส่งข้อมูลไปยังเบราว์เซอร์ในรูปแบบข้อความแบบต่อเนื่อง
  • Connection: การเชื่อมต่อนี้เป็นแบบ one-way communication (สื่อสารทางเดียว) คือ เซิร์ฟเวอร์ส่งข้อมูลได้ แต่เบราว์เซอร์ไม่สามารถส่งกลับไปได้

วิธีการใช้งาน SSE

ฝั่ง Client (HTML + JavaScript)

ฝั่งเบราว์เซอร์จะใช้ EventSource ในการรับข้อมูลจากเซิร์ฟเวอร์

HTML
<!DOCTYPE html>
<html>
  <body>
    <h1>Server-Sent Events</h1>
    <div id="result"></div>

    <script>
      if (typeof(EventSource) !== "undefined") {
        var source = new EventSource("server.php");
        
        source.onmessage = function(event) {
          document.getElementById("result").innerHTML += event.data + "<br>";
        };
      } else {
        document.getElementById("result").innerHTML = "Your browser does not support SSE.";
      }
    </script>
  </body>
</html>

ในตัวอย่างนี้ใช้ EventSource เพื่อเชื่อมต่อกับเซิร์ฟเวอร์ที่ไฟล์ server.php และเมื่อได้รับข้อมูลก็จะอัปเดตข้อความใน <div> ที่มี id เป็น result

ฝั่ง Server (PHP)

เซิร์ฟเวอร์จะส่งข้อมูลเป็นข้อความในรูปแบบที่ SSE รองรับ โดยส่งค่า Content-Type: text/event-stream เพื่อบอกว่าเป็นการส่งข้อมูลแบบต่อเนื่อง

PHP
<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

// ส่งข้อความ
echo "data: This is a message from server\n\n";
flush();
?>

การจัดการเหตุการณ์ต่างๆ ด้วย SSE

  1. onopen: ตรวจจับเหตุการณ์เมื่อเชื่อมต่อสำเร็จ
  2. onmessage: ตรวจจับข้อความที่ส่งมาจากเซิร์ฟเวอร์
  3. onerror: ตรวจจับข้อผิดพลาดที่เกิดขึ้น

ตัวอย่างเพิ่มเติมในการใช้ event handlers

JavaScript
var source = new EventSource("server.php");

source.onopen = function(event) {
  console.log("Connection opened");
};

source.onmessage = function(event) {
  console.log("Message from server:", event.data);
};

source.onerror = function(event) {
  if (event.readyState == EventSource.CLOSED) {
    console.log("Connection closed");
  } else {
    console.error("An error occurred");
  }
};

รูปแบบข้อมูลที่สามารถส่งผ่าน SSE

  • ข้อความปกติ: สามารถส่งข้อมูลได้โดยการใช้ data ตามด้วยเนื้อหาของข้อความ
  • การกำหนด event: สามารถกำหนด event ที่เฉพาะเจาะจงเพื่อให้เบราว์เซอร์ตอบสนอง

ฝั่ง Server

PHP
echo "event: customEvent\n";
echo "data: This is a custom event\n\n";
flush();

ฝั่ง Client

JavaScript
source.addEventListener("customEvent", function(event) {
  console.log("Custom event received:", event.data);
});

การประยุกต์ใช้งาน SSE

  1. การอัปเดตข้อมูลแบบเรียลไทม์: เหมาะสำหรับการแจ้งเตือน เช่น การแสดงข้อมูลราคาหุ้น การอัปเดตคะแนนการแข่งขัน หรือการแจ้งเตือนข่าวสาร
  2. การทำงานร่วมกับ Dashboard: ใช้ในการอัปเดตข้อมูลในหน้า dashboard ที่ต้องการแสดงข้อมูลที่เปลี่ยนแปลงแบบต่อเนื่อง
  3. การสตรีมข้อมูล: ส่งข้อมูลในแบบเรียลไทม์ไปยังผู้ใช้งาน เช่น ระบบสตรีมการสนทนา

SSE เป็นทางเลือกที่ดีเมื่อระบบต้องการอัปเดตข้อมูลแบบเรียลไทม์ โดยใช้การเชื่อมต่อแบบเบาๆ และง่าย

Tags
แชร์เรื่องนี้

เรื่องที่น่าสนใจ