การใช้สตรีม SSE ใน React ด้วย EventSource

new EventSource(url) สร้างการเชื่อมต่อ SSE ไปยัง URL ที่ระบุ เบราว์เซอร์จะเปิดคำขอ HTTP GET ทันทีพร้อมส่วนหัว Accept: text/event-stream เซิร์ฟเวอร์จะคงการเชื่อมต่อนี้ไว้และสตรีมเหตุการณ์ การใช้ EventSource เป็นการใช้ API ที่มีมาในเบราว์เซอร์ จึงไม่ต้องติดตั้งไลบรารีสำหรับการใช้งานพื้นฐาน

EventSource มีสถานะพร้อมใช้งาน 3 สถานะ: 0 (CONNECTING) — กำลังสร้างหรือสร้างการเชื่อมต่อใหม่ 1 (OPEN) — สร้างการเชื่อมต่อแล้วและกำลังส่งเหตุการณ์ 2 (CLOSED) — ปิดการเชื่อมต่อแล้วและจะไม่เชื่อมต่อใหม่ ตรวจสอบ eventSource.readyState เพื่อดูสถานะปัจจุบัน

ตัวจัดการ eventSource.onmessage จะทำงานกับเหตุการณ์จากเซิร์ฟเวอร์ที่ไม่มีประเภทเหตุการณ์ระบุไว้อย่างชัดเจน (เซิร์ฟเวอร์ส่ง data: ... โดยไม่มีฟิลด์ event:) ตัวจัดการจะได้รับออบเจ็กต์เหตุการณ์ โดย event.data เป็นข้อมูลส่วนเนื้อหาประเภทสตริง โดยทั่วไปเซิร์ฟเวอร์จะใช้ JSON.stringify กับข้อมูล ดังนั้นเมื่อได้รับข้อมูล คุณจึงใช้ JSON.parse เพื่อแยกวิเคราะห์ได้

เซิร์ฟเวอร์สามารถส่งเหตุการณ์ที่มีชื่อได้: event: userJoined data: {"userId": "123"} ในเบราว์เซอร์ ให้รับฟังด้วย eventSource.addEventListener('userJoined', handler) วิธีนี้ช่วยให้รวมเหตุการณ์หลายประเภทไว้ในการเชื่อมต่อ SSE เดียว โดยแต่ละประเภทเหตุการณ์มีตัวจัดการของตนเอง ทำให้โค้ดเป็นระเบียบและอ่านเข้าใจง่าย

ข้อมูล SSE มาถึงในรูปสตริง สำหรับข้อมูลที่มีโครงสร้าง เซิร์ฟเวอร์จะส่ง JSON.stringify(payload) แล้วลูกข่ายจะแยกวิเคราะห์ด้วย const data = JSON.parse(event.data) โปรดครอบการเรียก JSON.parse ด้วยบล็อก try/catch เสมอ เพื่อจัดการ JSON ที่ไม่ถูกต้องจากเซิร์ฟเวอร์อย่างเหมาะสม โดยบันทึกข้อผิดพลาดและข้ามเหตุการณ์ที่มีรูปแบบไม่ถูกต้อง

สร้างและปิด EventSource ภายใน useEffect โดยสร้างการเชื่อมต่อเมื่อติดตั้งคอมโพเนนต์ เพิ่มตัวจัดการเหตุการณ์ และส่งคืนฟังก์ชันล้างทรัพยากรที่เรียก eventSource.close() หากไม่มีการล้างทรัพยากร การเชื่อมต่อจะรั่วไหลเมื่อถอดคอมโพเนนต์ออก เมื่อลูกข่ายนำทางไปที่อื่น หรือเมื่อเอฟเฟกต์ทำงานใหม่ด้วยการพึ่งพาที่ต่างกัน

ภายในตัวจัดการ eventSource.onmessage ให้อัปเดตสถานะของ React เพื่อสะท้อนข้อมูลใหม่: setMessages(prev => [...prev, JSON.parse(event.data)]) ใช้รูปแบบฟังก์ชันของ setState เพื่อหลีกเลี่ยงปัญหาคลอเชอร์ที่ค้างค่า ตัวจัดการเหตุการณ์จะจับค่าของสถานะเริ่มต้นไว้ แต่การอัปเดตแบบฟังก์ชันจะทำให้คุณใช้ค่าของสถานะล่าสุดได้เสมอ

EventSource จะเชื่อมต่อใหม่โดยอัตโนมัติเมื่อการเชื่อมต่อขาดหายเนื่องจากข้อผิดพลาดของเครือข่ายหรือการเริ่มเซิร์ฟเวอร์ใหม่ เบราว์เซอร์จะรอช่วงเวลาสั้น ๆ (โดยทั่วไป 3 วินาที และเซิร์ฟเวอร์สามารถกำหนดค่าได้ผ่าน retry: 3000 ในสตรีม) จากนั้นจึงเชื่อมต่อใหม่ คุณไม่จำเป็นต้องเขียนตรรกะการเชื่อมต่อใหม่เอง เพราะตรรกะนี้มีมาให้ในส่วนติดต่อโปรแกรมของ EventSource แล้ว

EventSource จะติดตามรหัสเหตุการณ์ล่าสุดที่ได้รับ (เซิร์ฟเวอร์ตั้งค่าโดยใช้ id: 123 ในสตรีม) เมื่อเชื่อมต่อใหม่ เบราว์เซอร์จะส่งรหัสนี้โดยอัตโนมัติในส่วนหัว HTTP Last-Event-ID เซิร์ฟเวอร์ที่ออกแบบมาอย่างดีจะใช้รหัสนี้เล่นเหตุการณ์ที่พลาดไปซ้ำ เพื่อให้แน่ใจว่าไม่มีเหตุการณ์ใดสูญหายระหว่างการเชื่อมต่อใหม่

EventSource ไม่รองรับส่วนหัวแบบกำหนดเองโดยตรง สำหรับการยืนยันตัวตน ให้ใช้คุกกี้ (new EventSource(url, { withCredentials: true }) จะส่งคุกกี้ไปด้วย) หรือใส่โทเค็นยืนยันตัวตนเป็นพารามิเตอร์คำค้นหาใน URL หากจำเป็นต้องใช้ส่วนหัว Authorization ให้ใช้ส่วนติดต่อ Fetch ร่วมกับ ReadableStream แทน EventSource เพื่อประมวลผลการตอบกลับ SSE ด้วยตนเอง

เมื่อ EventSource พบข้อผิดพลาด ตัวจัดการข้อผิดพลาดจะทำงาน สถานะ readyState จะเป็น CONNECTING (หากจะลองใหม่) หรือ CLOSED (หากจะไม่ลองใหม่) ในตัวจัดการข้อผิดพลาด ให้ตรวจสอบ readyState เพื่อแยกความแตกต่างระหว่างข้อผิดพลาดเครือข่ายชั่วคราว (ระบบจะลองใหม่โดยอัตโนมัติ) กับความล้มเหลวถาวร (เซิร์ฟเวอร์ส่งสถานะที่ไม่ใช่ 200 กลับมา) หากเกิดข้อผิดพลาดถาวร ให้ปิดการเชื่อมต่อและแจ้งให้ผู้ใช้ทราบ

จะเกิดอะไรขึ้นเมื่อการเชื่อมต่อ EventSource ถูกตัดเนื่องจากข้อผิดพลาดของเครือข่าย

การสร้างการเชื่อมต่อด้วย EventSource จะมีสถานะ readyStates ได้แก่ CONNECTING, OPEN และ CLOSED ตัวจัดการข้อความจะจัดการเหตุการณ์ทั่วไป ส่วน addEventListener จะจัดการประเภทเหตุการณ์ที่ระบุ JSON.parse(event.data) ใช้ดึงข้อมูลที่มีโครงสร้าง สร้างและล้าง EventSource ภายใน useEffect การเชื่อมต่อใหม่โดยอัตโนมัติมีมาให้ในตัว — EventSource จะลองใหม่หลังเกิดข้อผิดพลาดเครือข่ายพร้อมใช้ Last-Event-ID เพื่อเล่นเหตุการณ์ที่พลาดไปซ้ำ ยืนยันตัวตนผ่านคุกกี้ (withCredentials) หรือพารามิเตอร์คำค้นหาใน URL