Ajax 简明教程

Stream API - Basics

借助 JavaScript 编程语言,流 API 允许开发人员访问通过网络接收的数据流,并根据他们的需求逐位处理它们。流是我们希望通过网络分批接收到并逐位处理的小批量数据序列。

在流式传输之前,如果我们想要处理视频、音频或文本文件,我们需要从网络下载该完整文件并等待将其反序列化为指定格式,然后处理已下载的完整文件。

在引入流之后,整个工作文化发生了变化,现在我们可以使用 JavaScript 在客户端接收数据之后立即开始逐位处理数据,而无需创建任何额外的缓冲区或 Blob。使用流,我们可以执行各种任务,如查找流的开始和结束,或者可以将流串联起来,或者可以轻松处理错误,可以取消流,还可以执行更多操作。

流式传输可用于创建真实世界的应用程序,如 Netflix、亚马逊 Prime 视频、Zee5、Voot、YouTube 等视频流应用程序。这样,用户可以轻松地在网上观看电影、电视剧等,而无需下载它们。流 API 提供各种功能,如 ReadableStream、分流、WritableStream、管道链、反压、内部队列和排队策略。让我们逐一详细讨论它们。

Readable Stream

可读流允许你使用 ReadableStream 对象在 JavaScript 中从源读取数据/块。块是要由读取器按顺序读取的小块数据。它可以是单个位,也可以是类型化数组之类的较大内容。要读取可读流,API 提供一个读取器。它从流中读取块,然后处理块的数据。一次只能有一个读取器读取流,不允许其他读者读取该流。

stream basic

Writable Stream

可写流允许你使用 Writable Stream 对象在 JavaScript 中写入数据。数据由写入器写入流。写入器以块的形式(一次一个块)写入数据。当写入器被创建并开始向流写入数据时,该流就会被锁定,并且不允许任何其他写入器访问该流,并使用内部队列来跟踪写入器写入的块。

stream basic2

Teeing

分流是一个将流拆分为流的两个相同副本的过程,以便两个独立的读者可以同时读取该流。我们可以借助 ReableStream.tee() 方法实现分流。该方法返回一个包含指定流的两个相同副本的数组,并且可以由两个读取器读取。

teeing

Pipe Chains

管道链是一个将多个流连接在一起以创建数据处理流的过程。在流 API 中,我们可以借助管道链结构将一个流管道到另一个流中。管道链的起点称为原始源,管道链的最后一个点称为最终接收器。

管道流,我们可以使用以下方法:

ReadableStream.pipeThrough() − 该方法用于通过转换流对当前流进行管道化。转换流包含一对可读和可写流。

ReadableStream.pipeTo() − 该方法用于将当前 ReadableStream 管道到指定的 WritableStream,并将返回一个 promise,该 promise 在管道处理成功完成或因某种错误而被拒绝时解析。

pipe chains

Backpressure

反压是流 API 中的一个特殊概念。在这个过程中,单个流或管道链控制读/写速度。假设我们有一个流,此流很忙,无法接受新的数据块,因此会通过链发送一条反向消息,告诉转换流减慢块的传递速度,以便我们可以避免瓶颈。

我们可以在 ReadableStream 中使用反压,因此我们需要在 ReadableStreamDefaultContriller.desiredSize 属性的帮助下找到消费者所需的数据块大小。如果数据块大小很小,则 ReadableStream 可以指示它的底层来源,以停止发送更多数据,并将反压与流链一起发送回去。

当消费者再次想要接收的数据时,我们使用 pull 方法告诉底层来源将数据发送到流。

Internal queues and queuing Strategies

内部队列是跟踪尚未处理或完成的数据块的队列。例如,在可读流中,内部队列跟踪存在于队列中但尚未读取的数据块。内部队列使用队列策略,表示根据内部队列状态如何发送反压信号。

Conclusion

因此,这些是流 API 的基本概念。它通常用于在线流媒体。当你在线观看视频时,浏览器或应用程序在后台接收连续的数据块流,然后由浏览器或应用程序处理这些块以显示视频。现在在下一篇文章中,我们将学习 Stream API 的可读流。