Diffusion avec ReadableStream
Diffusez progressivement les réponses volumineuses avec l’API Web Streams dans +server.js.
Diffusion avec ReadableStream est une leçon Sveltejs Academy 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 Sveltejs Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Sveltejs Academy comprend 4 leçons au total.
Pourquoi diffuser en continu
Les réponses volumineuses peuvent être envoyées progressivement afin que le client commence immédiatement à recevoir les données.
API ReadableStream
Utilisez l’API Web standard des flux pour créer une réponse diffusée en continu.
const stream = new ReadableStream({
async start(controller) {
for (const chunk of source) {
controller.enqueue(new TextEncoder().encode(chunk));
}
controller.close();
}
});
return new Response(stream);Événements envoyés par le serveur
Diffusez des données text/event-stream pour fournir des mises à jour en direct.
Transfert par blocs
HTTP transmet chaque bloc mis en file d’attente sur le réseau dès qu’il est prêt.
Cas d’utilisation
Journaux en temps réel, génération de texte par IA, envois et téléchargements de fichiers, événements de progression.
Côté client
Utilisez response.body.getReader() côté client pour consommer le flux.
Contre-pression
Le flux suspend sa production lorsque le consommateur est lent. Évitez de bloquer le producteur.
Fermeture
Appelez toujours controller.close() lorsque le traitement est terminé. En cas d’erreur, appelez controller.error().
Adaptateurs
La prise en charge des flux varie selon l’adaptateur. adapter-node fonctionne, mais certains environnements d’exécution en périphérie ont des limitations.
Performances
La diffusion en continu améliore considérablement le temps jusqu’au premier octet et la vitesse perçue.
Combiner avec le chargement
Le chargement en continu de SvelteKit renvoie des promesses qui se résolvent au fil du temps, à la différence des flux bruts.
Vérification rapide
Quel est le principal avantage de la diffusion en continu ?
Récapitulatif
Enveloppez un ReadableStream dans une Response pour diffuser progressivement des blocs depuis +server.js.
Apprends HTML avec un tuteur IA — gratuit
Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.
- Cours
- 41
- Leçons
- 163
Questions Fréquemment Posées
La leçon « Diffusion avec ReadableStream » est-elle gratuite ?
Oui — le texte complet de « Diffusion avec ReadableStream » 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 Sveltejs Academy, passe à CoddyKit PRO. Le cours Sveltejs Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Diffusion avec ReadableStream » ?
Diffusez progressivement les réponses volumineuses avec l’API Web Streams dans +server.js. Tu pratiques Sveltejs Academy 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 Sveltejs Academy ?
Aucune expérience préalable n'est requise. Sveltejs Academy 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 « Diffusion avec ReadableStream » ?
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 Sveltejs Academy ?
Oui. Chaque leçon Sveltejs Academy 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
- +server.js : GET POST PUT DELETE
- Request et RequestEvent
- Renvoyer des réponses JSON
- Diffusion avec ReadableStream