How send arraybuffer as binary via Websocket?

Question

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?

Client side:

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

Server side:

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

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

This is a Q&A site, "fork and participate" isn't going to happen here (see stackoverflow.com/faq). Also, please don't ask people to dig through your code - include the minimal code necessary to explain what exactly you are doing. — Wladimir Palant
– Wladimir Palant, Commented Mar 3, 2012 at 20:46
I realise this was asked some time ago so having said that I just want to add that Firefox 11 and onwards support binary ArrayBuffer and Blob. — SpliFF
– SpliFF, Commented Jul 5, 2012 at 1:35

Rajib Chy · Accepted Answer · 2019-08-08 18:02:26Z

29

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

edited Aug 8, 2019 at 18:02

Rajib Chy

88012 silver badges23 bronze badges

answered Jul 11, 2012 at 5:24

kongaraju

9,66511 gold badges59 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

nyconing Over a year ago

What you mean Gecko11.0

B''H Bi'ezras -- Boruch Hashem Over a year ago

but how can I also send, say, the name of the flie along with the data? If I put it in a JSON, JSON.stringify doesn't work for arraybuffers...

Matt Over a year ago

@bluejayke Convert the string data into a typed array and combine the buffers. Also add a byte length flag to indicate the length of the file name buffer so the receiver knows how many bytes to read and send the combined buffer like: file name length|file name|the rest of the original data.

scape · Accepted Answer · 2015-07-05 16:44:03Z

1

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

Source: https://developer.mozilla.org/en/WebSockets/Writing_WebSocket_client_applications

edited Jul 5, 2015 at 16:44

scape

70713 silver badges29 bronze badges

answered Apr 5, 2012 at 17:12

Dennis

4,2177 gold badges40 silver badges50 bronze badges

Collectives™ on Stack Overflow

How send arraybuffer as binary via Websocket?

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related