Diffuser les réponses de l’IA en continu
Apprenez à transmettre en temps réel les jetons d’un modèle d’IA afin que les utilisateurs voient les réponses apparaître progressivement, sans attendre la réponse complète.
Diffuser les réponses de l’IA en continu est une leçon AI Powered SaaS: Stripe + Auth + Billing + Deploy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage AI Powered SaaS: Stripe + Auth + Billing + Deploy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours AI Powered SaaS: Stripe + Auth + Billing + Deploy comprend 4 leçons au total.
Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.
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.
Questions Fréquemment Posées
La leçon « Diffuser les réponses de l’IA en continu » est-elle gratuite ?
Oui — le texte complet de « Diffuser les réponses de l’IA en continu » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours AI Powered SaaS: Stripe + Auth + Billing + Deploy, passe à CoddyKit PRO. Le cours AI Powered SaaS: Stripe + Auth + Billing + Deploy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Diffuser les réponses de l’IA en continu » ?
Apprenez à transmettre en temps réel les jetons d’un modèle d’IA afin que les utilisateurs voient les réponses apparaître progressivement, sans attendre la réponse complète. Tu pratiques AI Powered SaaS: Stripe + Auth + Billing + Deploy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer AI Powered SaaS: Stripe + Auth + Billing + Deploy ?
Aucune expérience préalable n'est requise. AI Powered SaaS: Stripe + Auth + Billing + Deploy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.
Combien de temps prend la leçon « Diffuser les réponses de l’IA en continu » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon AI Powered SaaS: Stripe + Auth + Billing + Deploy ?
Oui. Chaque leçon AI Powered SaaS: Stripe + Auth + Billing + Deploy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Intégration d’API de services d’intelligence artificielle
- Bases de la conception de prompts
- Intégrer l’intelligence artificielle à l’interface utilisateur
- Diffuser les réponses de l’IA en continu