Rychlý start: Válečkové kostky

Článek
03/14/2023

V tomto rychlém startu vás provedeme procesem vytvoření aplikace kostkového válečku, která používá službu Azure Fluid Relay. Rychlý start je rozdělený na dvě části. V první části vytvoříme samotnou aplikaci a spustíme ji na místním serveru Fluid. Ve druhé části překonfigurujeme aplikaci tak, aby běžela pro službu Azure Fluid Relay místo pro místní vývojový server.

Ukázkový kód použitý v tomto rychlém startu je k dispozici tady.

Nastavíte vývojové prostředí

Abyste mohli postupovat podle tohoto rychlého startu, budete potřebovat účet Azure a zřízenou službu Azure Fluid Relay. Pokud účet nemáte, můžete azure vyzkoušet zdarma.

V počítači budete také potřebovat nainstalovaný následující software.

Editor kódu – Doporučujeme Visual Studio Code.
Git
Node.js verze 12.17 nebo novější

Začínáme místně

Nejdřív si budete muset stáhnout ukázkovou aplikaci z GitHubu. Otevřete nové příkazové okno a přejděte do složky, do které chcete stáhnout kód, a pomocí Gitu naklonujte úložiště FluidHelloWorld a prohlédněte main-azure si větev. Proces klonování vytvoří podsložku s názvem FluidHelloWorld se soubory projektu v ní.

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

Přejděte do nově vytvořené složky, nainstalujte závislosti a spusťte aplikaci.

cd FluidHelloWorld
npm install
...
npm start

Při spuštění příkazu se npm start stanou dvě věci. Nejprve se spustí server Fluid v místním procesu. Tento server je určen pouze pro vývoj. Později upgradujete na produkční server hostovaný v Azure. Zadruhé se otevře nová karta prohlížeče na stránce, která obsahuje novou instanci aplikace kostkového válečku. Můžete otevřít nové karty se stejnou adresou URL a vytvořit další instance aplikace kostkového válečku. Každá instance aplikace je ve výchozím nastavení nakonfigurovaná tak, aby používala místní službu Fluid. Klikněte na tlačítko Vrátit v libovolné instanci aplikace a všimněte si, že stav kostky se mění v každém klientovi.

Upgrade na Azure Fluid Relay

Pokud chcete spustit službu Azure Fluid Relay, budete muset aktualizovat konfiguraci aplikace, abyste se mohli připojit ke službě Azure místo k místnímu serveru.

Konfigurace a vytvoření klienta Azure

Nainstalujte @fluidframework/azure-client a @fluidframework/test-client-utils balíčků a importujte azure Client a InsecureTokenProvider.

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

Pokud chcete nakonfigurovat klienta Azure, nahraďte objekt místního připojení serviceConfig v souboru app.js hodnotami konfigurace služby Azure Fluid Relay. Tyto hodnoty najdete v části Přístupový klíč prostředku Fluid Relay v Azure Portal. Objekt serviceConfig by měl vypadat takto s hodnotami nahrazenými. (Informace o tom, jak tyto hodnoty najít, najdete v tématu Postupy: Zřízení služby Azure Fluid Relay.) Všimněte si id , že pole a name jsou libovolná.

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",
    }
};

Upozornění

Během vývoje můžete InsecureTokenProvider generovat a podepisovat ověřovací tokeny, které bude služba Azure Fluid Relay přijímat. Jak ale název napovídá, je to nezabezpečené a nemělo by se používat v produkčních prostředích. Proces vytvoření prostředku Azure Fluid Relay poskytuje tajný klíč, který se dá použít k podepisování zabezpečených požadavků. Aby se zajistilo, že se tento tajný klíč nezveřejní, měli byste ho nahradit jinou implementací ITokenProvider, která před vydáním do produkčního prostředí načte token ze zabezpečené back-endové služby poskytované vývojářem.

Jeden zabezpečený přístup je nastíněný v tématu Postupy: Zápis tokenprovidera pomocí funkce Azure Functions.

Sestavení a spuštění pouze klienta

Teď, když jste aplikaci nasměrovali, aby místo místního serveru používala Azure, nemusíte spouštět místní server Fluid společně s klientskou aplikací. Klienta můžete spustit bez spuštění serveru pomocí tohoto příkazu.

npm run start:client

🥳🎉 Blahopřejeme Úspěšně jste udělali první krok k odemčení světa fluid spolupráce.

Sdílet prostřednictvím