使用Node.js中的Websockets创建一个带有fabric.js的实时HTML5画布

Question

有人用fabric.js/ssocket.io做过实时项目吗？我的画布工作得很好，但在某个地方，画布只是为一个用户变白（另一个用户的画布看起来很正常）。这些物体仍然在画布上，但它们是白色的。过了一分钟，画布上的对象又恢复到原来的颜色。

我只是序列化画布，将其发送到服务器，并将画布广播给所有客户端（用户除外）。画布随后被清除、反序列化并加载到画布上。

如何在两个客户端之间实现平滑的实时画布，而不会出现任何意外的画布故障！我不确定我是用错了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);
});