チャットのヒーロー サンプルの概要
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 リソースの作成に関するページを参照してください。 このクイック スタートでは、リソースの接続文字列を記録します。
サンプルを初めて実行する前に行う手順
PowerShell、Windows ターミナル、コマンド プロンプト、またはそれと同等のインスタンスを開き、サンプルのクローン先のディレクトリに移動します。
次の CLI 文字列を使用してリポジトリをクローンします。
git clone https://github.com/Azure-Samples/communication-services-web-chat-hero.git
または、「既存の Git リポジトリをクローンする」で説明されている任意の方法を使用してリポジトリをクローンします。
Connection String
とEndpoint URL
は、Azure portal から、または Azure CLI を使用して取得します。az communication list-key --name "<acsResourceName>" --resource-group "<resourceGroup>"
接続文字列の詳細については、Azure Communication Services リソースの作成に関するページをご覧ください
Connection String
を取得したら、Chat フォルダーにある Server/appsettings.json ファイルに接続文字列を追加します。 変数ResourceConnectionString
に接続文字列を入力します。Endpoint
を取得したら、Server/appsetting.json ファイルにエンドポイント文字列を追加します。 変数EndpointUrl
にエンドポイントを入力します。Azure portal から
identity
を取得します。 Azure portal で [ID とユーザー アクセス トークン] を選択します。Chat
スコープを持つユーザーを生成します。identity
文字列を取得したら、Server/appsetting.json ファイルに ID 文字列を追加します。 変数AdminUserId
に ID 文字列を入力します。 これは、チャット スレッドに新しいユーザーを追加するサーバー ユーザーです。
ローカルの実行
Server/appsettings.json
で接続文字列を設定しますServer/appsettings.json
でエンドポイント URL 文字列を設定しますServer/appsettings.json
で adminUserId 文字列を設定します- ルート ディレクトリから
npm run setup
- ルート ディレクトリから
npm run start
このサンプルをローカルでテストするには、チャットの URL を使用して複数のブラウザー セッションを開き、マルチユーザー チャットをシミュレートします。
サンプルを Azure に発行する
- ルート ディレクトリで、次のコマンドを実行します:
npm run setup
npm run build
npm run package
- Azure 拡張機能を使用し、Chat/dist ディレクトリを App Service にデプロイします
リソースをクリーンアップする
Communication Services サブスクリプションをクリーンアップして解除する場合は、リソースまたはリソース グループを削除できます。 リソース グループを削除すると、それに関連付けられている他のリソースも削除されます。 詳細については、リソースのクリーンアップに関する記事を参照してください。
次の手順
詳細については、次の記事を参照してください。