快速入门：摇骰子

项目
12/21/2023

本快速入门将演练创建使用 Azure Fluid Relay 服务的摇骰子应用的过程。此快速入门分为两部分。第一部分将创建应用本身，并针对本地 Fluid 服务器运行它。第二部分将重新配置应用，以针对 Azure Fluid Relay 服务而不是本地开发服务器运行。

此快速入门中使用的示例代码可在此处找到。

设置开发环境

若要按照快速入门执行操作，需要一个 Azure 帐户，并预配了 Azure Fluid Relay 服务。如果没有帐户，可以免费适用 Azure。

还需要在计算机上安装以下软件。

代码编辑器 - 建议使用 Visual Studio Code。
Git
Node.js 12.17 或更高版本

本地入门

首先，需要从 GitHub 下载示例应用。打开新的命令窗口并导航到要下载代码的文件夹，然后使用 Git 克隆 FluidHelloWorld 存储库并查看 main-azure 分支。克隆过程将创建一个名为 FluidHelloWorld 的子文件夹，该子文件夹包含项目文件。

git clone -b main-azure https://github.com/microsoft/FluidHelloWorld.git

导航到新创建的文件夹，安装依赖项，然后启动应用。

cd FluidHelloWorld
npm install
...
npm start

运行命令 npm start 时，将发生两个情况。首先，将在本地进程中启动 Fluid 服务器。此服务器仅用于开发。稍后将升级到 Azure 托管的生产服务器。其次，新的浏览器选项卡将打开一个页面，其中包含摇骰子应用的新实例。可以使用同一 URL 打开新选项卡，以创建摇骰子应用的其他实例。默认情况下，应用的每个实例都配置为使用本地 Fluid 服务。单击任何应用实例中的“滚动”按钮，并注意骰子的状态会在每个客户端中更改。

升级到 Azure Fluid Relay

若要针对 Azure Fluid Relay 服务运行，需要更新应用的配置，以连接到 Azure 服务而不是本地服务器。

配置和创建 Azure 客户端

安装 @fluidframework/azure-client 和 "fluidframework/test-client-utils 包并导入 Azure 客户端和 InsecureTokenProvider。

import { InsecureTokenProvider } from "@fluidframework/test-client-utils";
import { AzureClient } from "@fluidframework/azure-client";

若要配置 Azure 客户端，请将 app.js 中的本地连接 serviceConfig 对象替换为 Azure Fluid Relay 服务配置值。可以在 Azure 门户的 Fluid Relay 资源的“访问密钥”部分中找到这些值。 serviceConfig 对象应如下所示，并替换了值。（有关如何查找这些值的信息，请参阅如何：预配 Azure Fluid Relay 服务。）请注意，id 和 name 字段是任意的。

const user = { id: "userId", name: "userName" };

const serviceConfig = {
    connection: {
        tenantId: "MY_TENANT_ID", // REPLACE WITH YOUR TENANT ID
        tokenProvider: new InsecureTokenProvider("" /* REPLACE WITH YOUR PRIMARY KEY */, user),
        endpoint: "https://myServiceEndpointUrl", // REPLACE WITH YOUR SERVICE ENDPOINT
        type: "remote",
    }
};

警告

在开发过程中，可以使用 InsecureTokenProvider 生成 Azure Fluid Relay 服务将接受的身份验证令牌，并对其进行签名。但是，从名称可以看出来，这是不安全的，不应在生产环境中使用。 Azure Fluid Relay 资源创建过程提供了一个密钥，可用于对安全请求进行签名。为了确保此机密不会被泄露，应将其替换为 ITokenProvider 的另一个实现，该实现在发布到生产之前从开发人员提供的安全后端服务提取令牌。

“如何：使用 Azure 函数编写 TokenProvider”中概述了一个安全方法。

仅生成并运行客户端

现在，你已指定应用使用 Azure 而不是本地服务器，因此无需在启动客户端应用时启动本地 Fluid 服务器。可以使用此命令，在启动客户端时不同时启动服务器。

npm run start:client

🥳恭喜🎉 你已成功迈出了开启 Fluid 协作世界的第一步。

通过