AWSでチャット機能構築方法を詳細解説！サーバーレスでリアルタイム通信を実現する🤔

こんにちは！

今回は AWS のサーバーレスサービスを利用してリアルタイム通信を実現する方法について解説していきたいと思います！ぜひ最後までお読みください！

想定する読者

• サーバーレスアーキテクチャに興味があるヒト
• AppSync に興味があるヒト
• これからリアルタイム通信を実装したいヒト

はじめに

この記事では API Gateway と AppSync を利用したチャット機能を構築し、2つのアプローチを比べながら、お読みいただければと思います。

早速ですが、リアルタイム通信を実現するためには APIGateway の WebSocket、AppSync のサブスクリプションを利用する必要があります。今回はそれらを構築することでチャット機能を実現していきます。

ぜひ参考にしてください。

API Gateway の場合

双方向通信をサポートしている WebSocket API が API Gateway を利用できるようになりました。これにより、リアルタイムな通信が求められるチャットアプリケーションを作成することができるようになっております。

DynamoDBの作成

まず DynamoDB を作成いたします。ログインユーザー用、チャット用のテーブルを作成してください。

API Gateway で紐づける Lambda 関数が、この DynamoDB にデータを保存していきます。

Lambda の作成

次に、チャット機能で利用する Lambda を作成しておきます。実装する内容は、チャットアプリの接続や切断、メッセージの送信などです。

後述するルートキーの数だけ作成します。なお付与する IAM ロールには、DynamoDB に対するアクセス許可を与えてください。

API Gateway の作成

それでは API Gateway を作成していきましょう。GUI 画面にて作成ボタンを押すと、以下のように選択できるので、WebSocket API を選択します。

実際に作成ウィザードを進めていくと、以下のような画面になりますので、各ルートに対して事前に作成した Lambda を設定していきます。

あとは作成ウィザードを進めて作成していくだけで完了です。

補足として事前定義されたルートについて説明いたしますので、こちらご確認ください。

• $connect : クライアントと WebSocket API 間の永続的な接続が開始されたときに呼び出されるルート
• $disconnect : クライアントまたはサーバーが API から切断したときに呼び出されるルート
• $default : ルート選択式をメッセージに対して評価できない場合や、一致するルートが見つからない場合に呼び出されるルート

チャット機能の確認

ここまでの作業が完了したら API Gateway の GUI 画面にて API をデプロイいたします。デプロイ後は WebSocket URL をコピーしておいてください。

デプロイ完了後、wscat を利用してチャット機能を確認します。まだインストールされていない場合は、下記のコマンドを実行してください。

npm install -g wscat

wscat をインストールしたら以下のようにチャット機能が確認できます。

AppSync の場合

AppSync でチャット機能を利用する際は、GraphQL のサブスクリプションを利用します。本記事では、手軽にチャットアプリを構築するために、AWS が公開している Amplify を利用したサンプルを用います。（サンプルはこちら、AWSのブログ記事はこちら）

サンプルのアプリケーションは、Amplify のコマンドで Cognito などのリソースを作成したあとに、AppSync を作成する流れとなります。なお AppSync は以下のような選択で作成します。

では実際に作成された AppSync のスキーマを確認して、どのようにチャット機能を実装しているのかを確認しましょう。

GraphQL のスキーマ

作成されたスキーマにて、Subscription 型を確認してみましょう。

type Subscription {
	#  Subscribes to all new messages in a given Conversation.
	subscribeToNewMessage(conversationId: ID!): Message
		@aws_subscribe(mutations: ["createMessage"])
	subscribeToNewUCs(userId: ID!): UserConversations
		@aws_subscribe(mutations: ["createUserConversations"])
	subscribeToNewUsers: User
		@aws_subscribe(mutations: ["createUser"])
}

GraphQL のサブスクリプションは、リアルタイムな通信を行いたい操作を上記のように指定します。AppSync ではご覧の通り、@aws_subscribe のところで Mutation 型の操作を指定します。

これにより createMessage などの操作がリアルタイムな通信で行われることになります。GraphQL のスキーマに記述するだけなので WebSocket API と比べると、とてもシンプルに設定することができます。

チャット機能の確認

サンプルアプリを立ち上げて、２人以上のユーザーを作成するとチャットができます。以下、画像の通りです。

関連記事

• これから始めるAppSync開発！AppSyncとGraphQL開発手法をCTOが解説します😎
• AppSyncを理解するためにCloudFormationでの構成を深掘りしてみた🚀
• Amplifyで自動構築される内容の観察：Schema.graphql編
• ChatQL: An AWS AppSync Chat Starter App written in Angular
• Building a serverless real-time chat application with AWS AppSync

まとめ

どちらも AWS 上でチャット機能を実装するのは容易です。ただ構築のプロセスは、AppSync のほうが少ないのでメリットが大きいのかもしれません。ぜひ皆様も試してみてください！

このブログでは、GraphQL や GraphQL のマネージドサービスである AWS AppSync の記事をどんどん公開しておりますので、ご興味のある方はほかの記事もご覧いただければと思います。

AppSync に関する開発は、お気軽にお問い合わせください。