如何通过Websocket将arraybuffer作为二进制发送？答案

【问题标题】：How send arraybuffer as binary via Websocket?如何通过Websocket将arraybuffer作为二进制发送？
【发布时间】：2012-03-21 17:33:57
【问题描述】：

我正在与 Mozilla Europe 合作开展一个项目。在这个项目中，我使用 Worlize（服务器端）和 Mozilla（客户端）的 websocket，Node.js 来尝试将文件从客户端上传到服务器。
我目前的目标是将文件的arraybuffer 发送到服务器。创建数组缓冲区并发送它就可以了。
但是我的服务器告诉我 arraybuffer 是一个 utf8 消息而不是二进制消息。

我是不是误会了什么？如果没有，我该如何纠正？

客户端：

    reader = new FileReader();
    reader.readAsArrayBuffer(file);
    reader.onload = function(e) {
        connection.send(e.target.result); 
    };

服务器端：

ws.on('message', function(message,flags) {
if (!flags.binary) {
    //some code
}
else {
    console.log('It\'s a binary');
}

我也尝试使用Blob，结果相同。二进制部分是不可见的。

【问题讨论】：

这是一个问答网站，“分叉和参与”不会在这里发生（参见stackoverflow.com/faq）。另外，请不要要求人们深入研究您的代码 - 包括解释您正在做什么所必需的最少代码。
我意识到这是前段时间有人问过的，所以我只是想添加 Firefox 11 及更高版本支持二进制 ArrayBuffer 和 Blob。

标签： javascript file-upload websocket binary arraybuffer

【解决方案1】：

Gecko11.0 ArrayBuffer 发送和接收对binary data 的支持已经实现。

connection = new WebSocket( 'ws://localhost:1740' );
connection.binaryType = "arraybuffer";
connection.onopen = onopen;
connection.onmessage = onmessage;
connection.onclose = onclose;
connection.onerror = onerror;

发送Binary data:

function sendphoto() {
    imagedata = context.getImageData( 0, 0, imagewidth, imageheight );
    var canvaspixelarray = imagedata.data;
    var canvaspixellen = canvaspixelarray.length;
    var bytearray = new Uint8Array( canvaspixellen );
    for ( var i = 0; i < canvaspixellen; ++i ) {
        bytearray[i] = canvaspixelarray[i];
    }
    connection.send( bytearray.buffer );
    context.fillStyle = '#ffffff';
    context.fillRect( 0, 0, imagewidth, imageheight );
}

接收Binary Data:

if ( event.data instanceof ArrayBuffer ) {
    var bytearray = new Uint8Array( event.data );
    var tempcanvas = document.createElement( 'canvas' );
    tempcanvas.height = imageheight;
    tempcanvas.width = imagewidth;
    var tempcontext = tempcanvas.getContext( '2d' );
    var imgdata = tempcontext.getImageData( 0, 0, imagewidth, imageheight );
    var imgdatalen = imgdata.data.length;
    for ( var i = 8; i < imgdatalen; i++ ) {
        imgdata.data[i] = bytearray[i];
    }
    tempcontext.putImageData( imgdata, 0, 0 );
    var img = document.createElement( 'img' );
    img.height = imageheight;
    img.width = imagewidth;
    img.src = tempcanvas.toDataURL();
    chatdiv.appendChild( img );
    chatdiv.innerHTML = chatdiv.innerHTML + "<br />";
}

【讨论】：

你的意思是Gecko11.0
但是我怎样才能将苍蝇的名字连同数据一起发送呢？如果我把它放在 JSON 中，JSON.stringify 不适用于数组缓冲区...
@bluejayke 将字符串数据转换为类型化数组并合并缓冲区。还要添加一个字节长度标志来指示文件名缓冲区的长度，以便接收者知道要读取和发送组合缓冲区的字节数，例如：文件名长度|文件名|原始数据的其余部分。

【解决方案2】：

Note: Prior to version 11, Firefox only supported sending data as a string.

来源：https://developer.mozilla.org/en/WebSockets/Writing_WebSocket_client_applications

【讨论】：