મેં મારું માનસિક સંતુલન ગુમાવ્યા વગર એક Streaming AI Chat Client બનાવ્યો

હું એક એવું ચેટ ઇન્ટરફેસ બનાવવા માંગતો હતો જ્યાં AI રીઅલ-ટાઇમમાં જવાબ આપે. મને તે સ્મૂધ ટાઇપરાઇટર ઇફેક્ટ (typewriter effect) જોઈતી હતી.

તે મેં વિચાર્યું હતું તેના કરતાં વધુ મુશ્કેલ હતું. સમસ્યા AI ની નહોતી. સમસ્યા API અને બ્રાઉઝર વચ્ચેના પાઇપલાઇન (pipeline) ની હતી.

આ સમસ્યા ઉકેલવા માટે મેં ત્રણ અલગ-અલગ રીતો અજમાવી.

  1. The Wait Method મેં API ને કોલ કર્યો અને તેને બતાવતા પહેલા સંપૂર્ણ પ્રતિસાદ (response) માટે રાહ જોઈ. આ કામ તો કરી ગયું, પરંતુ UI કેટલાક સેકન્ડ માટે ફ્રીઝ થઈ ગયું. વપરાશકર્તાઓને લાગ્યું કે એપ બગડી ગઈ છે. તેઓએ વારંવાર "Send" પર ક્લિક કર્યું. આ એક ખરાબ યુઝર એક્સપિરિયન્સ (user experience) હતો.

  2. The Polling Method મેં વિચાર્યું કે સર્વર એક job ID મોકલે. ત્યારબાદ ક્લાયન્ટ દર સેકન્ડે અપડેટ્સ માટે પૂછશે. આ માટે ભારે સર્વર મેનેજમેન્ટની જરૂર હતી. અપડેટ્સ અસંગત ટુકડાઓમાં (random chunks) દેખાતા હતા. તે સ્મૂધ નહોતું.

  3. The WebSocket Method મેં Socket.IO અજમાવ્યું. આનાથી જટિલતા ખૂબ વધી ગઈ. મારે reconnections, heartbeats અને state synchronization મેનેજ કરવા પડ્યા. એક સાદી ચેટ એપ માટે, WebSockets જરૂરિયાત કરતા વધારે (overkill) હતા.

ઉકેલ વધુ સરળ હતો: Server-Sent Events (SSE).

મોટાભાગની AI APIs પહેલેથી જ HTTP પર SSE દ્વારા પ્રતિસાદ મોકલે છે. મેં જટિલ સાધનો શોધવાનું બંધ કર્યું અને native fetch API નો ઉપયોગ કર્યો.

response.body.getReader() નો ઉપયોગ કરીને, મેં સીધા જ bytes ના સ્ટ્રીમને વાંચ્યો. મેં જાતે જ SSE પ્રોટોકોલને parse કર્યો. આ અભિગમ UI ને responsive રાખે છે અને standard HTTP નો ઉપયોગ કરે છે.

આ શા માટે કામ કરે છે:

  • કોઈ WebSocket સર્વરની જરૂર નથી.
  • કોઈ જટિલ reconnection લોજિકની જરૂર નથી.
  • તે SSE સપોર્ટ કરતી કોઈપણ API સાથે કામ કરે છે.
  • તમે AbortController નો ઉપયોગ કરીને સ્ટ્રીમને સરળતાથી રોકી શકો છો.

તેમાં કેટલાક ગેરફાયદા (trade-offs) પણ છે.

  • તમે રિક્વેસ્ટ વગર ક્લાયન્ટને અપડેટ્સ પુશ કરી શકતા નથી.
  • જો કનેક્શન તૂટી જાય, તો તમે આંશિક પ્રતિસાદ (partial response) ગુમાવી દો છો.

જો તમે ચેટ એપ બનાવો છો, તો જ્યાં સુધી તમને bidirectional communication ની જરૂર ન હોય ત્યાં સુધી WebSockets ટાળો. HTTP streaming નો ઉપયોગ કરો. તે સરળ અને વધુ વિશ્વસનીય છે.

તમારી સ્ટ્રીમિંગ વ્યૂહરચના (streaming strategy) શું છે? તમે WebSockets નો ઉપયોગ કરો છો કે SSE નો? મને કોમેન્ટ્સમાં જણાવો.

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