web-dev-qa-db-fra.com

Comment envoyer arraybuffer en binaire via Websocket?

Je travaille sur un projet avec Mozilla Europe. Dans ce projet, j'utilise websocket de Worlize (côté serveur) et Mozilla (côté client), Node.js pour essayer de télécharger des fichiers d'un client vers un serveur.
Mon objectif actuel est d'envoyer un arraybuffer du fichier au serveur. Créez le arraybuffer et envoyez-le très bien.
Mais mon serveur me dit que arraybuffer est un message utf8 et non un message binaire.

Dois-je mal comprendre quelque chose? Sinon, comment puis-je corriger cela?

Côté client:

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

Du côté serveur:

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

J'essaie aussi avec Blob, même résultat. La partie binaire est invisible.

javascriptfile-uploadwebsocketbinaryarraybuffer
23
Chris

Gecko11.0 ArrayBuffer envoyer et recevoir le support pour binarydata a été implémenté.

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

envoi en cours 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 );
}

Reçu 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 />";
}
24
Konga Raju
Note: Prior to version 11, Firefox only supported sending data as a string.

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

1
Dennis