javascript - nodejs 二进制 websocket mimetype 处理

Question

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

1. 文件大小
2. 模仿类型
3. 用户信息(稍后解释)

我正在使用 https://github.com/websockets/ws

测试:

直接从输入文件发送 blob。

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

使用设置正确 mimetype 的文件中的 native javascript api 创建一个新的 blob。

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

在两侧你只能得到有效的 blob，没有任何其他信息。

是否可以附加一个 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])

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

第二个问题很大:

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

在发送二进制数据之前发送文件/用户信息时，我可以编写某种握手系统。

但是

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

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

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

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

一切如何运作(现在):

1. 用户发送文件
2. nodejs 获取二进制数据，还有用户信息...但不是 mimetype、文件名、大小。
3. nodejs 向所有用户广播原始二进制文件。(不能指定用户和文件信息)
4. 客户创建一个 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 的方式。

服务器(将二进制数据广播到其他客户端)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 ... 但这是您通常创建一个新 blob 的方式，指定 mimetype witch is lost。

在 client 2 中，我需要 mimetype，自然我还需要有关用户的信息，可以从 client 1 或 server (不是一个好的选择)...

Answer 1

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

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

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

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

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

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

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

var fs = require('fs');


//https://stackoverflow.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 Buffer API 的实现。连接字节缓冲区的解决方案将与以前完全一样。您可以附加诸如 To: 之类的字段，也可以附加其他字段。我敢肯定，为了最好地为客户服务而格式化 header 的方式将是一个不断发展的过程。

解决方案 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 robnyman 详细介绍了如何使用通过 XHR 传输的图像、将其放入本地存储以及在页面上的图像标记中使用它。