Потоковая передача с ReadableStream
Постепенно передавайте большие ответы с помощью API потоков Web в +server.js
«Потоковая передача с ReadableStream» — бесплатный урок Sveltejs Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Sveltejs Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Sveltejs Academy содержит 4 уроков всего.
Зачем нужна потоковая передача
Большие ответы можно отправлять постепенно, чтобы клиент сразу начал получать данные.
API ReadableStream
Используйте стандартный API веб-потоков, чтобы создать потоковый ответ.
const stream = new ReadableStream({
async start(controller) {
for (const chunk of source) {
controller.enqueue(new TextEncoder().encode(chunk));
}
controller.close();
}
});
return new Response(stream);События, отправляемые сервером
Передавайте данные text/event-stream для обновлений в реальном времени.
Передача частями
HTTP передаёт каждую добавленную в очередь часть по сети сразу после её готовности.
Варианты использования
Журналы в реальном времени, генерация текста ИИ, загрузка и скачивание файлов, события о ходе выполнения.
Клиентская часть
На клиенте используйте response.body.getReader(), чтобы получать данные из потока.
Обратное давление
Поток приостанавливает создание данных, если потребитель работает медленно. Не допускайте блокировки производителя.
Закрытие
После завершения всегда вызывайте controller.close(). При ошибках вызывайте controller.error().
Адаптеры
Поддержка потоков зависит от адаптера. adapter-node работает, а у некоторых периферийных сред выполнения есть ограничения.
Производительность
Потоковая передача значительно сокращает время до получения первого байта и заметно ускоряет загрузку.
Объединение с загрузкой
Потоковая загрузка в SvelteKit возвращает промисы, которые разрешаются со временем, в отличие от обычных потоков.
Быстрая проверка
Каково главное преимущество потоковой передачи?
Итоги
Оберните ReadableStream в Response, чтобы постепенно передавать фрагменты из +server.js.
Изучай HTML с ИИ-репетитором — бесплатно
Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.
- Курсы
- 41
- Уроки
- 163
Часто задаваемые вопросы
Урок «Потоковая передача с ReadableStream» бесплатный?
Да — полный текст урока «Потоковая передача с ReadableStream» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Sveltejs Academy, подпишись на CoddyKit PRO. Курс Sveltejs Academy содержит 4 уроков всего.
Чему я научусь в уроке «Потоковая передача с ReadableStream»?
Постепенно передавайте большие ответы с помощью API потоков Web в +server.js Ты практикуешь Sveltejs Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Sveltejs Academy?
Предыдущий опыт не требуется. Sveltejs Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.
Сколько времени занимает урок «Потоковая передача с ReadableStream»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Sveltejs Academy?
Да. Каждый урок Sveltejs Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- +server.js: GET POST PUT DELETE
- Request и RequestEvent
- Возврат ответов JSON
- Потоковая передача с ReadableStream