如何通过WebSocket的二进制发送arraybuffer？ [英] How send arraybuffer as binary via Websocket?

问题描述

在这一刻，我的工作和Mozilla欧洲的一个项目。在这个项目中，我使用的WebSocket由Worlize（服务器端）和Mozilla（客户端），Node.js的尝试从客户端上传文件到服务器。结果
我的present目标是该文件的arraybuffer发送到服务器。创建arraybuffer并发送它是好的。结果
但我的服务器告诉我，arraybuffer是一个UTF8消息，而不是二进制消息。结果
难道我误解的东西吗？如果没有，我怎么纠正？

At this moment, I am working on a project with Mozilla Europe. In this project, I use websocket by Worlize(server-side) and Mozilla (client side), Node.js to try to upload files from a client to a server.
My present goal is to send a arraybuffer of the file to the server. Create the arraybuffer and send it is fine.
But my server tells me that arraybuffer is a utf8 message and not a binary message.
Do I misunderstand something? If not, how can i correct that?

对不起，这不是我的github上的广告。只是有很多code的。结果
总结：

Sorry,it was not an ad for my github. There is just a lot of code.
In summary:

客户端：

    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');
}

我尝试用一​​滴来，同样的结果。二进制值部分是看不见的。

I try with Blob to, same result. The binary part is invisible.

推荐答案

Gecko11.0 ArrayBuffer发送和接收的二进制数据的支持已经实现。

Gecko11.0 ArrayBuffer send and receive support for binary data has been implemented.

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

发送二进制数据：

sending 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);    
}

Recieving二进制数据：

Recieving 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 />";
    }

这篇关于如何通过WebSocket的二进制发送arraybuffer？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！