チュートリアル: WebSocket API、Lambda、DynamoDB を使用して WebSocket チャットアプリを作成する

AWS CloudFormation スタックを作成するには

1. https://console.aws.amazon.com/cloudformation で AWS CloudFormation コンソール を開きます。

2. [スタックの作成] を選択し、[With new resources (standard) 新しいリソースを使用 (標準)] を選択します。

3. [Specify template (テンプレートの指定)] で、[Upload a template file (テンプレートファイルのアップロード)] を選択します。

4. ダウンロードしたテンプレートを選択します。

5. [Next (次へ)] を選択します。

6. [Stack name] (スタックの名前) で、websocket-api-chat-app-tutorial と入力し、[Next] (次へ) を選択します。

7. [Configure stack options] (スタックオプションの設定) で、[Next] (次へ) を選択します。

8. [Capabilities] (機能) で、AWS CloudFormation がアカウントに IAM リソースを作成できることを承認します。

9. [送信] を選択します。

WebSocket API を作成するには

1. https://console.aws.amazon.com/apigateway で API Gateway コンソールにサインインします。

2. [API の作成] を選択します。次に、[WebSocket API] で [Build] (ビルド) を選択します

3. [API 名] に「websocket-chat-app-tutorial」と入力します。

4. [Route selection expression] (ルート選択式) に「request.body.action」と入力します。ルート選択式は、クライアントがメッセージを送信したときに API Gateway が呼び出すルートを決定します。

5. [Next] を選択します。

6. [Predefined routes] (定義済みのルート) で、[Add $connect] ($connect の追加)、[Add $disconnect] ($disconnect の追加)、および [Add $default] ($default の追加) を選択します。[$connect] および [$disconnect] ルートは、クライアントが API に接続または切断したときに API Gateway が自動的に呼び出す特別なルートです。API Gateway は、他のルートがリクエストに一致するルートがない場合に、$default ルートを呼び出します。

7. [Custom routes] (カスタムルート) で、[Add custom route] (カスタムルートの追加) を選択します。[Route key] (ルートキー) に「sendmessage」と入力します。このカスタムルートは、接続されたクライアントに送信されるメッセージを処理します。

8. [Next] を選択します。

9. [Attach integrations] (統合のアタッチ) で、各ルートと [Integration type] (統合タイプ) ごとに、Lambda を選択します。

   [Lambda] には、ステップ 1 で AWS CloudFormation を使用して作成した、対応する Lambda 関数を選択します。各関数の名前はルートと一致します。例えば、[$connect] ルートの場合は、websocket-chat-app-tutorial-ConnectHandler という名前の関数を選択します。

10. API Gateway が作成するステージを確認します。デフォルトでは、API Gateway はステージ名 production を作成し、API をそのステージに自動的にデプロイします。[Next] を選択します。

11. [Create and deploy] (作成してデプロイ) を選択します。

API の呼び出し URL を取得するには

1. https://console.aws.amazon.com/apigateway で API Gateway コンソールにサインインします。

2. API を選択します。

3. [Stages] (ステージ) を選択し、[production] (本稼働) を選択します。

4. API の [WebSocket URL] を書き留めます。URL は wss://abcdef123.execute-api.us-east-2.amazonaws.com/production のようになります。

API に接続するには

1. API に接続するには、以下のコマンドを使用します。API に接続すると、API Gateway は $connect ルートを呼び出します。このルートが呼び出されると、DynamoDB に接続 ID を保存する Lambda 関数が呼び出されます。

   wscat -c wss://abcdef123.execute-api.us-west-2.amazonaws.com/production

   Connected (press CTRL+C to quit)

2. 新しいターミナルを開き、次のパラメータを指定して wscat コマンドを再度実行します。

   wscat -c wss://abcdef123.execute-api.us-west-2.amazonaws.com/production

   Connected (press CTRL+C to quit)

   これにより、メッセージを交換できる 2 つの接続されたクライアントが提供されます。

単一のメッセージを送信するには

• API Gateway は、API のルート選択式に基づいて、呼び出すルートを決定します。API のルート選択式は $request.body.action です。その結果、API Gateway は次のメッセージを送信したときに sendmessage ルートを呼び出します。

  {"action": "sendmessage", "message": "hello, everyone!"}

  呼び出されたルートに関連付けられた Lambda 関数は、DynamoDB からクライアント ID を収集します。次に、Lambda 関数は API Gateway Management API を呼び出し、それらのクライアントにメッセージを送信します。接続されているすべてのクライアントが、次のメッセージを受け取ります。

  < hello, everyone!

API の $default ルートを呼び出すには

• API Gateway は、定義されたルートと一致しないメッセージをクライアントが送信すると、API のデフォルトルートを呼び出します。$default ルートに関連付けられた Lambda 関数 は、API Gateway Management API を使用して、接続に関するクライアント情報を送信します。

  test

  Use the sendmessage route to send a message. Your info: {"ConnectedAt":"2022-01-25T18:50:04.673Z","Identity":{"SourceIp":"192.0.2.1","UserAgent":null},"LastActiveAt":"2022-01-25T18:50:07.642Z","connectionID":"Mg_ugfpqPHcCIVA="}

API から切断するには

• API から切断するには、CTRL+C を押します。クライアントが API から切断されると、API Gateway は API の $disconnect ルートを呼び出します。API の $disconnect ルートの Lambda 統合は、DynamoDB から接続 ID を削除します。

WebSocket API を削除するには

1. https://console.aws.amazon.com/apigateway で API Gateway コンソールにサインインします。

2. [API] ページで websocket-chat-app-tutorial API を選択します。[アクション]、[削除] の順に選択し、選択を確定します。

AWS CloudFormation スタックを削除するには

1. AWS CloudFormation コンソール (https://console.aws.amazon.com/cloudformation) を開きます。

2. AWS CloudFormation スタックを選択します。

3. [Delete] (削除) を選択し、選択を確定します。