基于FabricJS的协作绘图应用JSON文件高效增量存储问询

1. 操作日志存储法 #

• 不直接修改主JSON文件，把每次WebSocket广播的小更新（如移动、缩放、新增/删除对象）作为操作日志存入数据库。每条日志包含：操作类型、目标对象ID、变更参数、操作时间、用户ID。
• 主JSON文件作为初始快照，用户加载画布时，先加载快照，再按顺序重放所有后续日志还原最新状态。
• 定期合并日志：比如每积累100条日志或每日凌晨，用Linux crontab触发PHP脚本，将所有日志合并到主JSON文件，随后清空历史日志，避免加载时重放过多日志拖慢速度。

2. JSON Patch增量更新法 #

• 基于RFC 6902的JSON Patch标准，把每次小转换为标准化补丁（例如{"op": "replace", "path": "/objects/123/left", "value": 100}）。
• 后端将补丁序列存入数据库，保留主JSON文件。加载画布时先读取主文件，再依次应用所有补丁。
• 同样定期合并补丁到主JSON，清空补丁记录。PHP可借助league/json-patch这类现成库生成和应用补丁，无需自行实现复杂逻辑。

3. 直接修改JSON文件特定节点（适合中小规模画布） #

• 若JSON文件体积不大，可通过PHP的json_decode将文件内容转为数组/对象，定位到目标节点修改后再json_encode写回。需注意并发问题：
  • 用flock()加排他锁，避免多连接同时修改导致文件损坏，示例代码：

    $filePath = '/path/to/canvas.json';
    $fp = fopen($filePath, 'r+');
    if (flock($fp, LOCK_EX)) {
        $canvasData = json_decode(fread($fp, filesize($filePath)), true);
        // 定位并修改目标对象属性
        foreach ($canvasData['objects'] as &$obj) {
            if ($obj['id'] === 'objectA') {
                $obj['left'] = $x;
                $obj['top'] = $y;
                break;
            }
        }
        fseek($fp, 0);
        fwrite($fp, json_encode($canvasData));
        ftruncate($fp, ftell($fp));
        flock($fp, LOCK_UN);
    }
    fclose($fp);
    

• 缺点：大文件场景下，解码编码开销较高，仅适合中小画布。

4. 改用数据库存储对象明细 #

• 放弃单JSON文件，将每个FabricJS对象作为数据库一条记录，字段包括：对象ID、画布ID、对象类型、属性JSON、创建时间、更新时间、层级排序字段。
• 每次WebSocket变更直接更新对应数据库记录的属性字段。加载画布时，查询该画布所有对象，按层级排序后组装成FabricJS所需的JSON格式。
• 优势：天然支持增量更新，并发控制依赖数据库事务/行锁，比文件操作更可靠。

内容的提问来源于stack exchange，提问作者Wilheim