使用Fetch API读取分块二进制响应 [英] Read chunked binary response with Fetch API
问题描述
如何使用Fetch API读取二进制分块响应。我正在使用以下代码，它可以读取服务器的分块响应。但是，数据似乎以某种方式编码/解码，导致 getFloat32 有时会失败。我试图用curl读取响应，并且工作正常，让我相信我需要做一些事情来使fetch api将块视为二进制。响应的内容类型正确设置为application / octet-stream。
const consume = responseReader => {
返回responseReader.read（）。then（result => {
if（result.done）{return;}
const dv = new DataView（result.value.buffer，0 ，result.value.buffer.length）;
dv.getFloat32（i，true）; //< - 有时会出现乱码
return consume（responseReader）;
}） ;
}
fetch（'/ binary'）。then（response => {
return consume（response.body.getReader（））;
}）
.catch（console.error）;
使用以下快速服务器重现它。注意，任何可以处理以下服务器的客户端js代码都可以。
const express = require（'express'）;
const app = express（）;
app.get（'/ binary'，function（req，res）{
res.header（Content-Type，application / octet-stream）;
res.header（'Content-Transfer-Encoding'，'binary'）;
const repro = new Uint32Array（[0x417055b8,0x4177d16f，0x4179e9da，0x418660e1,0x41770476,0x4183e05e]）;
setInterval（function （）{
res.write（Buffer.from（repro.buffer），'binary'）;
}，2000）;
}）;
app.listen（3000，（）=> console.log（'侦听端口3000！'））;
使用上面的节点服务器-13614102509256704将被记录到控制台，但它应该是~16.48。如何检索原始二进制浮点数？
正如您所指出的那样，您的问题是
getFloat32函数需要一个字节偏移，清楚记录
但是有也是你工作的另一面。所以我会在这里添加
默认情况下， FF 和
const express = require （'表达'）;
const app = express（）;
app.get（'/'，function（req，res）{
res.send（`
< html>
< body>
< h1> Chrome阅读器< / h1>
< script>
函数dothis（）{
var chunkedUrl ='/ binary';
fetch（chunkedUrl）
.then（processChunkedResponse）
.then（onChunkedResponseComplete）
.catch（onChunkedResponseError）
;
function onChunkedResponseComplete（result）{
console .log（'all done！'，result）
}
function onChunkedResponseError（err）{
console.error（err）
}
function processChunkedResponse（response）{
var text ='';
var reader = response.body.getReader（）
return readChunk（）;
函数readChunk（）{
返回reader.read（）。then（appendChunks）;
}
函数appendChunks（结果）{
if（
if（ ！result.done）{
var chunk = new Uint32Array（result.value.buffer）;
console.log（'chunk of'，chunk.length，'bytes'）
console.log（chunk）
}
if（result.done） ）{
console.log（'returns'）
返回完成;
} else {
console.log（'recursing'）
return readChunk（）;
}
}
}}
< / script>
< / body>
< / html>
`）;
}）;
app.get（'/ firefox'，function（req，res）{
res.send（`
< html>
< head>
< script src =./ fetch-readablestream.js>< / script>
< script src =。/ polyfill.js>< / script>
< / head>
< body>
< h1> Firefox阅读器< / h1>
< script>
函数readAllChunks（readableStream）{
const reader = readableStream.getReader（）;
const chunks = [];
function pump（）{
return reader.read（）。then（（{value，done }）=> {
if（done）{
console.log（已完成）
返回块;
}
尝试{
console.log（new Int32Array（value.buffer））
}
catch（err）{
console.log（错误发生 - +错误）
}
return pump（）;
}）;
}
return pump（）;
}
函数dothis（）{
fetchStream（'/ binary'，{stream：true}）
.then（ response => readAllChunks（response.body））
.then（chunks => console.dir（chunks））
.catch（err => console.log（err））;
}
< / script>
< / body>
< / html>
`）;
}）;
app.get（'/ binary'，function（req，res）{
res.header（Content-Type，application / octet-stream）;
res.header（'Content-Transfer-Encoding'，'binary'）;
const repro = new Uint32Array（[0x417055b8,0x4177d16f，0x4179e9da，0x418660e1,0x41770476,0x4183e05e]）;
i = 0;
setTimeout（函数abc（）{
res.write（Buffer.from（repro.buffer），'binary'）;
i ++;
if（i< 100） {
setTimeout（abc，100）;
} else {
res.end（）;
}
}，100）
//我实际上正在使用spawn（'command'）。pipe（res）here ...所以需要chunked响应。
}）;
app.use（express.static（'。/ node_modules / fetch-readablestream / dist /'））
app.use（express.static（'./ node_modules / web-streams-polyfill / dist /'））
app.listen（3000，（）=> console.log（'侦听端口3000！'））;
现在它适用于FF
以及Chrome
您需要使用
这里添加了它可以帮助您或将来的某人
How do I read a binary chunked response using the Fetch API. I'm using the following code which works insofar it reads the chunked response from the server. However, the data seems to be encoded/decoded somehow causing the getFloat32 to sometimes fail. I've tried to read the response with curl, and that works fine, leading me to believe I need to do something to make fetch api treat chunks as binary. The content-type of the response is properly set to "application/octet-stream".
const consume = responseReader => {
return responseReader.read().then(result => {
if (result.done) { return; }
const dv = new DataView(result.value.buffer, 0, result.value.buffer.length);
dv.getFloat32(i, true); // <-- sometimes this is garbled up
return consume(responseReader);
});
}
fetch('/binary').then(response => {
return consume(response.body.getReader());
})
.catch(console.error);
Use the following express server to reproduce it. Note, any client side js code that can handle the below server is fine.
const express = require('express');
const app = express();
app.get('/binary', function (req, res) {
res.header("Content-Type", "application/octet-stream");
res.header('Content-Transfer-Encoding', 'binary');
const repro = new Uint32Array([0x417055b8, 0x4177d16f, 0x4179e9da, 0x418660e1, 0x41770476, 0x4183e05e]);
setInterval(function () {
res.write(Buffer.from(repro.buffer), 'binary');
}, 2000);
});
app.listen(3000, () => console.log('Listening on port 3000!'));
Using the above node server -13614102509256704 will be logged to console, but it should just be ~16.48. How can I retrieve the original binary float written?
As you pointed that your issue was
The getFloat32 function takes a byte offset, clearly documented
But there is also another side to your work. So I will add that here
Fetch Streams are not supported by default by both FF and Chrome and I updated my code to work with streams on both end.
const express = require('express');
const app = express();
app.get('/', function (req, res) {
res.send(`
<html>
<body>
<h1>Chrome reader</h1>
<script>
function dothis() {
var chunkedUrl = '/binary';
fetch(chunkedUrl)
.then(processChunkedResponse)
.then(onChunkedResponseComplete)
.catch(onChunkedResponseError)
;
function onChunkedResponseComplete(result) {
console.log('all done!', result)
}
function onChunkedResponseError(err) {
console.error(err)
}
function processChunkedResponse(response) {
var text = '';
var reader = response.body.getReader()
return readChunk();
function readChunk() {
return reader.read().then(appendChunks);
}
function appendChunks(result) {
if (!result.done){
var chunk = new Uint32Array(result.value.buffer);
console.log('got chunk of', chunk.length, 'bytes')
console.log(chunk)
}
if (result.done) {
console.log('returning')
return "done";
} else {
console.log('recursing')
return readChunk();
}
}
} }
</script>
</body>
</html>
`);
});
app.get('/firefox', function (req, res) {
res.send(`
<html>
<head>
<script src="./fetch-readablestream.js"></script>
<script src="./polyfill.js"></script>
</head>
<body>
<h1>Firefox reader</h1>
<script>
function readAllChunks(readableStream) {
const reader = readableStream.getReader();
const chunks = [];
function pump() {
return reader.read().then(({ value, done }) => {
if (done) {
console.log("its completed")
return chunks;
}
try{
console.log(new Int32Array(value.buffer))
}
catch (err) {
console.log("error occured - " + err)
}
return pump();
});
}
return pump();
}
function dothis() {
fetchStream('/binary', {stream: true})
.then(response => readAllChunks(response.body))
.then(chunks => console.dir(chunks))
.catch(err => console.log(err));
}
</script>
</body>
</html>
`);
});
app.get('/binary', function (req, res) {
res.header("Content-Type", "application/octet-stream");
res.header('Content-Transfer-Encoding', 'binary');
const repro = new Uint32Array([0x417055b8, 0x4177d16f, 0x4179e9da, 0x418660e1, 0x41770476, 0x4183e05e]);
i = 0;
setTimeout(function abc() {
res.write(Buffer.from(repro.buffer), 'binary');
i++;
if (i < 100) {
setTimeout(abc, 100);
} else {
res.end();
}
}, 100)
// I'm actually using spawn('command').pipe(res) here... So chunked response is required.
});
app.use(express.static('./node_modules/fetch-readablestream/dist/'))
app.use(express.static('./node_modules/web-streams-polyfill/dist/'))
app.listen(3000, () => console.log('Listening on port 3000!'));
And now it works on FF
as well as Chrome
You need to use
https://www.npmjs.com/package/fetch-readablestream
Also I used the polyfill for ReadableStream in FF.
https://www.npmjs.com/package/web-streams-polyfill
But you can enabled native support for the same by change FF profile preferences
Added here so it may help your or someone in future
这篇关于使用Fetch API读取分块二进制响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
