Akıl Sağlığımı Yitirmeden Bir Streaming AI Chat İstemcisi İnşa Ettim

Yapay zekanın gerçek zamanlı yanıt verdiği bir sohbet arayüzü oluşturmak istiyordum. O pürüzsüz daktilo efektini istiyordum.

Sandığımdan daha zordu. Sorun yapay zeka değildi. Sorun, API ile tarayıcı arasındaki veri hattıydı (pipeline).

Bunu çözmek için üç farklı yöntem denedim.

  1. Bekleme Yöntemi API'yi çağırıyor ve yanıtı göstermeden önce tüm yanıtın gelmesini bekliyordum. Bu işe yarıyordu ancak kullanıcı arayüzü (UI) birkaç saniye boyunca donuyordu. Kullanıcılar uygulamanın bozulduğunu sanıyordu. Defalarca "Gönder" butonuna basıyorlardı. Bu, kötü bir kullanıcı deneyimiydi.

  2. Polling Yöntemi Sunucunun bir iş kimliği (job ID) göndermesini sağlamayı düşündüm. Ardından istemci her saniye güncellemeleri isteyecekti. Bu, ağır bir sunucu yönetimi gerektiriyordu. Güncellemeler rastgele parçalar halinde geliyordu. Pürüzsüz değildi.

  3. WebSocket Yöntemi Socket.IO denedim. Bu, muazzam bir karmaşıklık ekledi. Yeniden bağlantıları (reconnections), heartbeat sinyallerini ve durum senkronizasyonunu yönetmem gerekiyordu. Basit bir sohbet uygulaması için WebSockets gereğinden fazlaydı (overkill).

Çözüm daha basitti: Server-Sent Events (SSE).

Çoğu yapay zeka API'si zaten HTTP üzerinden SSE ile yanıtlar gönderiyor. Karmaşık araçlar aramayı bıraktım ve yerel fetch API'sini kullandım.

response.body.getReader() kullanarak bayt akışını doğrudan okudum. SSE protokolünü kendim ayrıştırdım. Bu yaklaşım, kullanıcı arayüzünü (UI) duyarlı tutar ve standart HTTP kullanır.

Neden işe yarıyor:

  • WebSocket sunucusuna gerek yok.
  • Karmaşık yeniden bağlantı mantığına gerek yok.
  • SSE destekleyen her API ile çalışır.
  • AbortController kullanarak akışı kolayca durdurabilirsiniz.

Bazı ödünler (trade-offs) var.

  • Bir istek olmadan istemciye güncelleme gönderemezsiniz.
  • Bağlantı koparsa, kısmi yanıtı kaybedersiniz.

Eğer bir sohbet uygulaması geliştiriyorsanız, çift yönlü (bidirectional) iletişime ihtiyacınız olmadıkça WebSockets'ten kaçının. HTTP streaming yöntemine bağlı kalın. Daha basit ve daha güvenilirdir.

Sizin akış stratejiniz nedir? WebSockets mi yoksa SSE mi kullanıyorsunuz? Yorumlarda bana bildirin.

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