ทำความรู้จักกับ Server Sent Event (SSE) เบื้องต้น

เนื่องจากช่วงนี้กำลังศึกษาอะไรเรื่อยเปื่อย เพื่อเอามาเขียนบทความบ้าง ทำโปรเจ็คบ้าง ไปเจอคีย์เวิร์ดนึงซึ่งน่าสนใจ มันคือ Server Sent Event (SSE) เคยเห็นผ่านๆ บทความนี้เราจะมาทำความเข้าใจกัน

Server Sent Event - One way messaging

SSE เป็น API ที่อนุญาติให้เรารับข้อมูลจากหลังบ้านได้แบบอัตโนมัติ เช่น จากเดิมที่เราใช้ Rest Api เวลาที่ต้องการข้อมูล เราจะให้ Client ส่งไปถามหลังบ้านก่อน เพื่อรับข้อมูลกลับมา แต่มีหลายๆเหตุการณ์ที่ทำให้เราไม่สามารถให้ Client ส่งไปถามหลังบ้านได้ เช่นแอพแชท

อย่างที่ทราบกัน เราใช้ Web Socket ในการสื่อสารที่ไม่ต้องการให้อีกฝั่งส่งไปถามก่อนเสมอ เพียงแค่เปิด Connection ไว้ ก็ส่งข้อมูลให้กันได้เลย

แต่เนื่องจาก Web Socket เป็นการสื่อสาร 2 ทาง ในบางงานอาจไม่เหมาะกับการใช้ เช่น จะอัพเดทราคาทองคำ News feed หรือผลกีฬา ทั้งหมดนี้ใช้การสื่อสารทางเดียวก็เพียงพอแล้ว

Photo by Ian Taylor on Unsplash

วิธีใช้งาน SSE

Backend ให้เซท Header Content-Type : text/event-stream

Frontend เรียกใช้งานตามรูป

ตัวอย่างโค๊ด SSE with React + Express >> Github

จริงๆไม่มีอะไรซับซ้อน แต่ขอลองเล่นดูก่อน เจอกันบทความหน้า