Node.jsのWebSocketを使用してfabric.jsでリアルタイムHTML 5キャンバスを作成しますか？

Question

誰かがfabric.js/socket.ioでリアルタイムプロジェクトを担当していますか？ 私のキャンバスはうまく動作しますが、どこかに沿ってキャンバスが1人のユーザーにとって白くなります（他のユーザーのキャンバスは通常のように見えます）。オブジェクトはまだキャンバス上にありますが、白いです。そして1分後にキャンバスのオブジェクトは元の色に戻ります。

キャンバスをサーバーに送信してシリアル化し、キャンバスをすべてのクライアント（ユーザーを除く）にブロードキャストします。キャンバスは次にクリアされ、デシリアライズされキャンバスにロードされます。

これらの予期しないキャンバスの不具合のない2つのクライアント間でスムーズなリアルタイムキャンバスを達成するにはどうすればよいですか？ socket.ioまたはfabric.jsを間違って使用しているかどうかはわかりません。私にアドバイスをお願いします！

//client side code 
 

 
var socket = io(); 
 
socket.on('canvas', function(canvasobj){ 
 
canvas.clear(); 
 
canvas.loadFromJSON(canvasobj, canvas.renderAll.bind(canvas)); 
 
}); 
 

 
canvas.on('mouse:up', function(options){ 
 
    var canvasStr = JSON.stringify(canvas); 
 
    socket.emit('canvas', canvasStr); 
 
});

//node.js code 
 

 
io.on('connection', function(socket){ 
 

 
    socket.on('canvas', function(canvasobj){  
 
     socket.broadcast.emit('canvas', canvasobj); 
 
    }); 
 

 
});

Answer 1

私は本当にわからないけど、してみてください

canvas.on('mouse:up', function(event){ 
    event.preventDefault(); 

    var canvasStr = JSON.stringify(canvas); 
    socket.emit('canvas', canvasStr); 
});