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 packageAzure 拡張機能を使用し、Chat/dist ディレクトリを App Service にデプロイします
リソースをクリーンアップする
Communication Services サブスクリプションをクリーンアップして解除する場合は、リソースまたはリソース グループを削除できます。 リソース グループを削除すると、それに関連付けられている他のリソースも削除されます。 詳細については、リソースのクリーンアップに関する記事を参照してください。
次の手順
詳細については、以下を参照してください。