此页内容

06、如何实现协同编辑?

321字约1分钟

2025-02-17

在原有图片的功能上,结合 WebSocket事件驱动 思想,让多位团队成员能够实时查看对同一张图片的编辑变化,具体流程如下:

  1. WebSocket 通信:前端与后端建立 WebSocket 连接后,后端保存各个图片对应的会话集合,以及当前正在编辑的用户信息;
  2. 编辑锁机制:只有一个用户可以进入编辑状态,其他用户只能实时查看该用户操作,避免并发问题;
  3. 事件驱动:每当用户对用户进行编辑(放大、旋转,裁切)等操作,相当于产生了一个事件,通过 WebSocket 服务器吧该事件分发给其他连接用户,实时广播更新;
  4. 断开连接:当正在编辑的用户断线或退出,自动释放编辑锁,其他用户可进入编辑状态。

事件驱动设计思想

将系统内的操作抽象为 事件,当事件发生时,将事件交给异步处理器或消息总线,然后通知其他需要接收的组件或用户,从而 解耦 生产者和消费者,提高并发性能。