2012-03-03 5 views
18

私はMozilla Europeのプロジェクトに取り組んでいます。このプロジェクトでは、Worlize(サーバー側)とMozilla(クライアント側)のNode.jsによるWebSocketを使用して、クライアントからサーバーにファイルをアップロードしようとしています。
現在の目標は、ファイルのarraybufferをサーバーに送信することです。 arraybufferを作成して送信しても問題ありません。
私のサーバは、arraybufferはutf8メッセージであり、バイナリメッセージではないことを伝えています。どのようにWebsocket経由でバイナリとしてarraybufferを送信しますか?

私は何かを誤解していますか?そうでない場合は、どうすれば修正できますか?

クライアント側:

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と同じ結果をしてみてください。バイナリ部分は見えません。

+1

これは、Q&Aサイト、である "フォークと参加は、" HTTPを参照してください(ここでは起こるだろうされていません。 //stackoverflow.com/faq)。また、コードを掘り下げるように人々に依頼しないでください。正確に何をしているのかを説明するのに必要な最小限のコードを含めてください。 –

+0

これはしばらく前に尋ねられたことですが、Firefox 11以降を追加して、バイナリのArrayBufferとBlobをサポートしたいと言っていました。 – SpliFF

答えて

19

Gecko11.0 ArrayBufferバイナリデータのサポートが実装されている送受信します。

バイナリデータ送信
connection = new WebSocket('ws://localhost:1740'); 
connection.binaryType = "arraybuffer"; 
connection.onopen = onopen; 
connection.onmessage = onmessage; 
connection.onclose = onclose; 
connection.onerror = onerror; 

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バイナリデータを:

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 />"; 
    } 
関連する問題