Respons Kecerdasan Buatan secara Streaming
Pelajari cara mengalirkan token dari model kecerdasan buatan secara waktu nyata agar pengguna melihat jawaban muncul bertahap, tanpa menunggu respons lengkap.
Respons Kecerdasan Buatan secara Streaming adalah pelajaran AI Powered SaaS: Stripe + Auth + Billing + Deploy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar AI Powered SaaS: Stripe + Auth + Billing + Deploy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus AI Powered SaaS: Stripe + Auth + Billing + Deploy mencakup 4 pelajaran total.
Bagian dari pelajaran ini belum diterjemahkan dan ditampilkan dalam bahasa Inggris.
Why Stream Responses?
Large language models can take several seconds to produce a full answer. Streaming sends tokens to the client as they are generated, so the user sees text appear word by word.
- Lower perceived latency
- Users can start reading immediately
- Feels conversational, like a chat
How Streaming Works
Streaming relies on a long-lived HTTP connection. The server keeps the response open and pushes chunks as they arrive from the model provider.
Two common transports are Server-Sent Events and chunked HTTP responses. Most AI SDKs default to SSE.
Enabling Stream Mode
Most AI APIs accept a stream: true flag. Instead of a single JSON object you receive a sequence of small JSON events, each containing a piece of the answer.
const response = await client.chat.completions.create({
model: "gpt-4o-mini",
stream: true,
messages: [{ role: "user", content: "Explain streaming." }],
});Reading the Stream on the Server
The SDK returns an async iterable. You loop over it and forward each delta to your client.
for await (const chunk of response) {
const token = chunk.choices[0].delta.content || "";
process.stdout.write(token);
}Forwarding to the Browser with SSE
Wrap each token in an SSE data: frame. Set the right headers so the browser keeps the connection open.
res.setHeader("Content-Type", "text/event-stream");
res.setHeader("Cache-Control", "no-cache");
for await (const chunk of aiStream) {
const t = chunk.choices[0].delta.content || "";
res.write("data: " + JSON.stringify({ t }) + "\n\n");
}
res.end();Consuming the Stream in the UI
On the client, use the EventSource API or fetch with a reader. Append each token to your displayed message state.
const es = new EventSource("/api/chat");
es.onmessage = (e) => {
const { t } = JSON.parse(e.data);
setMessage((prev) => prev + t);
};Showing a Typing Indicator
While tokens stream in, show a blinking cursor or animated dots. Remove it once the stream closes. This reinforces the feeling that the AI is actively responding.
Handling Stream Errors
Connections can drop mid-stream. Always handle the error event and close the source. Offer a retry button and keep whatever partial text was already received.
es.onerror = () => {
es.close();
showRetry();
};Cancelling a Stream
Let users stop a long answer. With fetch you abort via an AbortController; with EventSource you call close(). Cancelling also saves token cost.
const controller = new AbortController();
fetch("/api/chat", { signal: controller.signal });
// later:
controller.abort();Cost and Token Accounting
Streaming does not change billing: you still pay for total tokens generated. Count tokens as they arrive, or read the final usage event some providers send when the stream ends.
Backpressure and Buffering
If the client reads slower than the model produces, tokens queue up. Most runtimes handle this automatically, but for very high throughput consider buffering small batches of tokens before flushing to reduce write overhead.
Quick Check
Test your understanding of streaming AI responses.
Recap
You learned to stream AI responses end to end:
- Enable
stream: trueon the API call - Iterate over chunks server-side and forward via SSE
- Append tokens in the UI with a typing indicator
- Handle errors, cancellation, and token accounting
Streaming makes AI features feel fast and conversational.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Respons Kecerdasan Buatan secara Streaming” gratis?
Ya — teks lengkap “Respons Kecerdasan Buatan secara Streaming” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus AI Powered SaaS: Stripe + Auth + Billing + Deploy, upgrade ke CoddyKit PRO. Kursus AI Powered SaaS: Stripe + Auth + Billing + Deploy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Respons Kecerdasan Buatan secara Streaming”?
Pelajari cara mengalirkan token dari model kecerdasan buatan secara waktu nyata agar pengguna melihat jawaban muncul bertahap, tanpa menunggu respons lengkap. Kamu berlatih AI Powered SaaS: Stripe + Auth + Billing + Deploy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai AI Powered SaaS: Stripe + Auth + Billing + Deploy?
Tidak diperlukan pengalaman sebelumnya. AI Powered SaaS: Stripe + Auth + Billing + Deploy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.
Berapa lama pelajaran “Respons Kecerdasan Buatan secara Streaming” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran AI Powered SaaS: Stripe + Auth + Billing + Deploy ini?
Ya. Setiap pelajaran AI Powered SaaS: Stripe + Auth + Billing + Deploy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Integrasi API Layanan Kecerdasan Buatan
- Dasar-Dasar Rekayasa Prompt
- Menyematkan Kecerdasan Buatan ke Antarmuka Pengguna
- Respons Kecerdasan Buatan secara Streaming