カスタム Azure Fluid Relay サービス

  • [アーティクル]

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

前提条件

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

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

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

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 には、次のようなアプリ内の他の機能を強化する一般的な会議シナリオに役立つ機能があります。

コンテナー マッピング

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

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

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

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

注:

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

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

LiveShareClient なしで Live Share を使用する

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

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

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使用するか、 の関数をgetTimestamp()サーバーから返された値でAzureLiveShareHostオーバーライドする必要があります。

関連項目