标签: whatwg-streams-api

我试图用取一个ReadableStream.在这个例子中,ReadableStream应该无限期地重复"Some data ...".

fetch('/', {
  method: 'POST', 
  body: new ReadableStream({
    pull: function(controller) {
      console.log('pull called!');
      controller.enqueue('Some data...');
    }
  })
});

这不起作用.而pull被执行一次,没有数据被请求体中的发送.

POST / HTTP/1.1
Host: example.com
Connection: keep-alive
Content-Length: 0
Origin: https://example.com
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.99 Safari/537.36
Accept: */*
Referer: https://example.com/
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.8

如何使用fetch可用的ReadableStream(或任何我可以编写动态数据的流)？

或者,如果这还不可能,请您说明一下吗？谢谢.

注意:这是一个更具体的衍生问题: 通过HTTP将数据从浏览器传输到服务器的方法

注意:我不是在寻找任何替代方案.我知道这可以通过XMLHttpRequest来完成.我也不关心浏览器支持.我只想了解新的/即将推出的标准.

我有一个  File对象,我可以使用像这样的fetch上传它:

fetch(url, {
    method: "PUT",
    body: fileObject,
});

如何从中获取上传进度？

据我所知body,fetch选项可以是ReadableStream.那么也许有一种方法可以将File对象包装到ReadableStream并从中获取进度状态？

例如.这样的事情

fetch(url, {
    method: "PUT",
    body: asReadableStream(fileObject, onProgress),
});

谢谢.

我想要实现的是让 Chrome 将视频文件作为数据加载（通过 Fetch API、XHR 等），并<video>在它仍在下载时使用它来播放它，而无需对同一 URL 发出两个单独的请求，也无需等到文件已完全下载。

ReadableStream从 Fetch API ( response.body)获取 a 很容易，但我找不到将它提供给video元素的方法。我发现我需要一个blobURL，它可以使用MediaSource对象创建。但是，该SourceBuffer#appendStream方法听起来正是所需要的，但并未在 Chrome 中实现，因此我无法将流直接连接到MediaSource对象。

我可能可以分块读取流，从中创建Uint8Arrays 并使用SourceBuffer#appendBuffer，但这意味着除非块大小非常小，否则播放不会立即开始。此外，感觉就像手动做一些所有这些 API 应该能够立即完成的事情。如果没有其他解决方案，而我走这条路，我应该期待什么警告？

是否有其他方法可以为 a 创建 blob URL ReadableStream？或者有没有办法提出fetch和<video>分享请求？有很多新的 API，我很容易错过一些东西。

是否可以使用 Whatwg Streams（Web Streams API ）从其他几个 TransformStream 中创建一个TransformStream？

例如，如果我有两个按顺序运行的 TransformStream，如transformer1和transformer2：

readable.pipeThrough(transformer1).pipeThrough(transformer2).pipeTo(writable)

最终，我希望能够将其转换为

readable.pipeThrough(allTransformers).pipeTo(writable)

allTransformersTransformStream 组合transformer1和 的位置在哪里transformer2。

下面不是真正的功能代码，但我认为有一种方法可以做到这样的事情：

const allTransformers = transformer1.pipeThrough(transformer2)

这显然是一个简化的示例，但您可以想象有许多转换流，我想重构为单个可重用的转换管道。

假设我有一个在客户端生成的大文件，我希望允许用户将其保存到他们的硬盘驱动器上。

通常的方法是创建一个 Blob，然后为其创建一个对象 URL：

const blob = new Blob([chunks], {type: 'application/example'});
linkEl.href = URL.createObjectUrl(blob);

这是可行的，但效率不高，因为它会很快耗尽所有可用内存，因为生成的文件必须保留在内存中。

更好的方法是启用流式传输。像这样的东西：

const outputStream = new WritableStream();
linkEl.href = URL.createObjectUrl(outputStream);
while (let chunk = await getChunk()) {
  outputStream.write();
}
outputStream.end();

今天有直接的方法吗？

我见过的像这样的流式传输的唯一方法是使用 Service Worker。不幸的是，在许多情况下 Service Worker 不可用。隐私模式可能会绕过所有服务工作线程。硬刷新页面会禁用它们。打开浏览器工具可以重置 Service Worker 状态。工作人员随时可能被杀死，并且尝试通过消息传递使其保持活动状态并不能保证有效。所有这些黑客都已在此处的一个优秀项目中实现： https://github.com/jimmywarting/StreamSaver.js 但是，归根结底，由于这些浏览器限制，它是不可靠的。

是否存在适当的 API 可以在不使用 Service Worker 的情况下流式传输“下载”客户端？

Streams APIReadableStream提供了一种通过管道将 a 传送到WritableStreamusing的巧妙方法readableStream.pipeTo(writableStream)。这似乎比获取readableStream.getReader()并手动将其粘合到writableStream.getWriter()或直接粘合到底层功能更方便。

我有一个用例，其中向我提供了一个ReadableStream对象，该对象最终可能需要“消失”并被新ReadableStream对象替换。最好使用单个自定义WritableStream来包装这些对象所连接的功能，ReadableStream并根据需要将它们通过管道连接在一起，但还没有找到如何“撤消”管道过程。

问：是否可以“撤消”/“中断”/“拆卸”使用 创建的管道.pipeTo()，或者管道是否“永久”且不适合此用例？

使用Serial API 的示例，我希望能够调用doConnectPort()然后doDisconnectPort()重复：

var customWritable = new WritableStream(\xe2\x80\xa6);\nvar port;\n\nasync function doConnectPort() {\n  port = await navigator.serial.requestPort();\n  await port.open({ baudrate: \xe2\x80\xa6});\n  await port.readable.pipeTo(customWritable);\n}\n\nasync function doDisconnectPort() {\n  // What to do here? Can\'t close the port yet\xe2\x80\x94port.readable is still locked!\n  await port.close();\n}\n

目前，我手动将东西粘合在一起，并在需要断开端口时进行清理：

var …

我有两个 ReadableStream，我想将它们通过管道传输到一个 WritableStream，其中通过 ReadableStream 的任何数据都会立即直接进入 WritableStream。

我可以做相反的事情，通过使用ReadableStream.prototype.tee()将一个 ReadableStream 一分为二，但我不知道如何将两个合并为一个。

const textarea = document.querySelector("textarea");


// This is a ReadableStream which says "Mom! " every 1 second.
const momReadableStream = new ReadableStream({ start: controller => {
  const sayMom = () => controller.enqueue("Mom! ");
  setInterval(sayMom, 1000);
}});

// This is a ReadableStream which says "Lois! " every 0.7 seconds.
const loisReadableStream = new ReadableStream({ start: controller => {
  const sayLois = () => controller.enqueue("Lois! ");
  setInterval(sayLois, 700);
}});

// …