Amazon Chime SDK for Messagingを使ったデモアプリを実行してリソースや実装を確認してみた

いわさです。

Amazon Chime SDKを使うと、Amazon Chimeのようなオンライン会議に必要な機能を独自のアプリケーションへ組み込むことが可能です。

実は、Chime SDKにはミーティング機能だけではなく、メッセージング機能も存在しています。

aws — AWS CLI 2.4.7 Command Reference

CLIではChimeに関するコマンドとして、以下が存在しています。

• chime
• chime-sdk-identity
• chime-sdk-meetings
• chime-sdk-messaging

chime-sdk-identityはアプリケーションやユーザーを管理する共通機能で、普段みなさんがChime SDKとしてイメージするものはchime-sdk-meetingsになります。
そして、chime-sdk-messagingを使うとメッセージングアプリケーションを作成することが出来ます。

Chime SDKは、SDKなのでアプリケーションへ組み込むためにはよく実装を理解する必要があります。
Chime SDKにはデモアプリケーションが存在しており、そこから解析を行う方法も理解を早めるためには有効なのではないかと思います。

今回Chime SDK for Messagingの追加機能を使いたくてChime SDKを理解する必要が出たので、まずはデモアプリを動かしてみました。

デモアプリのセットアップ

ソースコードの一式は以下のリポジトリから取得します。

内容としては、AWSサービスで構成されるバックエンド(CloudFormationテンプレート)と、フロントとなるReactアプリで構成されています。

バックエンドの構築

amazon-chime-sdk/template.yaml at main · aws-samples/amazon-chime-sdk

こちらのテンプレートを使ってCloudFormationスタックを作成するだけでバックエンドリソースは作成されます。

テンプレートパラメータのAPNやFCMに関する情報は入力しなくても良いです。
こちらを入力するとチャネルが有効化されたPinpointアプリケーションやロールが追加されますが今回は使用しません。

また、Pinpointリソースやポリシーの作成までは行ってくれるのですが、最近追加されたChimeメッセージングAPIからのプッシュ通知機能はこのサンプルには含まれていません。
ただし、SDKにAPIは既に存在しているので独自で実装すればプッシュ通知機能は使えそうです。

構築時の注意点として、Chime SDK for Messagingは現時点ではバージニア北部(us-east-1)でのみ利用が可能です。 よって、スタックの作成もバージニア北部にする必要があるのでご注意ください。

構築すると、Chimeのアプリインスタンスと、CognitoユーザープールおよびAPI Gateway+Lambdaが作成されます。
サーバーレスですね。

一部CloudFormationが対応していない部分（Chimeアプリインスタンス作成など）はカスタムリソースで対応されていました。参考になります。

作成後はスタック出力の値をフロント側で設定する必要があるので取得しておいてください。

フロントエンド

フロントエンドはReactアプリケーションです。今回はローカルホストで実行します。
まず、Config.jsファイルに先程の出力パラメータを設定します。

src/Config.js

// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: MIT-0

const appConfig = {
  apiGatewayInvokeUrl:'',
  cognitoUserPoolId: '',
  cognitoAppClientId: '',
  cognitoIdentityPoolId: '',
  appInstanceArn: '',
  region: 'us-east-1',  // Only supported region for Amazon Chime SDK Messaging as of this writing
  attachments_s3_bucket_name: ''
};
export default appConfig;

あとは実行してやるだけです。

iwasa.takahito@hoge 20211227chat % npm install
iwasa.takahito@hoge 20211227chat % npm start

> chime-sdk-chat-demo@1.0.1 start /Users/iwasa.takahito/work/20211227chat
> webpack serve

<i> [webpack-dev-server] Generating SSL Certificate...
<i> [webpack-dev-server] SSL certificate: /Users/iwasa.takahito/work/20211227chat/node_modules/.cache/webpack-dev-server/server.pem
<i> [webpack-dev-server] [HPM] Proxy created: /  -> http://localhost:8080
<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: https://localhost:9000/
<i> [webpack-dev-server] On Your Network (IPv4): https://192.168.0.151:9000/
<i> [webpack-dev-server] On Your Network (IPv6): https://[fe80::1]:9000/
<i> [webpack-dev-server] Content not from webpack is served from '/Users/iwasa.takahito/work/20211227chat/dist' directory
<i> [webpack-dev-server] 404s will fallback to '/index.html'
Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db

Why you should do it regularly:
https://github.com/browserslist/browserslist#browsers-data-updating
asset chat-bundle.js 24 MiB [emitted] (name: main)
asset chat.html 444 bytes [emitted]
orphan modules 656 KiB [orphan] 146 modules
runtime modules 1.3 KiB 7 modules
javascript modules 7.56 MiB
  modules by path ./node_modules/ 7.24 MiB 975 modules
  modules by path ./src/ 330 KiB 93 modules
  fs (ignored) 15 bytes [built] 
  crypto (ignored) 15 bytes [optional] [built] 
json modules 2.77 MiB
  modules by path ./node_modules/aws-sdk/apis/*.json 2.76 MiB 243 modules
  modules by path ./node_modules/@aws-sdk/ 6.06 KiB
    ./node_modules/@aws-sdk/client-cognito-identity/dist/es/package.json 2.78 KiB [built] 
    ./node_modules/@aws-sdk/client-s3/dist/es/package.json 3.28 KiB [built] 
  ./node_modules/aws-sdk/lib/region_config_data.json 5.21 KiB [built] 
webpack 5.33.2 compiled successfully in 32451 ms

使ってみる

出力された、https://192.168.0.151:9000/にWebブラウザでアクセスしましょう。

サインイン画面が表示されるので新規ユーザーの作成を行います。
ここで作成したユーザーはCognitoのユーザープールへ登録されます。

登録直後はユーザーステータスがUNCONFIRMEDになり、デモということもありEメールは固定で適当なメールアドレス(email@me.com)で登録されているようです。

ですので、ユーザーの有効化はCongnitoコンソール画面から手動で有効してやりましょう。

いくつかサンプルユーザーを作成したら、サインインしてチャネルを作成します。
メッセージデータはチャネルに紐づく形で存在します。

また、作成オプションとしてプライバシーレベルと制限モードの設定が可能です。
プライベートチャネルはチャネル外ユーザーが自由に参加することが出来ません。
また、制限モードでは管理者とモデレーターのみがメンバーを招待することが出来ます。

create-channel — AWS CLI2.4.7コマンドリファレンス
create-channel-ban — AWS CLI 2.4.7 Command Reference
create-channel-membership — AWS CLI 2.4.7 Command Reference

チャネル作成後にユーザーを招待します。

これでメッセージのやり取りが出来る状態になりました。
メッセージ送信は内部でsend-channel-messageサブコマンドを使っています。

実装部分

前述のとおりChime SDKにはいくつか種類がありますが、今回はメッセージング機能は主に、client-chime-sdk-messagingを使っています。

デモアプリ上のChimeAPI呼び出し部分は以下のラッパー経由でコールしています。
例えば、冒頭で触れたプッシュ通知機能を利用したい場合は、registerAppInstanceUserEndpointのラッパーを用意してデバイスのプロビジョニング処理を実装することと、メッセージ送信時のパラメータを追加する必要があります。
後者はともかく前者はReactのアプリケーションライフサイクルを把握していないと難しいですね。

さいごに

本日はChime SDKを使ったデモアプリを触ってみました。

Chime SDKのドキュメントは全般的にSDKのドキュメントという形なので実装についてはポイントだけ書いてあって全てがカバーされているわけではありません。

というわけでデモアプリをベースに実装イメージをつかむと、実際のアプリケーションに適用する際のイメージもだいぶつかみやすいです。
ただ、現在こちらをベースにプッシュ通知機能などを試していますが、私のReact習熟度が低く苦戦しています。