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

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

前言

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

FluidFramework 简介

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

自动处理数据同步
支持离线优先设计
提供最终一致性保证
与主流前端框架兼容

项目准备

基础概念

在开始之前，我们需要了解几个关键概念：

容器(Container)：Fluid 应用的基本单元，包含共享数据和业务逻辑
共享对象(Shared Objects)：可在多个客户端间同步的特殊数据结构
服务(Service)：负责协调客户端间通信的后端

初始化项目

首先创建一个基本的 JavaScript 项目结构：

dice-roller/
├── src/
│   └── app.js
├── public/
│   ├── index.html
│   └── images/
│       ├── dice-1.png
│       ├── dice-2.png
│       └── ...
└── package.json

核心实现

1. 应用设置

在 app.js 中，我们首先导入必要的模块并初始化客户端：

import { SharedTree, TreeViewConfiguration, Tree } from "fluid-framework";
import { TinyliciousClient } from "@fluidframework/tinylicious-client";

// 初始化客户端
const client = new TinyliciousClient();

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

// 获取DOM根元素
const root = document.getElementById("content");

这里使用了 TinyliciousClient，它是 FluidFramework 提供的本地测试服务，适合开发和调试。

2. 容器管理

Fluid 应用的核心是容器管理，我们需要处理容器的创建和加载两种场景。

创建新容器

const createNewDice = async () => {
    // 创建容器并指定版本为2
    const { container } = await client.createContainer(containerSchema, "2");
    
    // 初始化骰子数据
    const dice = container.initialObjects.diceTree.viewWith(treeViewConfiguration);
    dice.initialize(new Dice({ value: 1 }));
    
    // 附加容器并获取ID
    const id = await container.attach();
    
    // 渲染界面
    renderDiceRoller(dice.root, root);
    return id;
};

加载现有容器

const loadExistingDice = async (id) => {
    // 加载指定ID的容器
    const { container } = await client.getContainer(id, containerSchema, "2");
    
    // 获取骰子数据
    const dice = container.initialObjects.diceTree.viewWith(treeViewConfiguration);
    
    // 渲染界面
    renderDiceRoller(dice.root, root);
};

路由逻辑

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

start().catch((error) => console.error(error));

3. 视图实现

我们使用原生 DOM API 实现骰子界面：

const template = document.createElement("template");

template.innerHTML = `
  <style>
    .wrapper { display: flex; flex-direction: column; align-items: center; }
    .dice { width: 200px; }
    .rollButton { 
        width: 118px; height: 48px; 
        background: #0078D4; 
        border-style: none; border-radius: 8px; 
    }
    .rollText { font-size: 20px; color: #FFFFFF; }
  </style>
  <div class="wrapper">
    <img class="dice"/>
    <button class="rollButton">
      <span class="rollText">Roll</span>
    </button>
  </div>
`;

4. 数据绑定

将视图与 Fluid 数据连接起来：

const renderDiceRoller = (dice, elem) => {
    // 添加模板到DOM
    elem.appendChild(template.content.cloneNode(true));

    const rollButton = elem.querySelector(".rollButton");
    const diceElem = elem.querySelector(".dice");

    // 按钮点击处理
    rollButton.onclick = () => {
        dice.value = Math.floor(Math.random() * 6) + 1;
    };

    // 更新骰子显示
    const updateDice = () => {
        const diceValue = dice.value;
        diceElem.src = `/images/dice-${diceValue}.png`;
        diceElem.alt = diceValue.toString();
    };

    // 初始更新
    updateDice();

    // 监听远程变更
    Tree.on(dice, "nodeChanged", updateDice);
};