nodejs 二进制 websocket mimetype 处理

Question

我不是 100% 确定，但从我通过 websocket 发送 blob（二进制数据）时所读到的内容来看，blob 不包含任何文件信息。（官方规范还指出 wesockets 只发送原始二进制文件）

文件大小
模仿类型
用户信息（稍后解释）

测试：

直接从输入文件发送 blob。

ws.send(this.files[0]) //this should already contain the info

正在使用本机 javascript api 从文件创建一个新的 blob 设置正确的 mimetype。

ws.send(new Blob([this.files[0]],{type:this.files[0].type})); //also this

在双方你只能得到有效的斑点，没有任何其他信息。

是否可以附加一个 4kb 的预定义 json 数据也转换为包含重要信息（如 mime 类型和文件大小）的二进制文件，然后在需要时拆分 4kb？

{"mime":"txt/plain","size":345}____________4KB_REST_OF_THE_BINARY

或

ws.send({"mime":"txt\/plain","size":345})
ws.send(this.files[0])

即使第一个是最糟糕的解决方案，它也能让我一次性发送所有内容。

第二个问题很大：

这是一个允许发送文档、图像、音乐视频等文件的聊天工具。

我可以在发送二进制数据之前发送 file/user 信息时编写某种握手系统。

但是

如果另一个人也发送了一个文件，因为它是异步的，握手系统没有机会确定哪个文件对于正确的用户和 mimetype 来说是正确的。

那么如何在多用户异步环境中正确发送二进制文件呢？

我知道我可以转换为 base64，但那要大 30%。

顺便说一句。完全对 Apple 感到失望...虽然 chrome 正确显示每个二进制数据，但我的 ios 设备无法处理 blob，只有图像会以 blob 或base64 格式，甚至不是一个简单的 txt 文件。基本上只有一个<img>标签可以读取动态文件。

一切如何运作（现在）：

用户发送文件
nodejs 获取二进制数据，还有用户信息...但不是 mimetype、文件名、大小。
nodejs 向所有用户广播原始二进制文件。（不能指定用户和文件信息）
客户创建了一个 bloburl（谁发送的？XD）。

编辑

我现在拥有的：

客户端1（发送文件）CHROME

fileInput.addEventListener('change',function(e){
 var file=this.files[0];
 ws.send(new Blob([file],{
  type:file.type //<- SET MIMETYPE
 }));
 //file.size
},false);

注意：file 已经是一个 blob ...但这是您通常创建一个指定 mimetype 的新 blob 的方式。

server（将二进制数据广播给其他客户端）NODEJS

aaaaa mimetype 不见了...

ws.addListener('message',function(binary){
 var b=0,c=wss.clients.length;
 while(b<c){
  wss.clients[b++].send(binary)
 }
});

客户端 2（接收二进制文件）CHROME

ws.addEventListener('message',function(msg){
 var blob=new Blob([msg.data],{
      type:'application/octet-stream' //<- LOST
     });
 var file=window.URL.createObjectURL(blob);
},false);

注意：m.data 已经是一个 blob ...但这是您通常创建一个指定 mimetype 的新 blob 的方式已丢失。

在 客户端 2 中，我需要 mimetype，当然我还需要有关用户的信息，可以从 客户端 1 中检索或者服务器（不是一个好的选择）...

Answer 1

你有点不走运，因为 Node 不支持 Blob 接口，所以你用 Node 以二进制形式发送或接收的任何数据都只是二进制。您必须拥有知道如何解释 Blob object.

的东西

这是一个想法，如果可行请告诉我。阅读 websockets\ws 的文档，它说它支持发送和接收 ArrayBuffers。这意味着您可以使用 TypedArrays.

这就是它变得讨厌的地方。您在每个 TypedArray 的开头设置一定的 fixed n 字节数来表示以 utf8 编码的 mime 类型或您有什么，其余的您的 TypedArray 包含文件的字节数。

我建议使用 UInt8Array，因为 utf8 字符的长度为 8 位，并且以这种方式编码时您的文本可能可读。至于文件位，您可能最终会把它们写在某个地方并在其上附加一个结尾。

另请注意，无论是从 Node 还是在浏览器中，这种解释方法都适用。

这个解决方案实际上只是一种类型转换，您可能会得到一些意想不到的结果。 MIME 类型字段的固定长度至关重要。

这里有图解。复制、粘贴、将图像文件设置为您想要的任何内容，然后运行那个。你会看到我设置的 mime 类型弹出。

var fs = require('fs');


//https://whosebug.com/questions/8609289/convert-a-binary-nodejs-buffer-to-javascript-arraybuffer
function toUint8Array(buffer) {
  var ab = new ArrayBuffer(buffer.length);
  var array = new Uint8Array(ab);

  for (var i = 0; i < buffer.length; ++i) {
    array[i] = buffer[i];
  }

  return array;
}

//data is a raw Buffer object
fs.readFile('./ducklings.png', function (err, data) {
  var mime = new Buffer('image/png');
  var allBuffed = Buffer.concat([mime, data]);
  var array = toUint8Array(allBuffed);
  var mimeBytes = array.subarray(0,9); //number of characters in mime Buffer
  console.log(String.fromCharCode.apply(null, mimeBytes));
});

以下是您在客户端的操作方式：

解决方案 A：获取包裹

获取 buffer，一个用于浏览器的 Node 缓冲区 API 的实现。连接字节缓冲区的解决方案将与以前完全一样。您可以附加诸如 To: 之类的字段，也可以附加其他字段。我敢肯定，为了最好地为客户服务而格式化 headers 的方式将是一个不断发展的过程。

解决方案 B：旧学校

第 1 步：将 Blob 转换为 ArrayBuffer

备注：How to convert a String to an ArrayBuffer

var fr = new FileReader();
fr.addEventListener('loadend', function () {
//Asynchronous action in part 2.
  var message = concatenateBuffers(headerStringAsBuffer, fr.result);
  ws.send(message);
});
fr.readAsArrayBuffer(blob);

第 2 步：连接 ArrayBuffers

function concatenateBuffers(buffA, buffB) {
  var byteLength = buffA.byteLength + buffB.byteLength;
  var resultBuffer = new ArrayBuffer(byteLength);
  //wrap ArrayBuffer in a typedArray/view
  var resultView = new Uint8Array(resultBuffer);
  var viewA = new Uint8Array(resultBuffer);
  var viewB = new Uint8Array(resultBuffer);
  //Copy 8 bit integers AKA Bytes
  resultView.set(viewA);
  resultView.set(viewB, viewA.byteLength);
  return resultView.buffer
}

第 3 步：接收和 Reblob

我不会重复如何将连接的字符串字节转换回字符串，因为我已经在服务器示例中完成了，但是将文件字节转换为您的 mime 类型的 blob 非常简单.

new Blob(buffer.slice(offset, buffer.byteLength), {type: mimetype});

This Gist by robnyman 详细介绍了如何使用通过 XHR 传输的图像，将其放入本地存储，并在页面上的图像标记中使用它。

Answer 2

我喜欢@Breedly 的想法，即在前面加上一个固定长度的字节数组来指示 ArrayBuffer 的 mime 类型，所以我创建了这个 npm package，我在处理 websockets 时使用它，但也许其他人可能会发现它有用。

用法示例

const {
  arrayBufferWithMime,
  arrayBufferMimeDecouple
} = require('arraybuffer-mime')

// some image array buffer
const uint8 = new Uint8Array(1)
uint8[0] = 1
const ab = uint8.buffer

const mime = 'image/png'
const abWithMime = arrayBufferWithMime(ab, mime)

const {mime, arrayBuffer} = arrayBufferMimeDecouple(abWithMime)

console.log(mime) // "image/png"
console.log(arrayBuffer) // ArrayBuffer

nodejs 二进制 websocket mimetype 处理

nodejs binary websocket mimetype handling

javascript

binary

blob

websocket

node.js