Trasmettere in streaming le risposte AI nell'interfaccia
Impari a trasmettere al frontend l'output AI token per token, così il suo AI SaaS risulta veloce e reattivo invece di bloccarsi durante le generazioni lunghe.
Trasmettere in streaming le risposte AI nell'interfaccia è una lezione AI SaaS Builder gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento AI SaaS Builder, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso AI SaaS Builder include 4 lezioni in totale.
Perché lo streaming migliora l'esperienza utente
Aspettare 10 secondi per una risposta completa dà l'impressione che qualcosa non funzioni. Lo streaming mostra il testo mentre viene generato, facendo sembrare l'app veloce e reattiva.
Come funziona lo streaming
Il modello emette token in modo incrementale. Il server inoltra ogni blocco al browser, che lo aggiunge allo schermo.
Server-Sent Events
SSE è un semplice flusso unidirezionale dal server al client tramite HTTP, ideale per lo streaming dei token.
res.setHeader('Content-Type', 'text/event-stream')
res.write('data: Hello\n\n')
res.write('data: world\n\n')Consumare uno stream sul client
Usi il lettore di streaming di Fetch (o EventSource) per leggere i blocchi e aggiornare lo stato non appena arrivano.
const reader = res.body.getReader()
while (true) {
const { value, done } = await reader.read()
if (done) break
appendText(new TextDecoder().decode(value))
}Rendering incrementale
Aggiunga i blocchi a un buffer di stato ed esegua il rendering. Eviti di ridisegnare l'intera pagina per ogni token, così l'interfaccia rimarrà fluida.
setText(prev => prev + chunk)Mostrare un indicatore di digitazione
Prima che arrivi il primo token, mostri un'animazione di caricamento o del cursore, così gli utenti sapranno che l'elaborazione è iniziata.
Gestire l'annullamento
Permetta agli utenti di interrompere una generazione lunga. Interrompa la richiesta per risparmiare token e denaro.
const controller = new AbortController()
fetch('/generate', { signal: controller.signal })
// stop button:
controller.abort()Eseguire lo streaming del Markdown in sicurezza
Il Markdown parziale può essere visualizzato in modo anomalo durante lo streaming. Esegua il rendering progressivamente, ma sanifichi l'HTML finale per prevenire injection.
Gestire gli errori durante lo streaming
Gli stream possono interrompersi a metà. Rilevi l'interruzione dello stream e mostri un'opzione chiara per riprovare, invece di lasciare del testo troncato.
Considerazioni sull'accessibilità
Il testo che si aggiorna rapidamente può sovraccaricare gli screen reader. Utilizzi regioni live con modalità polite e annunci il completamento, non ogni token.
<div aria-live="polite">{streamedText}</div>Quando non utilizzare lo streaming
Per output strutturati brevi (come un singolo oggetto JSON), lo streaming aggiunge complessità con pochi vantaggi. Lo riservi al testo lungo e leggibile.
Verifica rapida
Verifichi le Sue conoscenze sullo streaming.
Riepilogo
Ha imparato come funziona lo streaming dei token, come fornirlo con SSE, consumarlo sul client, eseguire il rendering incrementale, mostrare gli indicatori di digitazione, supportare la cancellazione, gestire gli errori durante lo streaming, mantenerlo accessibile e capire quando lo streaming non vale la pena.
Domande Frequenti
La lezione «Trasmettere in streaming le risposte AI nell'interfaccia» è gratuita?
Sì — il testo completo di «Trasmettere in streaming le risposte AI nell'interfaccia» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso AI SaaS Builder, passa a CoddyKit PRO. Il corso AI SaaS Builder include 4 lezioni in totale.
Cosa imparerò in «Trasmettere in streaming le risposte AI nell'interfaccia»?
Impari a trasmettere al frontend l'output AI token per token, così il suo AI SaaS risulta veloce e reattivo invece di bloccarsi durante le generazioni lunghe. Eserciti AI SaaS Builder con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare AI SaaS Builder?
Non è richiesta alcuna esperienza precedente. AI SaaS Builder su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.
Quanto tempo richiede la lezione «Trasmettere in streaming le risposte AI nell'interfaccia»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione AI SaaS Builder?
Sì. Ogni lezione AI SaaS Builder include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Framework frontend per SaaS
- Visualizzare gli output dell’IA
- Best practice per l’esperienza utente (UX)
- Trasmettere in streaming le risposte AI nell'interfaccia