Я создал стриминговый AI-чат-клиент и не сошел с ума
Я хотел создать интерфейс чата, в котором ИИ отвечает в режиме реального времени. Мне нужен был этот плавный эффект «печатной машинки».
Это оказалось сложнее, чем я думал. Проблема была не в ИИ. Проблема заключалась в пайплайне между API и браузером.
Я перепробовал три разных способа решения этой задачи.
Метод ожидания Я вызывал API и ждал полного ответа, прежде чем отобразить его. Это работало, но интерфейс замирал на несколько секунд. Пользователи думали, что приложение сломалось, и многократно нажимали кнопку «Отправить». Это был плохой пользовательский опыт.
Метод опроса (Polling) Я думал о том, чтобы сервер отправлял ID задачи, а клиент запрашивал обновления каждую секунду. Это требовало серьезного управления сервером. Обновления появлялись случайными кусками. Это не было плавно.
Метод WebSocket Я пробовал Socket.IO. Это добавило огромную сложность. Мне пришлось управлять переподключениями, heartbeats и синхронизацией состояний. Для простого чат-приложения WebSockets были избыточны.
Решение оказалось проще: Server-Sent Events (SSE).
Большинство AI API уже отправляют ответы через SSE по HTTP. Я перестал искать сложные инструменты и использовал нативный fetch API.
Используя response.body.getReader(), я считывал поток байтов напрямую. Я сам парсил протокол SSE. Такой подход сохраняет отзывчивость интерфейса и использует стандартный HTTP.
Почему это работает:
- Не нужен WebSocket-сервер.
- Нет сложной логики переподключения.
- Работает с любым API, поддерживающим SSE.
- Можно легко остановить поток с помощью
AbortController.
Есть и свои недостатки:
- Вы не можете отправлять обновления клиенту без запроса.
- Если соединение разрывается, вы теряете частичный ответ.
Если вы создаете чат-приложение, избегайте WebSockets, если только вам не нужна двусторонняя связь. Придерживайтесь HTTP-стриминга. Это проще и надежнее.
А какая у вас стратегия стриминга? Используете WebSockets или SSE? Расскажите в комментариях.
Источник: https://dev.to/__c1b9e06dc90a7e0a676b/i-built-a-streaming-ai-chat-client-without-losing-my-mind-3gi0