בניתי לקוח צ'אט AI בשיטת Streaming בלי לאבד את השפיות שלי

רציתי לבנות ממשק צ'אט שבו ה-AI מגיב בזמן אמת. רציתי את אפקט ה"מכונה הכותבת" החלק הזה.

זה היה קשה יותר ממה שחשבתי. הבעיה לא הייתה ה-AI. הבעיה הייתה ה-pipeline בין ה-API לדפדפן.

ניסיתי שלוש דרכים שונות לפתור את זה.

  1. שיטת ההמתנה (The Wait Method) קראתי ל-API וחיכיתי לתגובה המלאה לפני שהצגתי אותה. זה עבד, אבל ה-UI קפא למשך כמה שניות. המשתמשים חשבו שהאפליקציה נשברה. הם לחצו על "Send" שוב ושוב. זו הייתה חווית משתמש גרועה.

  2. שיטת ה-Polling חשבתי שהשרת ישלח job ID. לאחר מכן הלקוח (client) יבקש עדכונים בכל שנייה. זה דרש ניהול שרת כבד. העדכונים הופיעו בקטעים אקראיים. זה לא היה חלק.

  3. שיטת ה-WebSocket ניסיתי את Socket.IO. זה הוסיף מורכבות עצומה. הייתי צריך לנהל reconnections, heartbeats וסנכרון מצב (state synchronization). עבור אפליקציית צ'אט פשוטה, WebSockets היו overkill.

הפתרון היה פשוט יותר: Server-Sent Events (SSE).

רוב ה-AI APIs כבר שולחים תגובות באמצעות SSE מעל HTTP. הפסקתי לחפש כלים מורכבים והשתמשתי ב-native fetch API.

באמצעות שימוש ב-response.body.getReader(), קראתי את זרם הבתים (stream of bytes) ישירות. ניתחתי (parsed) את פרוטוקול ה-SSE בעצמי. הגישה הזו שומרת על ה-UI רספונסיבי ומשתמשת ב-HTTP סטנדרטי.

למה זה עובד:

  • אין צורך בשרת WebSocket.
  • אין צורך בלוגיקת reconnection מורכבת.
  • זה עובד עם כל API שתומך ב-SSE.
  • ניתן לעצור את הזרם בקלות באמצעות AbortController.

ישנן פשרות (trade-offs).

  • אי אפשר לדחוף עדכונים ללקוח ללא בקשה.
  • אם החיבור מתנתק, מאבדים את התגובה החלקית.

אם אתם בונים אפליקציית צ'אט, הימנעו מ-WebSockets אלא אם אתם זקוקים לתקשורת דו-כיוונית (bidirectional communication). היצמדו ל-HTTP streaming. זה פשוט ואמין יותר.

מה אסטרטגיית ה-streaming שלכם? אתם משתמשים ב-WebSockets או ב-SSE? ספרו לי בתגובות.

מקור: https://dev.to/__c1b9e06dc90a7e0a676b/i-built-a-streaming-ai-chat-client-without-losing-my-mind-3gi0