AppSync Eventsで作るチャットアプリ-Amplifyを使わずに-

AppSync Eventsで作るチャットアプリ -Amplifyを使わずにKMiura(@k_miura_io)

自己紹介 • 三浦 耕生(こうき) • SaaSのバックエンドエンジニア • JAWS UG名古屋＆神戸 運営 • 好きなAWSのサービス：AWS IoT, Lambda, ECS @k_miura_io koki.miura05

ことの発端 去年のLambda10周年祭にて AppSync Eventsが最近リリースさ れたんですけど、サーバーレスで WebSocketが簡単に使えるように なりました！ アツい!!!! サーバーレスが好き なAWSのSAさん 登壇して気持ち よくなった僕

それまでのサーバーレス WebSocket • Lambda ＋ API Gatewayで実 装する場合、以下の3つの関数を 用意する必要があった • WebSocketに接続するた めの関数 • WebSocketを切断するた めの関数 • メッセージを送受信する関数 • 接続を管理するために DynamoDBが必要 • メッセージの送信も受信も WebSocket https://docs.aws.amazon.com/ja_jp/apigateway/latest/ developerguide/websocket-api-chat-app.html

• https://docs.aws.amazon.com/ja_jp/apigateway/latest/

AppSync Events をつかうとこうなる • API Gatewayのときに必要だっ た、接続・切断のLambda関数が 不要になる • 当然、接続管理用のDynamoDB が不要 • メッセージ送信にPOSTをつかうの が直感的！

リリース当初に触ってみた 確かに便利だけど チャットアプリ用に メッセージ保存でき ないじゃん！ Lambda使えばいい話 だけどもう少しシンプルな 構成に出来ないものか…

データ統合がリリース https://aws.amazon.com/jp/blogs/aws/enhance-real-timeapplications-with-aws-appsync-events-data-source-integrations/

• https://aws.amazon.com/jp/blogs/aws/enhance-real-time-

データ統合とは？ • AppSync EventsのAPIで Publishされたイベントに対してDB に保存したりLambdaや Bedrockなどのサービス連携を できる機能 • イベントに対するアクションを JavaScriptで書くことで定義がで きる

チャットアプリの バックエンドが シンプルに構築 できる！

作ってみた • ブラウザで動くシンプルなチャットアプリ • 名前を入力して入室する • UIはBedrock Engineerにデザインさせた

システム構成

DEMO(当日のみ有効) https://bit.ly/4khNoQR

• https://bit.ly/4khNoQR

Amplify SDKを使わずにメッセージ送信 • 送信先のチャンネルを指定してメッセージ を飛ばすだけ • 認証は「x-api-key」をヘッダーに入れる

Amplify SDKを使わずに メッセージを受信 • WebSocketの接続に必要な認証情報を Subprotocolに指定するためにヘッダーデータを エンコード • メッセージの受信を行うために最初に接続ID、送 信先のチャンネルを指定すると受信を開始する

まとめ • AppSync Eventsを使うことでチャットアプリのバックエンドを簡単に実装できるようになっ た • Graph QLの時に必要だったスキーマ定義を用意することなくPub Subができる • 汎用のWebSocketとHTTP通信でAmplify SDKを使わなくても実装ができる • 特にWebSocketの接続方法は一癖あって初見だと詰まりがち

今回の記事 https://bit.ly/40EhMOi

• https://bit.ly/40EhMOi

END