Chrome 124 выпустил WebSocketStream и асинхронную итерацию ReadableStream

ReactNode.jsDevOps

Что произошло

  • Chrome 124 (стабильная версия) добавляет два улучшения на уровне платформы: API WebSocketStream (интеграция WHATWG Streams с WebSockets) и поддержку асинхронной итерации для ReadableStream. Оба новшества появились в стабильном канале и предназначены для упрощения потокового ввода-вывода в вебе и повышения надежности клиентского кода. (developer.chrome.com)

Почему это важно для команд полного стека (практическое воздействие)

  • ReadableStream + for-await-of: Теперь вы можете напрямую использовать Response.body или другие ReadableStreams с помощью протокола асинхронной итерации (for await...of). Это устраняет множество шаблонного кода getReader()/read(), упрощает инкрементальный парсинг (NDJSON, JSON с разделителями строк, потоковые парсеры), уменьшает случайное буферизование и делает код потоковой передачи гораздо более ясным и менее подверженным ошибкам.
  • WebSocketStream → обратное давление и интеграция потоков: WebSocketStream предоставляет пару ReadableStream и WritableStream для сокета после его открытия, так что клиентский код может использовать TransformStream, пайпинг и семантику обратного давления вместо произвольного буферизования. Для приложений в реальном времени это снижает очередность сообщений, помогает предотвратить переполнение памяти на стороне клиента и согласует код потоковой передачи клиента с API Streams, используемым в fetch, файлах и медиа-потоках.
  • Конвергенция с серверной потоковой передачей: С более простыми идиомами клиентского потока ожидайте, что больше приложений начнут использовать потоковые ответы (фрагменты RSC/SSR, прогрессивный JSON) и потоковые загрузки. Команды полного стека должны учитывать оба конца: обнаружение функций на клиенте/резервные варианты и поведение сервера при обратном давлении или переменных скоростях потребления.

Маленькие, конкретные примеры

  • Асинхронная итерация ReadableStream (клиент):
const res = await fetch('/streaming-endpoint');
for await (const chunk of res.body) {
  // chunk — это Uint8Array; обрабатывайте инкрементальные байты/кадры здесь
}
  • WebSocketStream (контур клиента):
const ws = new WebSocketStream('wss://example.com/ws');
const { readable, writable } = await ws.opened;
// readable — это ReadableStream, который вы можете использовать с for-await-of
// writable — это WritableStream, в который вы можете записывать() или pipeTo()

Что командам следует делать дальше (короткий список)

  • Обнаружение функций и прогрессивное улучшение: обнаружьте ReadableStream[Symbol.asyncIterator] / WebSocketStream и используйте getReader()/обработчики сообщений WebSocket в случае их отсутствия.
  • Добавьте тесты потоковой передачи в CI: добавьте тесты, которые обрабатывают большие потоковые ответы и длительные сессии WebSocket, чтобы выявить проблемы с памятью или порядком при нагрузке.
  • Обновите код парсинга на клиенте: замените ручные циклы чтения на for-await-of, где это возможно — это уменьшает количество ошибок и улучшает читаемость.
  • Запланируйте плавное ухудшение для WebSocketStream: браузеры, отличные от Chromium, могут еще не поддерживать WebSocketStream; реализуйте резервную обертку, которая предоставляет тот же асинхронный/потоковый контракт через обычный WebSocket (буферизация + приближения к ручному обратному давлению).
  • Оцените поведение сервера: когда клиент выполняет записи с учетом обратного давления или инкрементально потребляет потоки, убедитесь, что ваш сервер (и прокси) правильно обрабатывают потоки; протестируйте с вашей реальной библиотекой сервера WebSocket (ws, uWebSockets, Fastify websockets и т.д.), чтобы понять неявное буферизование и влияние на производительность.

Совместимость и предостережения

  • WebSocketStream все еще новый и помечен как экспериментальный в нескольких документах; кросс-браузерная поддержка сегодня ограничена. Асинхронная итерация ReadableStream имеет более широкое распространение, но все еще требует обнаружения функций для старых движков.
  • Не предполагайте, что обратное давление на уровне приложения волшебным образом исправляет шаблоны нагрузки на сервер — проектируйте тесты от конца до конца и лимиты скорости соответственно.

Резюме WebSocketStream и асинхронная итерация ReadableStream в Chrome 124 — это небольшие изменения API с большими преимуществами для разработчиков и надежностью для потоковых нагрузок. Команды полного стека должны начать с обнаружения функций, добавления тестов потоковой передачи и прогрессивного внедрения for-await-of и кода WebSocket на основе потоков, обеспечивая при этом надежные резервные варианты для браузеров, не поддерживающих эти функции. (developer.chrome.com)

Источник: Примечания к выпуску Chrome 124 (developer.chrome.com). (developer.chrome.com)

Источник

Читать дальше