通过Yjs私有化部署一个支持协同和存储Excalidraw白板的思路

// 主要功能：提供一个 React Hook，用于设置 Excalidraw 的协作功能
export const useCollab = (
  excalidrawRef: RefObject<HTMLElement | null>,
  options: CollabOptions = {}
) => {
  // ...

  useEffect(() => {
    if (!api) return;

    const ydoc = new Y.Doc();
    // 创建共享数据结构
    const yElements = ydoc.getArray<Y.Map<any>>("elements");
    const yAssets = isStoreApiEnable ? null : ydoc.getMap("assets");

    const isLocalMode = !id;

    // 根据模式选择不同的协作提供者
    // 本地模式：使用 WebRTC 进行点对点通信
    const webRTCProvider = isLocalMode
      ? new WebrtcProvider(`excalidraw-local`, ydoc, {
          signaling: [],
        })
      : null;

    // 本地存储：使用 IndexedDB 持久化数据
    const indexeddbPersistence =
      isUseIndexedDb || isLocalMode
        ? new IndexeddbPersistence(`excalidraw-${id || "default"}`, ydoc)
        : null;

    // 远程模式：使用 Socket.IO 进行服务器通信
    const url = `${location.protocol}//${location.host}`;
    const socketIoProvider = id
      ? new SocketIOProvider(url, `${id}`, ydoc, {})
      : null;

    // 设置撤销/重做管理器
    const undoManagerOptions = !!(
      excalidrawRef.current &&
      excalidrawRef.current.querySelector(".undo-redo-buttons")
    )
      ? {
          excalidrawDom: excalidrawRef.current,
          undoManager: new Y.UndoManager(yElements),
        }
      : undefined;

    // 设置感知（用于光标和用户状态共享）
    const awareness: Awareness =
      socketIoProvider?.awareness ||
      webRTCProvider?.awareness ||
      new Awareness(ydoc);

    // 创建 Excalidraw 绑定
    const binding = new ExcalidrawBinding(
      yElements,
      yAssets,
      api,
      awareness,
      undoManagerOptions
    );

    // ...
  }, [api, excalidrawRef]);

  // ...
};

import { Server } from "socket.io";
import { YSocketIO } from "y-socket.io/dist/server";
import * as http from "http";

export function createServer(server: ReturnType<typeof http.createServer>) {
  const io = new Server(server);
  // 创建 YSocketIO 服务器实例
  const ySocketIOServer = new YSocketIO(io);
  ySocketIOServer.initialize();
}

const ExcalidrawWrapper: FC<{
  id?: string;
  isUseIndexedDb?: boolean;
}> = ({ id, isUseIndexedDb }) => {
  const excalidrawRef = useRef(null);
  // 使用协作 Hook
  const { setApi: setCollabApi, binding } = useCollab(excalidrawRef, {
    id,
    isUseIndexedDb,
    isStoreApiEnable,
  });

  // 使用存储 Hook
  const { setApi: setStoreApi, resourceManager } = useStore();

  const setApi = (api: ExcalidrawImperativeAPI) => {
    setCollabApi(api);
    if (isStoreApiEnable) setStoreApi(api);
  };

  return (
    <div ref={excalidrawRef} style={{ height: "100vh", width: "100vw" }}>
      <Excalidraw
        excalidrawAPI={setApi}
        isCollaborating={!!binding}
        onPointerUpdate={binding?.onPointerUpdate}
        generateIdForFile={resourceManager?.generateIdForFile}
      />
    </div>
  );
};

class ResourceManager {
  api: ExcalidrawImperativeAPI;
  processedFiles = new Set<string>();
  processingFiles = new Set<string>();

  constructor(api: ExcalidrawImperativeAPI) {
    this.api = api;
  }

  // 获取文件
  async getFiles(fileIds: string[]) {
    // 过滤需要处理的文件
    const needProcessFileIds = fileIds.filter((id) => {
      return !this.processedFiles.has(id) && !this.processingFiles.has(id);
    });

    if (needProcessFileIds.length) {
      // 标记为正在处理
      needProcessFileIds.forEach((id) => {
        this.processingFiles.add(id);
      });

      try {
        // 并行获取文件
        const results = await Promise.allSettled(
          needProcessFileIds.map(async (id) => {
            // 获取文件并转换为 dataURL
            // ...
          })
        );

        // 处理获取到的文件
        // ...
      } catch (error) {
        console.error("获取文件失败:", error);
      }
    }
  }

  // 生成文件 ID
  generateIdForFile = async (file: File) => {
    // 生成唯一文件名
    // 上传文件到服务器
    // 返回文件 ID
    // ...
  };
}

// 获取文件
export async function GET(request: NextRequest) {
  const { searchParams } = new URL(request.url);
  const file = searchParams.get("file");
  const raw = searchParams.get("raw") === "true";

  // ...

  try {
    // 生成临时链接
    const presignedUrl = await minioClient.presignedGetObject(
      bucket,
      file,
      60 * 60 // 1小时有效期
    );

    // 根据参数返回文件流或临时链接
    if (raw) {
      const fileStream = await minioClient.getObject(bucket, file);
      return new Response(fileStream as unknown as ReadableStream);
    } else {
      return Response.json({
        url: presignedUrl,
      });
    }
  } catch (error) {
    // 错误处理
    // ...
  }
}

// 上传文件
export async function POST(request: NextRequest) {
  // ...

  try {
    const body = await request.json();
    const { file, key } = body;

    // 将 Base64 编码的文件内容转换为 Buffer
    const fileBuffer = Buffer.from(
      file.split(",")[1] || file,
      "base64"
    );

    // 创建可读流
    const fileStream = Readable.from(fileBuffer);

    // 上传文件到 MinIO
    await minioClient.putObject(bucket, key, fileStream, fileBuffer.length);

    return Response.json({
      success: true,
      message: "文件上传成功",
      key: key,
    });
  } catch (error) {
    // 错误处理
    // ...
  }
}