이 번역은 완료되지 않았습니다. 이 문서를 번역해 주세요.

This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

Streams API는 Javascript를 이용해 네트워크를 통해 전송된 데이터 스트림에 접근하여 원하는 대로 처리가 가능한 API를 제공합니다.

개념과 사용법

Streaming은 네트워크를 통해 받은 리소스를 작은 조각으로 나누어, Bit 단위로 처리합니다. 이는 브라우저가 수신한 자원을 웹페이지에 표현할 때 주로 사용하는 방법입니다. — Video buffer는 재생되기 전 천천히 채워지며 가끔 이미지도 천천히 로딩되는 것을 보실 수 있을 겁니다..

하지만 Javascript에서는 지금까지 불가능했습니다. 이전에는 (비디오나 텍스트 파일 등의) 리소스를 처리하기 위해서 우선, 전체 파일을 다운로드 받은 후 알맞은 포맷으로 파싱된 후에야, 전송된 전체 데이터를 처리할 수 있었습니다.

With Javascript에 Stream이 도입된 후에는 모든 것이 바뀌었는데, 이제 Buffer, String 또는 blob 없이도 Javascript를 통해 Raw Data를 비트 단위로 처리할 수 있습니다.

장점은 또 있습니다 — Stream의 시작 또는 종료를 감지할 수 있으며, 여러 stream을 엮어서 에러를 처리하거나 필요한 경우 stream을 취소할 수도 있습니다. 또한 stream이 읽어들이는 속도에 따라 반응할 수도 있지요.

Stream의 주요한 기본 사용법은 응답 데이터를 stream으로 만드는 것입니다. fetch request를 통해 정상적으로 전송된 응답 Body는 ReadableStream로 표현 가능합니다. 또한 ReadableStream.getReader()를 통해 Reader 객체를 얻어 데이터를 읽을 수도 있으며, ReadableStream.cancel()로 Stream을 취소하는 것 등이 가능합니다.

조금 더 복잡한 사용법은 ReadableStream() 생성자를 통해 사용자가 직접 Stream을 생성하는 것입니다. 예를 들자면 service worker에 전달할 데이터를 Stream으로 만들 수도 있습니다.

WritableStream을 사용하면 Stream에 데이터를 쓰는 것도 가능합니다..

Note: Streams API concepts, Using readable streams,  Using writable streams — 페이지에서 stream에 관한 더 자세한 이론과 예제를 찾을 수 있습니다.

Stream interfaces

Readable streams

ReadableStream
Represents a readable stream of data. It can be used to handle response streams of the Fetch API, or developer-defined streams (e.g. a custom ReadableStream() constructor).
ReadableStreamDefaultReader
Represents a default reader that can be used to read stream data supplied from a network (e.g. a fetch request).
ReadableStreamDefaultController
Represents a controller allowing control of a ReadableStream's state and internal queue. Default controllers are for streams that are not byte streams.

Writable streams

WritableStream
Provides a standard abstraction for writing streaming data to a destination, known as a sink. This object comes with built-in backpressure and queuing.
WritableStreamDefaultWriter
Represents a default writable stream writer that can be used to write chunks of data to a writable stream.
WritableStreamDefaultController
Represents a controller allowing control of a WritableStream's state. When constructing a WritableStream, the underlying sink is given a corresponding WritableStreamDefaultController instance to manipulate.
ByteLengthQueuingStrategy
Provides a built-in byte length queuing strategy that can be used when constructing streams.
CountQueuingStrategy
Provides a built-in chunk counting queuing strategy that can be used when constructing streams.

Extensions to other APIs

Request
When a new Request object is constructed, you can pass it a ReadableStream in the body property of its RequestInit dictionary.  This Request could then be passed to a WindowOrWorkerGlobalScope.fetch() to commence fetching the stream.
Body
The response Body returned by a successful fetch request is exposed by default as a ReadableStream, and can have a reader attached to it, etc.

Important: these are not implemented anywhere as yet, and questions have been raised as to whether the spec details are in a finished enough state for them to be implemented. This may change over time.

ReadableStreamBYOBReader
Represents a BYOB ("bring your own buffer") reader that can be used to read stream data supplied by the developer (e.g. a custom ReadableStream() constructor).
ReadableByteStreamController
Represents a controller allowing control of a ReadableStream's state and internal queue. Byte stream controllers are for byte streams.
ReadableStreamBYOBRequest
Represents a pull into request in a ReadableByteStreamController.

Examples

We have created a directory of examples to go along with the Streams API documentation — see mdn/dom-examples/streams. The examples are as follows:

  • Simple stream pump: This example shows how to consume a ReadableStream and pass its data to another.
  • Grayscale a PNG: This example shows how a ReadableStream of a PNG can be turned into grayscale.
  • Simple random stream: This example shows how to use a custom stream to generate random strings, enqueue them as chunks, and then read them back out again.
  • Simple tee example: This example extends the Simple random stream example, showing how a stream can be teed and both resulting streams can be read independently.
  • Simple writer: This example shows how to to write to a writable stream, then decode the stream and write the contents to the UI.
  • Unpack chunks of a PNG: This example shows how pipeThrough() can be used to transform a ReadableStream into a stream of other data types by transforming a data of a PNG file into a stream of PNG chunks.

Examples from other developers:

Specifications

Specification Status Comment
Streams Living Standard Initial definition.

Browser compatibility

WritableStream

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic support
Experimental
Chrome Full support 59Edge Full support 16Firefox No support NoIE No support NoOpera Full support 47Safari ? WebView Android Full support 59Chrome Android Full support 59Edge Mobile No support NoFirefox Android No support NoOpera Android Full support 47Safari iOS ? Samsung Internet Android Full support 7.0
WritableStream() constructor
Experimental
Chrome Full support 59Edge Full support 16Firefox No support NoIE No support NoOpera Full support 47Safari ? WebView Android Full support 59Chrome Android Full support 59Edge Mobile No support NoFirefox Android No support NoOpera Android Full support 47Safari iOS ? Samsung Internet Android Full support 7.0
abort
Experimental
Chrome Full support 59Edge Full support 16Firefox No support NoIE No support NoOpera Full support 47Safari ? WebView Android Full support 59Chrome Android Full support 59Edge Mobile No support NoFirefox Android No support NoOpera Android Full support 47Safari iOS ? Samsung Internet Android Full support 7.0
getWriter
Experimental
Chrome Full support 59Edge Full support 16Firefox No support NoIE No support NoOpera Full support 47Safari ? WebView Android Full support 59Chrome Android Full support 59Edge Mobile No support NoFirefox Android No support NoOpera Android Full support 47Safari iOS ? Samsung Internet Android Full support 7.0
locked
Experimental
Chrome Full support 59Edge Full support 16Firefox No support NoIE No support NoOpera Full support 47Safari ? WebView Android Full support 59Chrome Android Full support 59Edge Mobile No support NoFirefox Android No support NoOpera Android Full support 47Safari iOS ? Samsung Internet Android Full support 7.0

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.

See also

문서 태그 및 공헌자

이 페이지의 공헌자: ahnzaz, chrisdavidmills
최종 변경자: ahnzaz,