Thetee() method of theReadableStream interfacetees the current readable stream, returning atwo-element array containing the two resulting branches asnewReadableStream instances.

This is useful for allowing two readers to read a stream sequentially or simultaneously,perhaps at different speeds.For example, you might do this in a ServiceWorker if you want to fetcha response from the server and stream it to the browser, but also stream it to theServiceWorker cache. Since a response body cannot be consumed more than once, you'd needtwo copies to do this.

A teed stream will partially signal backpressure at the rate of thefaster consumerof the twoReadableStream branches,and unread data is enqueued internally on the slower consumedReadableStreamwithout any limit or backpressure.That is, whenboth branches have an unread element in their internal queue,then the originalReadableStream's controller's internal queue will start to fill up,and once itsdesiredSize ≤ 0or byte stream controllerdesiredSize ≤ 0,then the controller will stop callingpull(controller) on theunderlying source passed toReadableStream().If only one branch is consumed, then the entire body will be enqueued in memory.Therefore, you should not use the built-intee() to read very large streamsin parallel at different speeds.Instead, search for an implementation that fully backpressuresto the speed of theslower consumed branch.

To cancel the stream you then need to cancel both resulting branches. Teeing a streamwill generally lock it for the duration, preventing other readers from locking it.

Syntax

tee()

Parameters

None.

Return value

AnArray containing twoReadableStream instances.

Exceptions

TypeError

Thrown if the source stream is not aReadableStream.

Examples

In the following simple example, a previously-created stream is teed, then bothresulting streams (contained in two members of a generated array) are passed to afunction that reads the data out of the two streams and prints each stream's chunkssequentially to a different part of the UI. SeeSimple tee example for the full code.

function teeStream() {  const teedOff = stream.tee();  fetchStream(teedOff[0], list2);  fetchStream(teedOff[1], list3);}function fetchStream(stream, list) {  const reader = stream.getReader();  let charsReceived = 0;  // read() returns a promise that resolves  // when a value has been received  reader.read().then(function processText({ done, value }) {    // Result objects contain two properties:    // done  - true if the stream has already given you all its data.    // value - some data. Always undefined when done is true.    if (done) {      console.log("Stream complete");      return;    }    // value for fetch streams is a Uint8Array    charsReceived += value.length;    const chunk = value;    let listItem = document.createElement("li");    listItem.textContent = `Read ${charsReceived} characters so far. Current chunk = ${chunk}`;    list.appendChild(listItem);    // Read some more, and call this function again    return reader.read().then(processText);  });}

Specifications

Browser compatibility

See also

• ReadableStream() constructor
• Teeing a stream