𝗜 𝗕𝘂𝗶𝗹𝘁 𝗮 𝗦𝘁𝗿𝗲𝗮𝗺𝗶𝗻𝗴 𝗔𝗜 𝗖𝗵𝗮𝘁 𝗖𝗹𝗶𝗲𝗻𝘁 𝗪𝗶𝘁𝗵𝗼𝘂𝘁 𝗟𝗼𝘀𝗶𝗻𝗴 𝗠𝘆 𝗠𝗶𝗻𝗱

Saya ingin membangun antarmuka chat di mana AI merespons secara real-time. Saya menginginkan efek mesin tik yang mulus itu.

Ternyata lebih sulit dari yang saya kira. Masalahnya bukan pada AI-nya. Masalahnya ada pada alur (pipeline) antara API dan browser.

Saya mencoba tiga cara berbeda untuk menyelesaikannya.

  1. Metode Menunggu (The Wait Method) Saya memanggil API dan menunggu respons lengkap sebelum menampilkannya. Ini berhasil, tetapi UI membeku selama beberapa detik. Pengguna mengira aplikasinya rusak. Mereka mengklik "Send" berulang kali. Ini adalah pengalaman pengguna yang buruk.

  2. Metode Polling (The Polling Method) Saya terpikir untuk meminta server mengirimkan job ID. Kemudian klien akan meminta pembaruan setiap detik. Ini membutuhkan manajemen server yang berat. Pembaruan muncul dalam potongan-potongan acak. Tidak terasa mulus.

  3. Metode WebSocket (The WebSocket Method) Saya mencoba Socket.IO. Ini menambah kompleksitas yang masif. Saya harus mengelola koneksi ulang (reconnections), heartbeat, dan sinkronisasi status (state synchronization). Untuk aplikasi chat sederhana, WebSockets terlalu berlebihan (overkill).

Solusinya lebih sederhana: Server-Sent Events (SSE).

Sebagian besar API AI sudah mengirimkan respons melalui SSE melalui HTTP. Saya berhenti mencari alat yang rumit dan menggunakan fetch API bawaan.

Dengan menggunakan response.body.getReader(), saya membaca aliran byte secara langsung. Saya memparsing protokol SSE sendiri. Pendekatan ini menjaga UI tetap responsif dan menggunakan HTTP standar.

Mengapa ini berhasil:

  • Tidak butuh server WebSocket.
  • Tidak ada logika koneksi ulang yang rumit.
  • Berjalan dengan API apa pun yang mendukung SSE.
  • Anda dapat menghentikan aliran dengan mudah menggunakan AbortController.

Ada konsekuensi (trade-offs).

  • Anda tidak dapat mengirimkan pembaruan ke klien tanpa adanya permintaan (request).
  • Jika koneksi terputus, Anda akan kehilangan respons parsialnya.

Jika Anda membangun aplikasi chat, hindari WebSockets kecuali Anda membutuhkan komunikasi dua arah (bidirectional). Tetaplah gunakan HTTP streaming. Ini lebih sederhana dan lebih andal.

Apa strategi streaming Anda? Apakah Anda menggunakan WebSockets atau SSE? Beritahu saya di kolom komentar.

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