How send arraybuffer as binary via Websocket?
Solution 1
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 />";
}
Solution 2
Note: Prior to version 11, Firefox only supported sending data as a string.
Source: https://developer.mozilla.org/en/WebSockets/Writing_WebSocket_client_applications
Related videos on Youtube
Chris
Updated on August 09, 2020Comments
-
Chris over 3 years
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 aarraybuffer
of the file to the server. Create the arraybuffer and send it is fine.
But my server tells me thatarraybuffer
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.-
Wladimir Palant about 12 yearsThis 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.
-
Mamey almost 12 yearsI 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.
-
-
nyconing over 5 yearsWhat you mean Gecko11.0
-
B''H Bi'ezras -- Boruch Hashem about 5 yearsbut 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 about 4 years@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.