FluidFramework 教程：构建实时协作的 DiceRoller 应用-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00046/article/details/148508825

FluidFramework 教程：构建实时协作的 DiceRoller 应用

FluidFramework Library for building distributed, real-time collaborative web applications 项目地址: https://gitcode.com/gh_mirrors/fl/FluidFramework

前言

在现代 Web 开发中，实现实时协作功能一直是个挑战。微软开源的 FluidFramework 项目为解决这一问题提供了优雅的方案。本文将通过构建一个简单的 DiceRoller 应用，带您深入了解 FluidFramework 的核心概念和工作原理。

什么是 FluidFramework？

FluidFramework 是一个用于构建分布式、实时协作应用的 JavaScript 库。它抽象了底层的数据同步和冲突解决机制，让开发者可以专注于业务逻辑。其核心特点是：

自动处理数据同步
支持离线优先设计
提供最终一致性保证
与框架无关（可与 React、Vue 等配合使用）

DiceRoller 应用概述

我们将构建一个多用户共享的骰子应用，特点包括：

所有用户看到相同的骰子状态
任一用户点击"掷骰子"按钮，所有客户端同步更新
自动处理网络延迟和冲突
支持新用户加入时获取最新状态

环境准备

在开始前，确保您已安装：

Node.js (建议 LTS 版本)
包管理器 (npm 或 yarn)
代码编辑器

项目结构分析

核心代码主要集中在一个文件中，包含以下关键部分：

客户端初始化
容器创建与加载逻辑
数据模型定义
视图渲染
数据与视图绑定

详细实现步骤

1. 初始化 Fluid 客户端

首先需要创建 Fluid 客户端实例，这里使用 Tinylicious 作为本地测试服务器：

import { TinyliciousClient } from "@fluidframework/tinylicious-client";

const client = new TinyliciousClient();

Tinylicious 是 FluidFramework 提供的轻量级本地服务，适合开发和测试。

2. 定义容器模式

容器是 Fluid 中数据存储的基本单元，我们需要定义初始数据结构：

const containerSchema = {
    initialObjects: { diceTree: SharedTree }
};

这里使用了 SharedTree 作为共享数据结构，它是 Fluid 提供的一种高效的可共享数据类型。

3. 容器生命周期管理

Fluid 应用需要处理容器的创建和加载两种场景：

创建新容器

const createNewDice = async () => {
    const { container } = await client.createContainer(containerSchema, "2");
    const dice = container.initialObjects.diceTree.viewWith(treeViewConfiguration);
    dice.initialize(new Dice({ value: 1 }));
    const id = await container.attach();
    renderDiceRoller(dice.root, root);
};

关键点：

createContainer 初始化新容器
initialize 设置初始值
attach 将容器发布到服务并获取唯一 ID

加载现有容器

const loadExistingDice = async (id) => {
    const { container } = await client.getContainer(id, containerSchema, "2");
    const dice = container.initialObjects.diceTree.viewWith(treeViewConfiguration);
    renderDiceRoller(dice.root, root);
};

4. 路由逻辑

根据 URL 哈希决定是创建还是加载容器：

async function start() {
    if (location.hash) {
        await loadExistingDice(location.hash.substring(1));
    } else {
        await createNewDice();
    }
}

5. 视图实现

使用原生 DOM API 实现简单视图：

const renderDiceRoller = (dice, elem) => {
    // 创建DOM元素
    elem.appendChild(template.content.cloneNode(true));
    
    // 获取按钮和骰子元素
    const rollButton = elem.querySelector(".roll");
    const diceElem = elem.querySelector(".dice");
    
    // 按钮点击处理
    rollButton.onclick = () => {
        dice.value = Math.floor(Math.random() * 6) + 1;
    };
    
    // 更新视图函数
    const updateDice = () => {
        const diceValue = dice.value;
        diceElem.textContent = String.fromCodePoint(0x267f + diceValue);
        diceElem.style.color = `hsl(${diceValue * 60}, 70%, 30%)`;
    };
    
    // 初始渲染
    updateDice();
    
    // 监听数据变化
    Tree.on(dice, "afterChange", updateDice);
};