Quickstart: Dobbelsteenroller

In deze quickstart doorloopt u het proces voor het maken van een dobbelsteenroller-app die gebruikmaakt van de Azure Fluid Relay-service. De quickstart bestaat uit twee delen. In deel één maken we de app zelf en voeren we deze uit op een lokale Fluid-server. In deel twee configureren we de app opnieuw om te worden uitgevoerd op de Azure Fluid Relay-service in plaats van op de lokale ontwikkelserver.

De voorbeeldcode die in deze quickstart wordt gebruikt, is hier beschikbaar.

De ontwikkelomgeving instellen

Als u deze quickstart wilt volgen, moet u een Azure-account en Azure Fluid Relay ingerichte. Als u geen account hebt, kunt u Azure gratis proberen.

U moet ook de volgende software op uw computer installeren.

• Een code-editor: we raden Visual Studio Code aan.
• Git
• Node.js versie 12.17 of hoger

lokaal Aan de slag

Eerst moet u de voorbeeld-app downloaden van GitHub. Open een nieuw opdrachtvenster en navigeer naar de map waarin u de code wilt downloaden en gebruik Git om de FluidHelloWorld-opslagplaats te klonen en de main-azure vertakking uit te checken. Tijdens het kloonproces wordt een submap met de naam FluidHelloWorld gemaakt met daarin de projectbestanden.

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

Navigeer naar de zojuist gemaakte map, installeer afhankelijkheden en start de app.

cd FluidHelloWorld
npm install
...
npm start

Wanneer u de npm start opdracht uitvoert, gebeuren er twee dingen. Eerst wordt een Fluid-server gestart in een lokaal proces. Deze server is alleen bedoeld voor ontwikkeling. U gaat later upgraden naar een door Azure gehoste productieserver. Ten tweede wordt een nieuw browsertabblad geopend met een pagina die een nieuw exemplaar van de dobbelsteenroller-app bevat. U kunt nieuwe tabbladen met dezelfde URL openen om extra exemplaren van de dobbelsteenroller-app te maken. Elk exemplaar van de app is standaard geconfigureerd voor het gebruik van uw lokale Fluid-service. Klik op de knop Roll in een willekeurig exemplaar van de app en merk op dat de status van de dobbelstenen in elke client verandert.

Upgraden naar Azure Fluid Relay

Als u wilt uitvoeren op de Azure Fluid Relay-service, moet u de configuratie van uw app bijwerken om verbinding te maken met uw Azure-service in plaats van met uw lokale server.

Een Azure-client configureren en maken

Installeer @fluidframework/azure-client en '@fluidframework/test-client-utils-pakketten en importeer Azure Client en InsecureTokenProvider.

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

Als u de Azure-client wilt configureren, vervangt u het lokale verbindingsobject serviceConfig in door app.js de configuratiewaarden van de Azure Fluid Relay-service. Deze waarden vindt u in de sectie Toegangssleutel van de Fluid Relay-resource in de Azure Portal. Het serviceConfig object moet er als volgt uitzien, waarbij de waarden zijn vervangen. (Zie How to: Provision an Azure Fluid Relay service (Een Azure Fluid Relay-service inrichten) voor informatie over het vinden van deze waarden.) Houd er rekening mee dat de id velden en name willekeurig zijn.

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

Waarschuwing

Tijdens de ontwikkeling kunt u gebruiken InsecureTokenProvider om verificatietokens te genereren en te ondertekenen die door de Azure Fluid Relay-service worden geaccepteerd. Zoals de naam al aangeeft, is dit echter onveilig en mag deze niet worden gebruikt in productieomgevingen. Het proces voor het maken van azure Fluid Relay-resources biedt u een geheime sleutel die kan worden gebruikt om beveiligde aanvragen te ondertekenen. Om ervoor te zorgen dat dit geheim niet wordt weergegeven, moet dit worden vervangen door een andere implementatie van ITokenProvider die het token ophaalt uit een veilige, door ontwikkelaars geleverde back-endservice voordat het wordt uitgebracht voor productie.

Een veilige benadering wordt beschreven in 'How to: Write a TokenProvider with an Azure Function'.

Alleen de client bouwen en uitvoeren

Nu u uw app hebt aangegeven om Azure te gebruiken in plaats van een lokale server, hoeft u de lokale Fluid-server niet samen met uw client-app te starten. U kunt de client starten zonder ook de server te starten met deze opdracht.

npm run start:client

🥳🎉 Gefeliciteerd U hebt de eerste stap gezet om de wereld van Fluid-samenwerking te ontgrendelen.