Краткое руководство. Симулятор игральных костей

  • Статья

В этом кратком руководстве мы рассмотрим процесс создания приложения для ролика в кости, которое использует службу 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. Нажмите кнопку Roll в любом экземпляре приложения и обратите внимание, что состояние игральных костей изменяется в каждом клиенте.

Обновление до 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, замените локальный объект подключения serviceConfig в app.js на значения конфигурации службы Azure Fluid Relay. Эти значения можно найти в разделе "Ключ доступа" в ресурсе Fluid Relay на портале Azure. Объект 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, которая извлекает маркер из защищенной серверной службы, предоставляемой разработчиком, прежде чем использовать клиент в рабочей среде.

Один из безопасных подходов описан в разделе How to: Write a TokenProvider with an Azure Function (Практическое руководство. Написание tokenProvider с помощью функции Azure).

Сборка и запуск только клиента

Теперь, когда указали приложению использовать Azure вместо локального сервера, вам не нужно запускать локальный сервер Fluid вместе с клиентским приложением. С помощью этой команды вы можете запустить клиент, не запуская сервер:

npm run start:client

🥳Поздравляем! 🎉 Вы сделали первый шаг в мире совместной работы с Fluid.