FluidFramework 中的 SharedTree 数据结构入门指南-CSDN博客

本文链接：https://blog.csdn.net/gitblog_00455/article/details/148508702

FluidFramework 中的 SharedTree 数据结构入门指南

前言

在现代分布式应用开发中，数据同步和协作编辑是常见的需求。微软开源的 FluidFramework 项目提供了一种创新的解决方案，其中 SharedTree 作为其核心分布式数据结构之一，为开发者提供了强大的协作能力。本文将深入浅出地介绍 SharedTree 的基本概念和使用方法。

SharedTree 概述

SharedTree 是 FluidFramework 中的一种分布式数据结构，它提供了类似于普通 JavaScript 对象的操作体验，同时具备类型安全保证。与其他协作数据结构相比，SharedTree 具有以下特点：

直观的 API：操作方式与常规 JavaScript 对象类似
类型安全：通过 Schema 定义确保数据结构的一致性
实时协作：自动处理多用户并发编辑
事务支持：支持将多个操作组合为原子事务
撤销/重做：内置的撤销重做功能

环境准备

要使用 SharedTree，首先需要安装 FluidFramework 的核心包：

npm install fluid-framework@latest

创建 SharedTree 实例

创建 SharedTree 需要以下几个步骤：

定义容器模式(ContainerSchema)
创建 Fluid 容器
配置 TreeView

import { AzureClient } from "@fluidframework/azure-client";
import { ContainerSchema, SharedTree } from "fluid-framework";

// 创建 Azure 客户端
const client = new AzureClient(clientProps);

// 定义容器模式
const containerSchema: ContainerSchema = {
    initialObjects: {
        appData: SharedTree,
    },
};

// 创建容器
const { container } = await client.createContainer(containerSchema, "2");

// 配置 TreeView
const treeConfiguration = new TreeViewConfiguration({ schema: TodoList });
const appData = container.initialObjects.appData.viewWith(treeConfiguration);

注意：要使用 SharedTree，必须在容器运行时选项中启用 enableRuntimeIdCompressor。

定义数据结构 Schema

SharedTree 的核心特性之一是通过 Schema 明确定义数据结构。Schema 不仅规定了数据的形状，还生成了对应的 TypeScript 类型，提供了良好的开发体验。

SchemaFactory 基础

首先需要创建一个 SchemaFactory 实例：

const schemaFactory = new SchemaFactory("your-unique-namespace");

SchemaFactory 提供了多种数据类型定义方法：

集合类型：object(), array(), map()
基本类型：boolean, string, number, null, handle

定义 TodoList 示例

让我们通过一个 TodoList 示例来理解 Schema 定义：

class TodoItem extends schemaFactory.object("TodoItem", {
    description: schemaFactory.string,
    isCompleted: schemaFactory.boolean,
});

class TodoItems extends schemaFactory.array("TodoItems", TodoItem);

class TodoList extends schemaFactory.object("TodoList", {
    title: schemaFactory.string,
    items: TodoItems,
});

这个定义创建了一个三层嵌套的数据结构：

TodoList 作为根对象，包含标题和项目列表
TodoItems 是 TodoItem 的数组
TodoItem 是包含描述和完成状态的对象

初始化 Tree 数据

创建 TreeView 后，需要初始化数据：

appData.initialize(
    new TodoList({
        title: "我的待办事项",
        items: [
            new TodoItem({
                description: "学习 FluidFramework",
                isComplete: false,
            }),
        ],
    }),
);

初始化数据必须符合 Schema 定义的结构，且只能执行一次。

数据读写操作

读取数据

通过 TreeView 的 root 属性可以访问数据：

const title = appData.root.title; // 读取标题
const firstItem = appData.root.items[0]; // 读取第一个项目

监听数据变化

在 React 应用中，可以通过 useEffect 监听数据变化：

const [items, setItems] = useState(appData.root.items);

useEffect(() => {
    const unsubscribe = Tree.on(appData.root.items, "nodeChanged", () => {
        setItems([...appData.root.items]);
    });
    return unsubscribe;
}, []);

SharedTree 提供了两种事件：

nodeChanged：当前节点属性变化时触发
treeChanged：当前节点或其子节点变化时触发

修改数据

SharedTree 提供了多种数据修改方式：

直接赋值：

appData.root.title = "新标题";

数组操作：

// 在指定位置插入新项目
appData.root.items.insertAt(1, 
    new TodoItem({
        description: "新任务",
        isComplete: false
    })
);

自定义方法：可以在 Schema 类中定义业务相关的方法：

class TodoList extends schemaFactory.object("TodoList", {
    title: schemaFactory.string,
    items: TodoItems,
}) {
    public completeAll = () => {
        for (const item of this.items) {
            item.isComplete = true;
        }
    };
}

高级功能

事务处理

可以将多个操作组合成一个事务：

Tree.runTransaction(appData.root, (root) => {
    root.title = "事务更新标题";
    root.items.insertAt(0, new TodoItem({
        description: "事务添加的任务",
        isComplete: false
    }));
    
    if (/* 条件检查 */) {
        return Tree.runTransaction.rollback; // 回滚事务
    }
});

撤销/重做功能

SharedTree 提供了完善的撤销重做支持：

const undoStack = [];
const redoStack = [];

useEffect(() => {
    const unsubscribe = appData.events.on(
        "commitApplied",
        (commit, getRevertible) => {
            if (!getRevertible) return;
            
            const revertible = getRevertible();
            if (commit.kind === CommitKind.Undo) {
                redoStack.push(revertible);
            } else {
                if (commit.kind === CommitKind.Default) {
                    // 清空重做栈
                    redoStack.forEach(r => r.dispose());
                    redoStack.length = 0;
                }
                undoStack.push(revertible);
            }
        }
    );
    return unsubscribe;
}, []);