Frontend Academy · บทเรียน

เหตุการณ์จากเซิร์ฟเวอร์สำหรับการสตรีมทางเดียว

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

เหตุการณ์จากเซิร์ฟเวอร์สำหรับการสตรีมทางเดียว เป็นบทเรียน Frontend Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Frontend Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน

Server-Sent Events คืออะไร

SSE คือโปรโตคอลมาตรฐานที่ทำงานบน HTTP ซึ่งเซิร์ฟเวอร์ใช้ส่งเหตุการณ์ไปยังเบราว์เซอร์ผ่านการเชื่อมต่อเดียวที่มีอายุยาวนาน ทางเดียว: ส่งจากเซิร์ฟเวอร์ไปยังไคลเอ็นต์เท่านั้น เรียบง่ายกว่า WebSockets เมื่อคุณไม่จำเป็นต้องส่งข้อมูลกลับ

EventSource API

EventSource ของเบราว์เซอร์จะเชื่อมต่อไปยัง URL และรับฟังเหตุการณ์ เป็นความสามารถมาตรฐานที่มีมาให้ในตัว จึงไม่ต้องใช้ไลบรารี

const es = new EventSource('/api/events');

es.addEventListener('message', (event) => {
  console.log('Received:', event.data);
});

es.addEventListener('error', () => {
  console.error('Connection error');
});

รูปแบบการตอบกลับของเซิร์ฟเวอร์

เซิร์ฟเวอร์ส่งสตรีมข้อความธรรมดาพร้อม Content-Type: text/event-stream แต่ละข้อความเริ่มต้นด้วย data: และจบด้วยบรรทัดว่าง

// Server response:
Content-Type: text/event-stream
Cache-Control: no-cache

data: hello\n\n
data: another message\n\n
data: {"type":"chat","text":"Hi"}\n\n

เหตุการณ์ที่มีชื่อ

เซิร์ฟเวอร์สามารถตั้งชื่อเหตุการณ์ด้วย event: จากนั้นเบราว์เซอร์จะส่งเหตุการณ์ออกมาด้วยชื่อนั้น

// Server:
event: chat
data: {"user":"Alice","text":"Hi"}\n\n

event: user-joined
data: {"name":"Bob"}\n\n

// Client:
es.addEventListener('chat', (e) => { /* ... */ });
es.addEventListener('user-joined', (e) => { /* ... */ });

การเชื่อมต่อใหม่โดยอัตโนมัติ

EventSource จะเชื่อมต่อใหม่โดยอัตโนมัติเมื่อถูกตัดการเชื่อมต่อ หลังจากประมาณ 3 วินาที เซิร์ฟเวอร์สามารถแนะนำระยะเวลาหน่วงด้วย retry: 5000

// Server:
retry: 5000\n
data: hello\n\n

ID เหตุการณ์และการกลับมาทำงานต่อ

เซิร์ฟเวอร์ส่ง id: มาพร้อมกับแต่ละเหตุการณ์ หลังจากเชื่อมต่อใหม่ เบราว์เซอร์จะส่ง ID ล่าสุดที่ได้รับในส่วนหัว Last-Event-ID จากนั้นเซิร์ฟเวอร์สามารถส่งข้อมูลต่อจากจุดนั้นได้

// Server:
id: 42
event: chat
data: {"text":"Hi"}\n\n

id: 43
event: chat
data: {"text":"How are you?"}\n\n

// Client reconnect sends: Last-Event-ID: 43

การแยกวิเคราะห์ JSON

event.data จะเป็นสตริงเสมอ คุณต้องแยกวิเคราะห์ JSON เอง

es.addEventListener('chat', (e) => {
  const msg = JSON.parse(e.data);
  console.log(msg.user, msg.text);
});

การปิดการเชื่อมต่อ

เรียก es.close() เพื่อหยุด เบราว์เซอร์จะปิดการเชื่อมต่อเมื่อปิดแท็บด้วย

es.close();

// In React, close in useEffect cleanup:
useEffect(() => {
  const es = new EventSource('/events');
  es.onmessage = (e) => setData(d => [...d, e.data]);
  return () => es.close();
}, []);

กรณีการใช้งาน

แดชบอร์ดแบบสด เช่น เมตริกและการตรวจสอบ การแจ้งเตือน เช่น อีเมลใหม่และการเตือน เครื่องแสดงราคาหุ้น การตอบกลับแชตจากปัญญาประดิษฐ์แบบต่อเนื่อง โดยแต่ละโทเค็นคือหนึ่งเหตุการณ์ คะแนนกีฬาสด และการอัปเดตสถานะจากงานที่ทำงานเป็นเวลานาน

ตัวอย่างจริง: การสตรีมจากปัญญาประดิษฐ์

การตอบกลับแบบต่อเนื่องของ OpenAI/Anthropic จะสตรีมในรูปแบบ SSE แต่ละโทเค็นมาถึงในรูปเหตุการณ์ข้อมูล ให้แสดงผลทีละส่วนเพื่อสร้างเอฟเฟกต์เหมือนกำลังพิมพ์

const es = new EventSource('/api/chat?prompt=hello');
let text = '';
es.addEventListener('message', (e) => {
  if (e.data === '[DONE]') {
    es.close();
    return;
  }
  const { delta } = JSON.parse(e.data);
  text += delta;
  setMessage(text);
});

SSE เทียบกับ WebSocket และการโพล

SSE: ทำงานบน HTTP ส่งจากเซิร์ฟเวอร์ไปยังไคลเอ็นต์เท่านั้น เชื่อมต่อใหม่โดยอัตโนมัติ และเรียบง่าย WebSocket: สื่อสารได้สองทิศทางเต็มรูปแบบ มีค่าใช้จ่ายต่อข้อความต่ำกว่าแต่ซับซ้อนกว่า การโพล: เรียบง่ายที่สุด แต่มีความหน่วงและภาระโหลดสูงที่สุด เลือก SSE สำหรับการสตรีมทางเดียว และเลือก WS สำหรับการสื่อสารสองทางแบบแชต

ข้อจำกัดของเบราว์เซอร์และพร็อกซี

เบราว์เซอร์จำกัดจำนวนการเชื่อมต่อ SSE พร้อมกันต่อหนึ่งต้นทางไว้ที่ประมาณ 6 รายการ พร็อกซีขององค์กรและตัวกระจายโหลดรุ่นเก่าบางชนิดอาจบัฟเฟอร์การตอบกลับ ทำให้ SSE ทำงานผิดพลาด — ให้ทดสอบในสภาพแวดล้อมเป้าหมาย ใช้ HTTPS เพื่อหลีกเลี่ยงการบัฟเฟอร์ของพร็อกซีส่วนใหญ่

CORS สำหรับ SSE

EventSource ปฏิบัติตาม CORS เซิร์ฟเวอร์ต้องส่ง Access-Control-Allow-Origin หากใช้ข้อมูลรับรอง ให้ส่ง { withCredentials: true } ไปยังตัวสร้าง EventSource และตั้งค่า Access-Control-Allow-Credentials: true บนเซิร์ฟเวอร์

ตรวจสอบความเข้าใจ

ความแตกต่างสำคัญระหว่าง Server-Sent Events กับ WebSockets คืออะไร

สรุป: Server-Sent Events

EventSource เปิดสตรีม HTTP ของเหตุการณ์ text/event-stream เซิร์ฟเวอร์ส่งข้อความ 'data:' พร้อมชื่อ event: และ id: ที่เป็นตัวเลือกได้ เชื่อมต่อใหม่โดยอัตโนมัติและกลับมาทำงานต่อโดยใช้ Last-Event-ID เป็นการสื่อสารทางเดียว (เซิร์ฟเวอร์ → ไคลเอ็นต์) เหมาะอย่างยิ่งสำหรับแดชบอร์ดแบบสด การสตรีมจากปัญญาประดิษฐ์ และการแจ้งเตือน เรียบง่ายกว่า WebSocket เมื่อไม่ต้องการการสื่อสารสองทาง ควรระวังข้อจำกัดจำนวนการเชื่อมต่อพร้อมกันและการบัฟเฟอร์ของพร็อกซี

คำถามที่พบบ่อย

บทเรียน “เหตุการณ์จากเซิร์ฟเวอร์สำหรับการสตรีมทางเดียว” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “เหตุการณ์จากเซิร์ฟเวอร์สำหรับการสตรีมทางเดียว” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Frontend Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “เหตุการณ์จากเซิร์ฟเวอร์สำหรับการสตรีมทางเดียว”

ใช้ EventSource เพื่อรับสตรีมเหตุการณ์จากเซิร์ฟเวอร์ แยกวิเคราะห์ชนิดและข้อมูลของเหตุการณ์ และเชื่อมต่อใหม่โดยอัตโนมัติเมื่อเครือข่ายขัดข้อง คุณปฏิบัติ Frontend Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Frontend Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Frontend Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน

บทเรียน “เหตุการณ์จากเซิร์ฟเวอร์สำหรับการสตรีมทางเดียว” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Frontend Academy นี้ได้ไหม

ได้ บทเรียน Frontend Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

WebSocket API: เปิด รับข้อความ ปิด และข้อผิดพลาด
การเชื่อมต่อ Socket.io ฝั่งไคลเอนต์
เหตุการณ์จากเซิร์ฟเวอร์สำหรับการสตรีมทางเดียว
รูปแบบ UI แบบเรียลไทม์

← กลับไปที่ Frontend Academy