J'ai construit un client de chat IA en streaming sans perdre la tête

Je voulais construire une interface de chat où l'IA répond en temps réel. Je voulais cet effet de machine à écrire fluide.

C'était plus difficile que je ne le pensais. Le problème n'était pas l'IA. Le problème était le pipeline entre l'API et le navigateur.

J'ai essayé trois méthodes différentes pour résoudre cela.

  1. La méthode de l'attente J'appelais l'API et j'attendais la réponse complète avant de l'afficher. Cela fonctionnait, mais l'interface utilisateur (UI) se figeait pendant plusieurs secondes. Les utilisateurs pensaient que l'application était cassée. Ils cliquaient sur « Envoyer » de manière répétée. C'était une mauvaise expérience utilisateur.

  2. La méthode du polling J'ai pensé à faire en sorte que le serveur envoie un ID de tâche. Le client demanderait ensuite des mises à jour chaque seconde. Cela nécessitait une gestion lourde du serveur. Les mises à jour apparaissaient par morceaux aléatoires. Ce n'était pas fluide.

  3. La méthode WebSocket J'ai essayé Socket.IO. Cela a ajouté une complexité massive. J'ai dû gérer les reconnexions, les heartbeats et la synchronisation de l'état. Pour une simple application de chat, les WebSockets étaient excessifs.

La solution était plus simple : les Server-Sent Events (SSE).

La plupart des API d'IA envoient déjà des réponses via SSE sur HTTP. J'ai arrêté de chercher des outils complexes et j'ai utilisé l'API fetch native.

En utilisant response.body.getReader(), j'ai lu le flux d'octets directement. J'ai moi-même analysé le protocole SSE. Cette approche permet de garder l'UI réactive et utilise le protocole HTTP standard.

Pourquoi cela fonctionne :

  • Pas besoin de serveur WebSocket.
  • Pas de logique de reconnexion complexe.
  • Cela fonctionne avec n'importe quelle API prenant en charge SSE.
  • Vous pouvez arrêter le flux facilement en utilisant AbortController.

Il y a des compromis.

  • Vous ne pouvez pas envoyer de mises à jour au client sans une requête.
  • Si la connexion est interrompue, vous perdez la réponse partielle.

Si vous construisez une application de chat, évitez les WebSockets, à moins que vous n'ayez besoin d'une communication bidirectionnelle. Tenez-vous-en au streaming HTTP. C'est plus simple et plus fiable.

Quelle est votre stratégie de streaming ? Utilisez-vous les WebSockets ou le SSE ? Dites-le-moi dans les commentaires.

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