チャットヒーローサンプルを始めましょう

Warning

Azure Communication Servicesは画期的な変更を導入しており、一部のサービスが廃止される予定です。 詳細については、廃止と変更に関するガイドを参照してください。

重要

このサンプルは GitHub で入手できます。

Azure Communication Services グループ チャット ヒーロー サンプル では、Communication Services Chat Web SDK を使用してグループ チャット エクスペリエンスを構築する方法を示します。

この記事では、ローカル コンピューターでサンプルを実行する前のサンプルのしくみについて説明します。 次に、独自の Azure Communication Services リソースを使用して、サンプルを Azure にデプロイします。

概要

このサンプルには、クライアント側アプリケーションとサーバー側アプリケーションの両方があります。 クライアント側アプリケーションは、Microsoft の Fluent UI フレームワークを使用する React/Redux Web アプリケーションです。 このアプリケーションで Node.js のサーバー側アプリケーションに要求を送信することで、クライアント側アプリケーションから Azure に接続できるようにします。

サンプルは次のようになります。

サンプル アプリケーションのランディング ページを示すスクリーンショット。

[チャットの開始] ボタンを押すと、Web アプリケーションによって、サーバー側アプリケーションからユーザー アクセス トークンがフェッチされます。 このトークンを使用して、クライアント アプリを Azure Communication Services に接続します。 トークンが取得されると、システムによって、名前を入力し、チャットで自分を表す絵文字を選択するように求められます。

アプリケーションの事前チャット画面を示すスクリーンショット。

表示名と絵文字を構成すると、チャット セッションに参加できるようになります。 これで、コア チャット エクスペリエンスを提供するメインのチャット キャンバスが表示されます。

サンプル アプリケーションのメイン画面を示すスクリーンショット。

メイン チャット画面のコンポーネント:

  • メイン チャット領域: ユーザーがメッセージを送受信できるコア チャット エクスペリエンス。 メッセージを送信するには、入力領域を使用して Enter キーを押します (または、[送信] ボタンを使用します)。 チャット画面では、送信者が受信したチャット メッセージを正しい名前と絵文字で整理します。 チャット領域には、次の 2 種類の通知が表示されます。1) ユーザーが入力しているときの入力通知と、2) メッセージの送信済みと既読の通知。
  • ヘッダー: チャット スレッドのタイトルと、参加者と設定のサイド バーを切り替えるためのコントロール、およびチャット セッションを終了するための退出ボタンがユーザーに表示されます。
  • サイド バー: ヘッダーでコントロールを使用して切り替えると、参加者と設定情報が表示されます。 参加者のサイド バーには、チャットの参加者の一覧と、チャット セッションに参加者を招待するためのリンクが含まれています。 設定のサイド バーでは、チャット スレッドのタイトルを構成できます。

サンプルを設定するには、次の前提条件と手順を完了します。

前提条件

サンプルを初めて実行する前に行う手順

  1. PowerShell、Windows ターミナル、コマンド プロンプト、またはそれと同等のインスタンスを開き、サンプルのクローン先のディレクトリに移動します。

  2. 次の CLI 文字列を使用してリポジトリをクローンします。

    git clone https://github.com/Azure-Samples/communication-services-web-chat-hero.git

    または、「既存の Git リポジトリをクローンする」で説明されている任意の方法を使用してリポジトリをクローンします。

  3. Connection String と Endpoint URL は、Azure portal から、または Azure CLI を使用して取得します。

    az communication list-key --name "<acsResourceName>" --resource-group "<resourceGroup>"

    接続文字列の詳細については、Azure Communication Services リソースの作成に関するページをご覧ください

  4. Connection String を取得したら、Chat フォルダーにある Server/appsettings.json ファイルに接続文字列を追加します。 変数 ResourceConnectionString に接続文字列を入力します。

  5. Endpoint を取得したら、Server/appsetting.json ファイルにエンドポイント文字列を追加します。 変数 EndpointUrl にエンドポイントを入力します。

  6. Azure portal から identity を取得します。 Azure portal で [ID とユーザー アクセス トークン] を選択します。 Chat スコープを持つユーザーを生成します。

  7. identity 文字列を取得したら、Server/appsetting.json ファイルに ID 文字列を追加します。 変数 AdminUserId に ID 文字列を入力します。 サーバーは文字列を使用して、チャット スレッドに新しいユーザーを追加します。

ローカル実行

  1. Server/appsettings.json で接続文字列を設定します
  2. Server/appsettings.json でエンドポイント URL 文字列を設定します
  3. Server/appsettings.json で adminUserId 文字列を設定します
  4. ルート ディレクトリから npm run setup
  5. ルート ディレクトリから npm run start

このサンプルをローカルでテストするには、チャットの URL を使用して複数のブラウザー セッションを開き、マルチユーザー チャットをシミュレートします。

サンプルを Azure に発行する

  1. ルート ディレクトリで、次のコマンドを実行します:

    npm run setup
npm run build
npm run package

  2. Azure 拡張機能を使用し、Chat/dist ディレクトリを App Service にデプロイします

リソースをクリーンアップする

Communication Services サブスクリプションをクリーンアップして解除する場合は、リソースまたはリソース グループを削除できます。 リソース グループを削除すると、それに関連付けられている他のリソースも削除されます。 詳細については、リソースのクリーンアップに関する記事を参照してください。

次の手順

GitHub からサンプルをダウンロードする

詳細については、以下を参照してください。

  • サンプル - その他のサンプルと例については、「サンプルの概要」ページを参照してください。
  • Redux - クライアント側の状態管理
  • FluentUI - Microsoft が提供する UI ライブラリ
  • React - ユーザー インターフェイスを構築するためのライブラリ
  • 最終更新: