สร้างฟีดการแจ้งเตือนแบบเรียลไทม์

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

ออบเจ็กต์การแจ้งเตือนมักมีรูปแบบดังนี้: { id: string, type: 'info' | 'warning' | 'success', message: string, timestamp: string, read: boolean } ช่อง type ใช้กำหนดไอคอนและสี ช่อง read ติดตามว่าผู้ใช้รับทราบการแจ้งเตือนแล้วหรือไม่ ส่วน timestamp ช่วยให้จัดกลุ่มตามช่วงเวลาได้

ใน useEffect ให้สร้าง EventSource ที่เชื่อมต่อกับ /api/notifications/stream เมื่อเกิดเหตุการณ์ข้อความแต่ละครั้ง ให้แยกวิเคราะห์ JSON แล้วเพิ่มการแจ้งเตือนใหม่ไว้ด้านหน้าสถานะ: setNotifications(prev => [JSON.parse(e.data), ...prev]) การเพิ่มไว้ด้านหน้า (พฤติกรรมแบบ unshift) จะวางการแจ้งเตือนล่าสุดไว้ด้านบน ซึ่งเป็นรูปแบบมาตรฐานของรายการการแจ้งเตือน

คำนวณจำนวนที่ยังไม่ได้อ่านจากอาร์เรย์การแจ้งเตือนโดยไม่ต้องมีสถานะเพิ่มเติม: const unreadCount = notifications.filter(n => !n.read).length แสดงจำนวนนี้เป็นป้ายบนไอคอนกระดิ่งการแจ้งเตือน จำนวนจะอัปเดตโดยอัตโนมัติทุกครั้งที่สถานะการแจ้งเตือนเปลี่ยนแปลง จึงไม่จำเป็นต้องจัดการสถานะแยกต่างหาก

เมื่อผู้ใช้คลิกการแจ้งเตือน ให้ใช้การอัปเดตว่าอ่านแล้วเชิงคาดการณ์ทันที: setNotifications(prev => prev.map(n => n.id === id ? { ...n, read: true } : n)) จากนั้นส่งคำขอ PATCH ไปยัง /api/notifications/:id พร้อมข้อมูล { read: true } ในเบื้องหลัง หากคำขอล้มเหลว ให้ย้อนกลับการอัปเดตเชิงคาดการณ์

จัดกลุ่มการแจ้งเตือนเพื่อแสดงผลเป็น “วันนี้” (วันตามปฏิทินเดียวกัน), “เมื่อวาน” และ “เก่ากว่านั้น” คำนวณกลุ่มโดยใช้เวลาของการแจ้งเตือนและวันที่ปัจจุบัน: const today = new Date().toDateString() แสดงแต่ละกลุ่มเป็นส่วนแยกกันพร้อมป้ายหัวข้อ วิธีนี้ช่วยให้กวาดดูรายการการแจ้งเตือนที่ยาวได้ง่ายขึ้นมาก

เมื่อผู้ใช้อยู่คนละหน้าและมีการแจ้งเตือนใหม่เข้ามาผ่าน SSE ให้แสดงการแจ้งเตือนแบบป๊อปอัปแทนการอัปเดตรายการการแจ้งเตือน หรือแสดงควบคู่กันไป ใช้บริบทการแจ้งเตือนส่วนกลางหรือที่เก็บ Zustand ซึ่งทั้งตัวรับการแจ้งเตือน SSE และตัวแสดงการแจ้งเตือนแบบป๊อปอัปเข้าถึงได้ การแจ้งเตือนแบบป๊อปอัปจะหายไปหลังจากไม่กี่วินาที ส่วนการแจ้งเตือนจะยังคงอยู่ในรายการ

สำหรับการแจ้งเตือนที่ปรากฏทั่วทั้งแอป ให้จัดเก็บไว้ในบริบท React หรือที่เก็บ Zustand ที่ระดับรากของแอป การสมัครรับ SSE อยู่ในส่วนประกอบผู้ให้บริการใกล้ด้านบนของโครงสร้าง ส่วนประกอบใด ๆ ก็สามารถอ่านการแจ้งเตือนหรือส่งการแจ้งเตือนใหม่ผ่านที่เก็บร่วมกันได้ ทำให้แสดงการแจ้งเตือนแบบป๊อปอัปจากหน้าใดก็ได้

EventSource จัดการการเชื่อมต่อใหม่โดยอัตโนมัติเมื่อเครือข่ายขาดหาย แต่การเปลี่ยนการมองเห็นแท็บเป็นอีกกรณีหนึ่ง เมื่อผู้ใช้กลับมายังแท็บหลังจากไม่ได้ใช้งานเป็นเวลานาน การเชื่อมต่อ SSE อาจถูกเซิร์ฟเวอร์ยุติ EventSource จะเชื่อมต่อใหม่โดยอัตโนมัติ และกลไก Last-Event-ID จะเล่นการแจ้งเตือนที่ผู้ใช้พลาดไปขณะที่แท็บทำงานอยู่เบื้องหลัง

แอปพลิเคชันหน้าเดียวจะสูญเสียสถานะการแจ้งเตือนในหน่วยความจำเมื่อเปลี่ยนออกจากหน้า จัดเก็บการแจ้งเตือนไว้ใน localStorage หลังการอัปเดตแต่ละครั้ง: localStorage.setItem('notifications', JSON.stringify(notifications)) เมื่อส่วนประกอบเริ่มทำงาน ให้ตั้งต้นสถานะจาก localStorage ก่อนเชื่อมต่อกระแสข้อมูล SSE วิธีนี้จะรักษาประวัติการแจ้งเตือนไว้ระหว่างการเปลี่ยนหน้า

จุดเชื่อมต่อ SSE ฝั่งเซิร์ฟเวอร์ต้องกำหนดส่วนหัวเฉพาะดังนี้: Content-Type: text/event-stream, Cache-Control: no-cache และ Connection: keep-alive ใน Express/NestJS ให้เขียนเหตุการณ์ในรูปแบบ data: ${JSON.stringify(payload)}\n\n — โปรดสังเกตบรรทัดใหม่สองบรรทัดที่ส่งสัญญาณว่าเหตุการณ์สิ้นสุด เซิร์ฟเวอร์ต้องล้างบัฟเฟอร์หลังการเขียนแต่ละครั้ง เพื่อให้เบราว์เซอร์ได้รับเหตุการณ์ทันที

ส่วนหัว Content-Type ที่ถูกต้องสำหรับจุดเชื่อมต่อ SSE (เหตุการณ์ที่เซิร์ฟเวอร์ส่ง) คืออะไร

รายการการแจ้งเตือนประกอบด้วยการสมัครรับ SSE (useEffect พร้อมการล้าง EventSource) และการเปลี่ยนแปลงผ่าน REST (PATCH สำหรับทำเครื่องหมายว่าอ่านแล้ว) รูปแบบข้อมูล: {รหัส, ประเภท, ข้อความ, เวลา, อ่านแล้ว} คำนวณ unreadCount ด้วย filter และจัดกลุ่มเป็นวันนี้/เมื่อวาน/เก่ากว่านั้นเพื่อแสดงผล ใช้บริบทส่วนกลางหรือ Zustand สำหรับการแจ้งเตือนแบบป๊อปอัปข้ามหน้า จัดเก็บไว้ใน localStorage เพื่อให้ยังคงอยู่ระหว่างการเปลี่ยนหน้า จุดเชื่อมต่อ SSE ต้องใช้ Content-Type: text/event-stream, Cache-Control: no-cache และตัวคั่นเหตุการณ์ด้วยบรรทัดใหม่สองบรรทัด