Ho costruito un client per chat AI in streaming senza impazzire

Volevo costruire un'interfaccia di chat in cui l'IA rispondesse in tempo reale. Volevo quell'effetto macchina da scrivere fluido.

È stato più difficile di quanto pensassi. Il problema non era l'IA. Il problema era la pipeline tra l'API e il browser.

Ho provato tre modi diversi per risolvere il problema.

  1. Il metodo dell'attesa Ho chiamato l'API e ho aspettato la risposta completa prima di mostrarla. Funzionava, ma l'interfaccia utente si bloccava per diversi secondi. Gli utenti pensavano che l'app fosse rotta. Cliccavano su "Invia" ripetutamente. Era una pessima esperienza utente.

  2. Il metodo del polling Ho pensato di far inviare al server un ID di lavoro. Il client avrebbe poi richiesto aggiornamenti ogni secondo. Questo richiedeva una gestione pesante del server. Gli aggiornamenti apparivano in blocchi casuali. Non era fluido.

  3. Il metodo WebSocket Ho provato Socket.IO. Questo ha aggiunto una complessità enorme. Ho dovuto gestire riconnessioni, heartbeat e sincronizzazione dello stato. Per una semplice app di chat, i WebSocket erano eccessivi.

La soluzione era più semplice: Server-Sent Events (SSE).

La maggior parte delle API di IA invia già le risposte tramite SSE su HTTP. Ho smesso di cercare strumenti complessi e ho usato la fetch API nativa.

Usando response.body.getReader(), ho letto direttamente lo stream di byte. Ho analizzato io stesso il protocollo SSE. Questo approccio mantiene l'interfaccia utente reattiva e utilizza l'HTTP standard.

Perché funziona:

  • Nessun server WebSocket necessario.
  • Nessuna logica di riconnessione complessa.
  • Funziona con qualsiasi API che supporti SSE.
  • Puoi interrompere lo stream facilmente usando AbortController.

Ci sono degli svantaggi.

  • Non puoi inviare aggiornamenti al client senza una richiesta.
  • Se la connessione cade, perdi la risposta parziale.

Se costruisci un'app di chat, evita i WebSocket a meno che tu non abbia bisogno di una comunicazione bidirezionale. Attieniti allo streaming HTTP. È più semplice e affidabile.

Qual è la tua strategia di streaming? Usi i WebSocket o SSE? Dimmi la tua nei commenti.

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