カスタム Azure Fluid Relay サービス

  • [アーティクル]

無料のホステッド サービスを使用することをお勧めしますが、Live Share アプリに独自の Azure Fluid Relay サービスを使用すると便利な場合があります。

前提条件

  1. サイコロ ローラーのチュートリアルに示すように、会議のサイド パネルとステージ アプリ会議拡張機能を構築します。
  2. アプリ マニフェストを更新して、 必要なすべてのアクセス許可を含めます。
  3. この チュートリアルで説明されているように、Azure Fluid Relay サービスをプロビジョニングします。

Azure Fluid Relay サービスに接続する

LiveShareClientの初期化を呼び出すときに、独自のAzureConnectionConfigを定義できます。 Live Share は、作成したコンテナーを会議に関連付けますが、コンテナーのトークンに署名するには、 ITokenProvider インターフェイスを実装する必要があります。 この例では、Azure クラウド関数を使用してサーバーにアクセス トークンを要求する Azure の AzureFunctionTokenProviderについて説明します。

import { LiveShareClient, LivePresence } from "@microsoft/live-share";
import { LiveShareHost } from "@microsoft/teams-js";
import { SharedMap } from "fluid-framework";
import { AzureFunctionTokenProvider } from "@fluidframework/azure-client";

// Define a custom connection for your app
const options = {
  connection: {
    tenantId: "MY_TENANT_ID",
    tokenProvider: new AzureFunctionTokenProvider(
      "MY_SERVICE_ENDPOINT_URL" + "/api/GetAzureToken",
      { userId: "userId", userName: "Test User" }
    ),
    endpoint: "MY_SERVICE_ENDPOINT_URL",
    type: "remote",
  },
};
// Join the Fluid container
const host = LiveShareHost.create();
const liveShare = new LiveShareClient(host, options);
const schema = {
  initialObjects: {
    presence: LivePresence,
    ticTacToePositions: SharedMap,
  },
};
const { container } = await liveShare.joinContainer(schema);

// ... ready to start app sync logic

カスタム Azure Fluid Relay サービスを使用する理由

次の場合は、カスタム AFR サービス接続の使用を検討してください。

  • 会議の有効期間を超えて Fluid コンテナーにデータを格納する必要があります。
  • カスタム セキュリティ ポリシーを必要とする機密データをサービス経由で送信します。
  • Teams の外部でアプリケーション用の Fluid Framework を使用して機能を開発します。

カスタム サービスで Live Share を使用する理由

Azure Fluid Relay は、任意の Web ベースのアプリケーションで動作するように設計されています。つまり、Microsoft Teamsの有無にかかわらず機能します。 これは重要な質問を提起します。自分の Azure Fluid Relay サービスを構築する場合、Live Share は引き続き必要ですか?

Live Share には、次のようなアプリ内の他の機能を強化する一般的な会議シナリオに役立つ機能があります。

コンテナー マッピング

@microsoft/live-shareのLiveShareClientは、一意の会議識別子を Fluid コンテナーにマッピングする役割を担います。これにより、すべての会議参加者が確実に同じコンテナーに参加できるようになります。 このプロセスの一環として、クライアントは、既に存在する会議にマップされた containerId に接続しようとします。 存在しない場合は、 AzureClient を使用して AzureConnectionConfig を使用してコンテナーを作成し、 containerId を他の会議参加者に中継します。

アプリに Fluid コンテナーを作成し、他のメンバーに共有するためのメカニズムが既にある場合 (会議ステージで共有される URL に containerId を挿入するなど)、アプリに必要ない場合があります。

ライブ オブジェクトとロールの検証

LivePresence、LiveState、LiveEventなどの Live Share のライブ データ構造は、会議でのコラボレーションに合わせて調整されているため、Microsoft Teamsの外部で使用される Fluid コンテナーではサポートされません。 ロール検証などの機能は、アプリがユーザーの期待に合わせて調整するのに役立ちます。

注:

また、ライブ オブジェクトは、従来の Fluid データ構造と比較してメッセージの待ち時間が短縮されるという利点もあります。

詳細については、「 コア機能 」ページを参照してください。

LiveShareClient なしで Live Share を使用する

カスタム Azure Fluid Relay サービスに LiveShareClient クラスを使用しない場合でも、Live Share を使用できます。 これは、コンテナーをいつ作成するか、会議の参加者と共有する方法を制御する場合に役立ちます。

アプリケーションでこれを行う方法の例を次に示します。

import {
  LiveShareClient,
  LivePresence,
  getLiveShareContainerSchemaProxy,
} from "@microsoft/live-share";
import { SharedMap } from "fluid-framework";
import {
  AzureFunctionTokenProvider,
  AzureClient,
} from "@fluidframework/azure-client";
import { LiveShareHost } from "@microsoft/teams-js";

// Define a custom connection for your app
const options = {
  connection: {
    tenantId: "MY_TENANT_ID",
    tokenProvider: new AzureFunctionTokenProvider(
      "MY_SERVICE_ENDPOINT_URL" + "/api/GetAzureToken",
      { userId: "userId", userName: "Test User" }
    ),
    endpoint: "MY_SERVICE_ENDPOINT_URL",
    type: "remote",
  },
};
// Initialize your AzureClient instance
const client = new AzureClient(options);
// Define your Fluid schema
const schema = {
  initialObjects: {
    presence: LivePresence,
    ticTacToePositions: SharedMap,
  },
};
// Create your host
const host = LiveShareHost.create();
// Create the LiveShareRuntime, which is needed for `LiveDataObject` instances to work
const runtime = new LiveShareRuntime(this._host);
// Inject the LiveShareRuntime dependency into the ContainerSchema
const injectedSchema = getLiveShareContainerSchemaProxy(
    schema,
    runtime,
);
// Create (or get) your container
const { container } = await client.createContainer(injectedSchema);

// ... ready to start app sync logic

または、 AzureLiveShareHostを使用またはオーバーライドすることもできます。 これにより、Microsoft Teamsではなく、 AzureAudienceからカスタム ユーザーの表示名とロールを取得できます。

import {
  LiveShareClient,
  LivePresence,
  AzureLiveShareHost,
  getLiveShareContainerSchemaProxy,
} from "@microsoft/live-share";
import { SharedMap } from "fluid-framework";
import {
  AzureFunctionTokenProvider,
  AzureClient,
} from "@fluidframework/azure-client";

// Define a custom connection for your app
const options = {
  connection: {
    tenantId: "MY_TENANT_ID",
    tokenProvider: new AzureFunctionTokenProvider(
      "MY_SERVICE_ENDPOINT_URL" + "/api/GetAzureToken",
      { userId: "userId", userName: "Test User" }
    ),
    endpoint: "MY_SERVICE_ENDPOINT_URL",
    type: "remote",
  },
};
// Initialize your AzureClient instance
const client = new AzureClient(options);
// Define your Fluid schema
const schema = {
  initialObjects: {
    presence: LivePresence,
    ticTacToePositions: SharedMap,
  },
};
// Create your AzureLiveShareHost
const host = AzureLiveShareHost.create();
// Create the LiveShareRuntime, which is needed for `LiveDataObject` instances to work
const runtime = new LiveShareRuntime(this._host);
// Inject the LiveShareRuntime dependency into the ContainerSchema
const injectedSchema = getLiveShareContainerSchemaProxy(
    schema,
    runtime,
);
// Create (or get) your container
const { container } = await client.createContainer(injectedSchema);
// Set AzureAudience into the AzureLiveShareHost
host.setAudience(services.audience);

// ... ready to start app sync logic

多くの Live Share API はグローバル タイムスタンプ API に依存しているため、オブジェクト LiveDataObject リモート メッセージの順序を決定できます。 TimestampProvider クラスに依存するデータ構造を使用している場合は、teams-js ライブラリのLiveShareHostを使用するか、AzureLiveShareHostのgetTimestamp()関数をサーバーから返された値でオーバーライドする必要があります。

関連項目