The tee()
method of the ReadableStream
interface tees the current readable stream, returning a two-element array containing the two resulting branches as new ReadableStream
instances.
This is useful for allowing two readers to read a stream simultaneously, perhaps at different speeds. You might do this for example in a ServiceWorker if you want to fetch a response from the server and stream it to the browser, but also stream it to the ServiceWorker cache. Since a response body cannot be consumed more than once, youβd need two copies to do this.
To cancel the stream you then need to cancel both resulting branches. Teeing a stream will generally lock it for the duration, preventing other readers from locking it.
Syntax
var teedStreams = readableStream.tee();
Parameters
None.
Return value
An Array
containing two ReadableStream
instances.
Exceptions
- TypeError
- The source stream is not a
ReadableStream
.
Examples
In the following simple example, a previously-created stream is teed, then both resulting streams (contained in two members of a generated array) are passed to a function that reads the data out of the two streams and prints each stream's chunks sequentially to a different part of the UI. See Simple 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
Specification | Status | Comment |
---|---|---|
Streams The definition of 'tee()' in that specification. |
Living Standard | Initial definition. |
Browser compatibility
The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
tee | Chrome Full support 43 | Edge Full support 79 | Firefox
Full support
65
| IE No support No | Opera Full support 30 | Safari Full support 10.1 | WebView Android Full support 43 | Chrome Android Full support 43 | Firefox Android
Full support
65
| Opera Android Full support 30 | Safari iOS Full support 10.3 | Samsung Internet Android Full support 4.0 |
Legend
- Full support
- Full support
- No support
- No support
- Experimental. Expect behavior to change in the future.
- Experimental. Expect behavior to change in the future.
- User must explicitly enable this feature.
- User must explicitly enable this feature.