チャットのヒーロー サンプルの概要

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) メッセージの送信済みと既読の通知。
• ヘッダー: チャット スレッドのタイトルと、参加者と設定のサイド バーを切り替えるためのコントロール、およびチャット セッションを終了するための退出ボタンがユーザーに表示されます。
• サイド バー: ヘッダーでコントロールを使用して切り替えると、参加者と設定情報が表示されます。 参加者のサイド バーには、チャットの参加者の一覧と、チャット セッションに参加者を招待するためのリンクが含まれています。 設定のサイド バーでは、チャット スレッドのタイトルを構成できます。

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

前提条件

• Visual Studio Code (安定したビルド)。
• Node.js (16.14.2 以降)。
• アクティブなサブスクリプションが含まれる Azure アカウントを作成します。 詳細については、アカウントの無料作成に関するページを参照してください。
• Azure Communication Services リソースを作成します。 詳細については、Azure Communication リソースの作成に関するページを参照してください。 このクイック スタートでは、リソースの接続文字列を記録します。

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

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

次の手順

詳細については、次の記事を参照してください。

• チャットの概念について学習する
• Chat SDK について理解する
• UI ライブラリでチャット コンポーネントを確認する

関連トピック

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