用fabric.js在Node.js中使用Websockets创建实时HTML5画布？

npm install fabric

const fabric = require('fabric');
const WebSocket = require('ws');

const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', (ws) => {
  // 处理客户端连接
});

const canvas = new fabric.Canvas(null, { width: 800, height: 600 });

ws.send(JSON.stringify(canvas.toJSON()));

const canvas = new fabric.Canvas('canvas');

ws.onmessage = (event) => {
  const json = JSON.parse(event.data);
  canvas.loadFromJSON(json);
};

const rect = new fabric.Rect({
  left: 100,
  top: 100,
  width: 200,
  height: 100,
  fill: 'red'
});

canvas.add(rect);