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

Amplify AWSサーバーレス特集

2021.04.23

この記事は公開されてから１年以上経過しています。情報が古い可能性がありますので、ご注意ください。

こんにちは！

今回は 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 を設定していきます。

こちらは事前定義されたルートになります
今回の記事ではカスタムで sendmessage を追加しています

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

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

$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 と比べると、とてもシンプルに設定することができます。

チャット機能の確認

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

まとめ

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

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

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

AWS サーバーレスの開発でお悩みなら
ラーゲイトまでご相談ください

開発前の懸念やサーバーレスの不明点、小さな悩みまでお気軽にご相談ください

お問合せはこちら

目次

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

想定する読者

はじめに