使用Node.js中的Websockets創建一個包含fabric.js的實時HTML 5畫布？

Question

有沒有人使用fabric.js/socket.io與實時項目合作？ 我的畫布工作正常，但在某處，畫布僅爲一個用戶變白（其他用戶的畫布顯示正常）。對象仍然在畫布上，但它們是白色的。過了一會兒，畫布上的物體又變回原來的顏色。

我只是序列化發送到服務器的畫布，並將畫布廣播到所有客戶端（用戶除外）。畫布然後被清除，反序列化並加載到畫布上。

如何在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); 
});