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 [[../../../../../../../mdn.github.io/dom-examples/streams/simple-tee-example/index|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 |
StreamsThe 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.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
|
Chrome
Full support 43 |
Edge
Full support 79 |
Firefox Full support 65 Full support 65 Full support 57 Disabled' From version 57: this feature is behind the |
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 Full support 65 Full support 57 Disabled' From version 57: this feature is behind the |
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.
ReadableStream.tee() by Mozilla Contributors is licensed under CC-BY-SA 2.5.