通过 HTTP 将数据从浏览器流式传输到服务器的方法

2022-01-15 00:00:00 http browser xmlhttprequest javascript

是否有任何类似 XHR 的浏览器 API 可用于通过 HTTP 将二进制流式传输到服务器?

Are there any XHR-like browser APIs available for streaming binary to a server over HTTP?

我想随着时间的推移发出 HTTP PUT 请求并以编程方式创建数据.我不想一次创建所有这些数据，因为内存中可能存在大量数据.一些伪代码来说明我的意思:

I want to make an HTTP PUT request and create data programmatically, over time. I don't want to create all this data at once, since there could be gigs of it sitting in memory. Some psueudo-code to illustrate what I'm getting at:

var dataGenerator = new DataGenerator(); // Generates 8KB UInt8Array every second
var streamToWriteTo;
http.put('/example', function (requestStream) {
  streamToWriteTo = requestStream;
});

dataGenerator.on('data', function (chunk) {
  if (!streamToWriteTo) {
    return;
  }
  streamToWriteTo.write(chunk);
});

我目前有一个 Web 套接字解决方案，但更喜欢常规 HTTP，以便与一些现有的服务器端代码更好地互操作.

I currently have a web socket solution in place instead, but would prefer regular HTTP for better interop with some existing server-side code.

我可以使用最前沿的浏览器 API.我正在查看 Fetch API，因为它支持请求正文的 ArrayBuffers、DataViews、Files 等.如果我能以某种方式伪造这些对象之一，以便我可以将 Fetch API 与动态数据一起使用，那将适用于我.我尝试创建一个代理对象，看看是否调用了我可以修补的方法.不幸的是，浏览器(至少在 Chrome 中)似乎正在阅读本机代码，而不是在 JS 领域.但是，如果我错了，请纠正我.

I can use bleeding edge browser APIs. I was looking at the Fetch API, as it supports ArrayBuffers, DataViews, Files, and such for request bodies. If I could somehow fake out one of these objects so that I could use the Fetch API with dynamic data, that would work for me. I tried creating a Proxy object to see if any methods were called that I could monkey patch. Unfortunately, it seems that the browser (at least in Chrome) is doing the reading in native code and not in JS land. But, please correct me if I'm wrong on that.

推荐答案



我目前正在寻找完全相同的东西(通过 Ajax 上传).我目前的发现，看起来好像我们正在搜索浏览器功能设计的最前沿；-)

XMLHttpRequest 定义 在步骤 4 bodyinit 这个内容提取是(或可以是)一个可读流.

我仍在(作为非网络开发人员)搜索有关如何创建这样的东西并将数据提供给可读流"的另一端"的信息(即应该是可写流"，但我还没有没找到).

如果您找到了实施这些设计计划的方法，也许您在搜索方面做得更好，并且可以在此处发布.

^5
斯文



I'm currently searching for exactly the same thing (upstreaming via Ajax). What I currently found, looks as if we are searching at the bleeding edge of browser's feature design ;-)

XMLHttpRequest definition tells in step 4 bodyinit that the content extraction of this is (or can be) a readablestream.

I'm still searching (as a non-webdeveloper) for information of how to create such a thing and to feed data into the "other end" of that "readablestream" (which namely should be a "writablestream", but I yet did not find that).

Maybe you are better in searching and can post here if you found a method to implement these design plans.

^5
sven

相关文章