Azure Communication Services を使ってみた！(Chat編)

前回の記事 で Azure Communication Services の Call 機能を試して見ましたが、今回はチャット機能のチュートリアルを試してみたいと思います。
#サンプルリソースの準備
マイクロソフトのこちらのドキュメントを参考にしています。現在は英語しかありません。
Get started with the group chat hero sample
サンプルコードは以下からダウンロードすることができます。レポジトリをクローンすると、Call や SMS 機能も含んだディレクトリごとダウンロードされますが、今回試して見るのは Chat というソリューションです。
GitHub : Azure/Communication
ダウンロードしたらこちらを Visual Studio 2017 以上で開きます。

##チュートリアルの注意事項
README にも記載されていますが、サンプルコードを動かすには以下の環境が必要です。

Node.js (12.18.4 and above)
Visual Studio (2017 and above)
.NET Core 2.2 (Make sure to install version that corresponds with your visual studio instance, 32 vs 64 bit)

特に、.NET Core のバージョンは注意してください。.NET Core 2.2 が必要です。現在は .NET Core 3.1 がリリースされていますが、3.1 の環境ではサンプルが動きません。以下のダウンロードページより、.NET Core 2.2 をインストールする必要があります。
Download .NET Core 2.2

#Azure Communication Services のリソースを作成
Azure Portal から Azure Communication Services のリソースを作成します。Marketplace で Communication Services などと検索すると引っ掛かります。

新しく作成するリソースグループ名、リソース名を入力し、リソースを作成します。(1,2分で完了します。) 作成されるとリソースにアクセスして、エンドポイントの URL と Key を見ることができます。これはあとから使うので、どこかメモ帳などに記録しておきます。

#サンプルコードを実行する
サンプルコードを実行するには、必要な個所を編集して、Visual Studio で実行します。
##サンプルコードを編集する
サンプルコードは以下 2 箇所を編集します。まず一つは、appsettings.json の ResourceConnectionString の値に先ほど Azure Portal で確認した Communication Services の Key にある Connection String を入力します。

appsettings.json

{
  "Logging": {
    "LogLevel": {
      "Default": "Trace",
      "System": "Information",
      "Microsoft": "Information"
    }
  },
  "AllowedHosts": "*",

  "ContosoChat": {
    "ResourceConnectionString": "ここに Connection String を挿入"
  }
}

もう一か所は、ClientApp/src/constants.tsx の中の値です。一番上に Project Settings とコメントアウトされているENVIRONMENT_URL という値があるので、その値を Communication Services のエンドポイント URL に変更します。

constants.tsx

// Project settings
export const ENVIRONMENT_URL = 'ここをエンドポイント URL に変更する';

export const GUID_FOR_INITIAL_TOPIC_NAME =
  'c774da81-94d5-4652-85c7-6ed0e8dc67e6';

// Project configurations
export const COOL_PERIOD_THRESHOLD = 60 * 1000;
export const INITIAL_MESSAGES_SIZE = 2000;
export const MAXIMUM_LENGTH_OF_NAME = 10;
export const MAXIMUM_LENGTH_OF_MESSAGE = 8000;
export const MAXIMUM_LENGTH_OF_TOPIC = 30;
export const MAXIMUM_LENGTH_OF_TYPING_USERS = 35;
export const MAXIMUM_RETRY_COUNT = 3;
export const MINIMUM_TYPING_INTERVAL_IN_MILLISECONDS = 8000;
export const MAXIMUM_INT64 = 9223372036854775807;
export const NUMBER_OF_MESSAGES_TO_LOAD = 10;
export const PAGE_SIZE = 200;
export const PARTICIPANTS_THRESHOLD = 20;
・・・・・・省略

ここまででサンプルコードを動かす準備は完了です！

##実行する
では実際に実行してみます。ビルドが無事に完了するとブラウザで localhost:5000 が開き、以下のようなページが表示されるかと思います。

Start chat を押すとチャット画面が表示されます。このサンプルでは、アイコンと名前を入力してチャットルームに入ることができるみたいです。チャットには スレッドID が割り振られていて、これでチャットルームの ID を管理してみるみたいですね。

スレッド ID(例) : http://localhost:5000/?threadId=19:9271e6bf9d844fa89e4cfafce5b58d47@thread.v2
```
左下の `Copy invite link` でこのスレッド ID をコピーすることができます。別のブラウザウィンドウからスレッド ID にアクセスすると、同様にアイコンと名前を入力して同じチャットルームに入ることができます。チャットルームの名前も設定できます。Teams のチャットのように、入力中には相手画面に `User01 is typing...` のように表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149921/f01d3330-7aaa-6ae6-fb8f-a1fed42eb40e.png)
ここまででローカルの環境で Azure Communication Services を使用したチャットを実行することができました。次に、Azure Web App にこのチャットを発行して、オンラインで色々使えるチャットを作成してみます。

#Azure Web App でチャットを実行する
まずは Azure 上に Web App リソースを作成し、そのあとで作成したリソースに向かって Visual Studio からコードを流し込んでみます。
##Azure Web App リソース作成
Azure Portal から .NET ラインタイムを持つ Web App を作成します。初めて作成する方は以下のドキュメントが参考になるかと思います。
[Azure App Service で Web アプリケーションをホストする](https://docs.microsoft.com/ja-jp/learn/modules/host-a-web-app-with-azure-app-service/)
今回は Azure Communication Services と同じリソースグループに、`komiyasachat` という Web App を作成しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149921/b5e28a66-1eb6-86db-6017-faa8d5fc7665.png)
##Visual Studio から Web App に発行する
Visual Studio の `Chat` プロジェクトを右クリックして `発行` をクリックします。Visual Studio に Azure と同じアカウントでログインしていると、ここから Azure 上にある Web App に向かって発行することができます。先ほど作成した `komiyasachat` という Web App に向けて発行します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149921/c508fd1d-4ee9-0a7c-2707-0886b039ab39.png)
発行が無事完了すると、Web App が自動的に立ち上がります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149921/8ec018b0-5eee-5f99-79f6-3d94d471ff4a.png)
スレッド ID に別々のブラウザからアクセスするとチャットを試すことができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149921/147bf734-c885-7f76-bb2b-8d4b53cc69fa.png)
既に Web App になっているので、モバイルからももちろんアクセスできます。モバイル画面だとこんな感じ↓ (横画面 ver)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149921/e5f9037a-b93e-b935-93d4-17a05d678bb5.png)
こんなに簡単にサンプルチャットアプリができることに驚きでした..!

#わかったこと
新しくリリースされた Azure Communication Services を早速触ってみましたが、色々応用が効きそうなプロダクトという印象です。今後の機能更新には期待したいですね。チャット機能を軽く触ってみてわかったことをいくつか書いておきます。
##チャット以外のデータチャネルはない？？
Azure Communication Services には Call 機能や Chat 機能があることが分かりましたが、データを送信するようなデータチャネルアは現状ないみたいですね。(ライブラリをさっと見る限りですが)
https://docs.microsoft.com/ja-jp/azure/communication-services/concepts/sdk-options
Teams のチャットルームのように、ファイルの送信や添付画像と一緒に送信とか、今後機能が追加されることを期待したいです。
##URL だけだとガバガバのチャットになってしまう？
Azure AD B2C などでログイン機能を使わないと URL だけでだれでもアクセスできるチャットになってしまうので、ログイン機能と合わせた実装は必須かと思いました。
https://docs.microsoft.com/ja-jp/azure/communication-services/concepts/authentication?tabs=csharp
##価格は安い。でもチリツモには気を付けたい
現在の公開情報によると、
>送信されたチャット メッセージごとに $0.0008 が課金されます。

ということでした。ユーザー数とは関係なくメッセージ数で課金されるみたいですね。複数人でチャットをしている場合、後から追加したユーザーも過去の履歴はみることができるので、シンプルにメッセージ数で課金されると考えて大丈夫かなと思います。(プレビュー版なので GA になったら変わるかも？)
https://docs.microsoft.com/ja-jp/azure/communication-services/concepts/pricing

たとえば 100 件のメッセージをやり取りしたとすると、$0.08 なので、まぁ安いですね。ただ、大規模なアプリケーションとかで使用する際にはちりも積もればなので注意が必要かなと思いました。