Verwenden von Websockets in Node.js zum Erstellen eines Echtzeit-HTML 5-Canvas mit fabric.js?

Question

Hat jemand an einem Echtzeitprojekt mit fabric.js/socket.io gearbeitet? Meine Leinwand funktioniert gut, aber irgendwann wird die Leinwand für einen Benutzer weiß (die Leinwand des anderen Benutzers erscheint normal). Die Objekte sind immer noch auf der Leinwand, aber sie sind weiß. Nach einer Minute kehren die Objekte der Leinwand in ihre ursprüngliche Farbe zurück.

Ich bin einfach Serialisierung der Leinwand, die es an den Server sendet und den Canvas an alle Clients (mit Ausnahme des Benutzers). Canvas wird dann gelöscht, deserialisiert und in den Canvas geladen.

Wie erreiche ich eine glatte Echtzeit Leinwand zwischen 2 Kunden ohne diese unerwarteten Canvas Pannen! Ich bin mir nicht sicher, ob ich socket.io oder fabric.js falsch verwende. Bitte berate mich!

//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

Ich bin nicht wirklich sicher, aber versuchen

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

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