Chrome 124 发布 WebSocketStream 和 ReadableStream 异步迭代

发生了什么

• Chrome 124（稳定版）增加了两个平台级的流式改进：WebSocketStream API（将 WHATWG Streams 与 WebSockets 集成）和对 ReadableStream 的异步迭代支持。两者均已在稳定通道中发布，旨在使 Web 上的流式 I/O 对客户端代码更简单、更稳健。（developer.chrome.com）

这对全栈团队的重要性（实际影响）

• ReadableStream + for-await-of：您现在可以直接使用异步迭代协议（for await...of）消费 Response.body 或其他 ReadableStreams。这消除了大量的 getReader()/read() 样板代码，简化了增量解析（NDJSON、行分隔的 JSON、流式解析器），减少了意外的缓冲，并使流式代码更加清晰且不易出错。
• WebSocketStream → 背压和流的集成：WebSocketStream 在打开后暴露了一对 ReadableStream 和 WritableStream，因此客户端代码可以使用 TransformStream、管道和原生背压语义，而不是临时缓冲。对于实时应用，这减少了消息排队，帮助防止客户端内存膨胀，并使客户端流式代码与在 fetch、文件和媒体流中使用的 Streams API 对齐。
• 与服务器端流的融合：随着更简单的客户端流式习惯，预计会有更多应用采用流式响应（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 是一个可以使用 for-await-of 的 ReadableStream
// writable 是一个可以使用 write() 或 pipeTo() 的 WritableStream

团队接下来应该做什么（简短清单）

• 特性检测并逐步增强：检测 ReadableStream[Symbol.asyncIterator] / WebSocketStream，并在缺失时回退到 getReader()/WebSocket 消息处理程序。
• 将流式测试添加到 CI：添加测试以消费大型流式响应和长时间运行的 WebSocket 会话，以捕捉在负载下的内存或排序问题。
• 更新客户端解析代码：在可行的情况下，用 for-await-of 替换手动读取循环——这减少了错误并提高了可读性。
• 为 WebSocketStream 规划优雅降级：除 Chromium 外的浏览器可能尚未提供 WebSocketStream；实现一个回退包装器，通过普通 WebSocket（缓冲 + 手动背压近似）暴露相同的异步/流式契约。
• 评估服务器行为：当客户端执行了解背压的写入或增量消费流时，验证您的服务器（和代理）是否正确处理流；使用您的真实世界 WebSocket 服务器库（ws、uWebSockets、Fastify websockets 等）进行测试，以了解隐式缓冲和性能影响。

兼容性和注意事项

• WebSocketStream 仍然是新功能，并在多个文档中标记为实验性；目前跨浏览器支持有限。ReadableStream 异步迭代的采用更广泛，但仍需对旧引擎进行特性检测。
• 不要假设应用级背压会神奇地修复服务器负载模式——相应地设计端到端测试和速率限制。

总结 Chrome 124 的 WebSocketStream 和 ReadableStream 异步迭代是小的 API 变化，但对流式工作负载的开发者体验和可靠性提升影响巨大。全栈团队应首先进行特性检测，添加流式测试，并逐步采用 for-await-of 和基于流的 WebSocket 代码，同时为不支持的浏览器提供稳健的回退。（developer.chrome.com）

来源：Chrome 124 发布说明 (developer.chrome.com)。 (developer.chrome.com)

来源

• Source