ผมสร้าง Streaming AI Chat Client โดยที่ไม่ต้องเสียสติ
ผมอยากสร้างอินเทอร์เฟซแชทที่ AI ตอบโต้แบบเรียลไทม์ ผมต้องการเอฟเฟกต์การพิมพ์ที่ลื่นไหลเหมือนเครื่องพิมพ์ดีด
มันยากกว่าที่ผมคิด ปัญหาไม่ได้อยู่ที่ AI แต่อยู่ที่ท่อส่งข้อมูล (pipeline) ระหว่าง API และเบราว์เซอร์
ผมลองแก้ปัญหานี้ด้วย 3 วิธีที่แตกต่างกัน
วิธีการรอ (The Wait Method) ผมเรียกใช้ API และรอจนกว่าจะได้คำตอบทั้งหมดก่อนจะแสดงผล วิธีนี้ใช้งานได้ แต่ UI ค้างไปหลายวินาที ผู้ใช้คิดว่าแอปเสีย พวกเขาจึงกดปุ่ม "Send" ซ้ำๆ ซึ่งเป็นประสบการณ์การใช้งานที่ไม่ดีเลย
วิธีการทำ Polling (The Polling Method) ผมคิดเรื่องการให้เซิร์ฟเวอร์ส่ง job ID มาให้ แล้วให้ฝั่ง client คอยถามหาข้อมูลอัปเดตทุกๆ วินาที วิธีนี้ต้องใช้การจัดการเซิร์ฟเวอร์ที่หนักหน่วง ข้อมูลที่อัปเดตมาก็มาเป็นช่วงๆ แบบสุ่ม มันไม่ลื่นไหลเลย
วิธีการใช้ WebSocket (The WebSocket Method) ผมลองใช้ Socket.IO แต่มันเพิ่มความซับซ้อนมหาศาล ผมต้องจัดการทั้งการเชื่อมต่อใหม่ (reconnections), heartbeats และการซิงโครไนซ์สถานะ (state synchronization) สำหรับแอปแชทธรรมดาๆ การใช้ WebSockets ถือว่าเกินความจำเป็น (overkill)
ทางออกนั้นง่ายกว่านั้น: Server-Sent Events (SSE)
AI API ส่วนใหญ่ส่งคำตอบผ่าน SSE บน HTTP อยู่แล้ว ผมจึงเลิกมองหาเครื่องมือที่ซับซ้อนและหันมาใช้ native fetch API แทน
ด้วยการใช้ response.body.getReader() ผมสามารถอ่าน stream ของ bytes ได้โดยตรง ผมทำการ parse โปรโตคอล SSE ด้วยตัวเอง วิธีนี้ช่วยให้ UI ตอบสนองได้ดีและใช้มาตรฐาน HTTP ปกติ
ทำไมวิธีนี้ถึงได้ผล:
- ไม่ต้องมี WebSocket server
- ไม่ต้องมี logic การเชื่อมต่อใหม่ที่ซับซ้อน
- ใช้งานได้กับทุก API ที่รองรับ SSE
- สามารถหยุด stream ได้ง่ายๆ โดยใช้ AbortController
แต่มันก็มีข้อแลกเปลี่ยน (trade-offs):
- คุณไม่สามารถส่งข้อมูลอัปเดตไปยัง client ได้หากไม่มีการร้องขอ (request)
- หากการเชื่อมต่อหลุด คุณจะสูญเสียข้อมูลคำตอบที่ส่งมาเพียงบางส่วนไป
หากคุณกำลังสร้างแอปแชท ให้หลีกเลี่ยง WebSockets เว้นแต่ว่าคุณต้องการการสื่อสารแบบสองทาง (bidirectional communication) ให้ใช้ HTTP streaming แทน เพราะมันง่ายกว่าและเชื่อถือได้มากกว่า
กลยุทธ์การทำ streaming ของคุณคืออะไร? คุณใช้ WebSockets หรือ SSE? บอกผมในคอมเมนต์ได้เลย
แหล่งที่มา: https://dev.to/__c1b9e06dc90a7e0a676b/i-built-a-streaming-ai-chat-client-without-losing-my-mind-3gi0