2016-11-29 3 views
0

私は、あるクライアントの256x256キャンバスから別のクライアントのキャンバスにバイナリデータをsocket.io-streamのnode.jsサーバー経由でパイプしてみようとしています。私のサーバーでsocket.io-streamエラー:ストリームがすでに送信されています

canvas.addEventListener("mousemove", function(e){ 
    sendBlat(); 
}); 

var socket = io(); 
var stream = ss.createStream(); 
var imageBuffer = new ss.Buffer(256*256*4); 

function sendBlat() { 
    console.log('blatting'); 
    // send buffer to the server 
    imageBuffer.set(ctx.getImageData(0,0,canvas.width,canvas.height).data); 
    stream.write(imageBuffer); 
    ss(socket).emit('blatin', stream); 
    return false; 
} 

と宛先クライアントで:ソースクライアントで

ss(socket).on('blatin', function(stream, data) { 
    var outgoingstream = ss.createStream(); 
    ss(remote).emit('blatout', outgoingstream); 
    stream.pipe(outgoingstream); 
}); 

ss(socket).on('blatout', function(stream, data) 
    stream.on('data', function(chunk) { 
     imageData.data.set(new Uint8ClampedArray(chunk)); 
     ctx.putImageData(imageData,0,0); 
    }); 
}); 

...これは動作しますが、非常に遅く、私のソースクライアントのコンソールで、私はこのエラーが何度も何度も繰り返されるのを見る:

socket.io-stream.js:794 Uncaught Error: stream has already been sent. 

私は明らかにストリームを適切に処理していません。どのようなステップがありますか?

注:

  • それはバッファを満たすと宛先クライアントに出て空にゆっくりとそれを見ることは非常に簡単です。 - サーバーが応答を停止するまでサーバーを過負荷にすることも非常に簡単です。
  • 調整スロットは役に立ちません。
  • 送信キャンバスImageDataは目標であり、描画アプリではありません。アプリは概念の証明に過ぎません。
  • MacOS/Chrome。

答えて

0

ストリームを書き込むたびにストリームを再発光して再パイプしているため、ストリームを書き込む必要はありません。

socket.io-streamの例では、毎回新しいファイル(したがって新しいストリーム)をアップロードしていることを前提としています。新しいファイルは、サーバに到達するたびに新しいemit()が必要で、それ以外の場所には新しいpipe()が必要です。

しかし、あなたの場合、同じストリームに何度も何度も書き換えることができます。つまり、ソースクライアントから一度だけemit()、サーバーではpipe()を一度しか必要としません。

サーバー:

var outgoingstream = ss.createStream(); 
ss(remote).emit('blatout', outgoingstream); 
ss(socket).on('blatin', function(stream, data) { 
    stream.pipe(outgoingstream); 
}); 

ソースクライアント:

var socket = io(); 
var stream = ss.createStream(); 
ss(socket).emit('blatin', stream); 

var imageBuffer = new ss.Buffer(256*256*4); 
function sendBlat() { 
    imageBuffer.set(ctx.getImageData(0,0,canvas.width,canvas.height).data); 
    stream.write(imageBuffer); 
    return false; 
} 
関連する問題