AWS 状態遷移とリアルタイム通信でオンラインゲームを構築

2025-08-09 [東北][岩手][JAWS-UGいわて]LT会＋生成系AIハンズオン#2 AWS 状態遷移とリアルタイム通信でオンラインゲームを構築 山崎 拓也

山崎 拓也 所属: SIer 仕事: • システム開発など • アプリとAWSインフラ両方 好き: 低レイヤ、SF、AWS AWSアワード: • 2024～2025 Japan AWS Top Engineer • 2022～2025 Japan All AWS Certifications Engineer

今回紹介する仕組みはオンラインゲーム以外にも以下を必要とする システムに適用できる • クライアント全体の状態遷移の同期および管理 • クライアント間のリアルタイム通信

状態遷移と言えば AWS Step Functions • ワークフローを組み立てて ETLやオーケストレーション ができる • AWSサービスを呼び出したり、 条件分岐や並列処理ができる • 工夫次第でいろいろな使い方が できる

ワークフローを中断し、タスクの完了を待つことができる＊ • タスクトークンを発行し、ワークフローを中断、コールバックAPIで再開 • 状態遷移ごとの課金なので、中断している間は無料 ❶ ❺ ❸ ❷ ❹ コールバックAPI呼び出し • SendTaskSuccess（成功） • SendTaskFailure（失敗） • SendTaskHeartbeat（途中） ＊Standardワークフローでのみ利用可能 https://docs.aws.amazon.com/step-functions/latest/dg/connect-to-resource.html

• https://docs.aws.amazon.com/step-functions/latest/dg/connect-to-resource.html

これにより、外部リソースの状態管理が行える • 次の状態への移行指示を出すことにより外部リソースの状態を管理する ❷ はい ❶ 状態1になるのを待つ ❸ 状態1になりました

これにより、外部リソースの状態管理が行える • 次の状態への移行指示を出すことにより外部リソースの状態を管理する ❷ はい ❶ 状態2になるのを待つ ❸ 状態2になりました

これにより、外部リソースの状態管理が行える • 次の状態への移行指示を出すことにより外部リソースの状態を管理する ❷ はい ❶ 状態3になるのを待つ ❸ 状態3になりました

さらにMapやParallelを使うことで複数リソースの状態を同期できる クライアントの数だけ指示および タスクトークン発行

さらにMapやParallelを使うことで複数リソースの状態を同期できる 状態1になりました 全員が状態1になるのを待つ

さらにMapやParallelを使うことで複数リソースの状態を同期できる 状態1になりました 全員が状態1になるのを待つ

さらにMapやParallelを使うことで複数リソースの状態を同期できる 状態1になりました 全員が状態1になるのを待つ

さらにMapやParallelを使うことで複数リソースの状態を同期できる 全体が状態1になったら、作業開始の合図を出す

全体の状態を待つことはいろいろな状況に使える • 全体の作業完了を待つ • 全体の準備完了を待つ • 全体の合意を待つ • 例えば、全プレイヤーの準備が整ったらゲームを開始する

実現までには2つの考慮点がある ❶ クライアントは状態の移行指示を常に受信できる必要がある ❷ Step Functionsはクライアント全員に指示を送信する必要がある

❶ クライアントは状態の移行指示を常に受信できる必要がある • Step Functionsからいつ指示が来るか分からない・・・ もう準備できてるけど、 次の指示いつ来るかな・・・ ずっと受信してなきゃ・・・

❷ Step Functionsはクライアント全員に指示を送信する必要がある • 状況によっては同時に指示を出すことが重要になるかも・・・ 一緒に開始する必要があるのに、 自分だけまだ指示が来ない

AWS AppSync EventsならWebSocketでリアルタイム通信ができる • WebSocketの双方向通信によりクライアントは常に指示を受信できる • HTTPSでもパブリッシュできるのでStep Functionsから直接指示を送信 できる ❸ クライアントは常に 受信できる ❷ リアルタイム ブロードキャスト ❶ HTTPリクエスト直接出せる AWS AppSync Events

名前空間により各クライアントにタスクトークンの配布もできる AWS AppSync Events ❶ ❷ 名前空間 X X/A チャネル Lambda function X/B チャネル X/C チャネル ❹ ❺ X/ALL チャネル 全体チャネル クライアント ごとのチャネル ❸

双方向通信なので、クライアント間もリアルタイム通信ができる • 全体の同期ではなく、個々の状態の共有に便利 • 例えば、キャラクターの座標など AWS AppSync Events 名前空間 X X/ALL チャネル

コールバックAPIの呼び出しには AppSync GraphQL を使う • LambdaリゾルバーでApp SyncからLambda関数を通してAPIを呼び出す ❸ ❷ ❶ Lambda function AWS AppSync GraphQL AWS AppSync Events

この仕組みで実現できること • クライアント全体の状態遷移の同期および管理 • クライアント間のリアルタイム通信

今回はオンラインゲームを作ってみました

アーキテクチャ

Step Functions ワークフロー

状態遷移の同期部分

ゲームサイトへアクセス ❶ユーザー登録 or サインイン ❷ロビー一覧画面 AppSync GraphQL Subscriptionで 作成されたロビーを同期

❷オーナーによりワークフローが実行される ロビーへ入る ❶ロビー画面 ❸ロビーIDを 変数にセット ❹ロビーにいる ユーザーID取得 AppSync GraphQL Subscriptionで ロビーにいるプレイヤーを同期

❷オーナー画面 すぐにコールバック ❶各プレイヤーへ タスクトークン送信 ❸全プレイヤーが同意したら ゲーム説明画面へ遷移させる ❷他プレイヤー画面 「Yes」で成功コールバック

❶正解図形と相対位置の作成 ❹今回完成させる図形と 自分の図形が表示される ❷クライアントの 画面遷移用に1秒待つ ❸タスクトークンと 図形情報などの送信 ❻コールバック ❼全プレイヤーの準備完了後、 ゲーム画面へ遷移させる ❺ルールや自分の図形、 操作できることが確認出来たら 「準備完了」を押す

❶タスクトークンを送信 ゲーム終了まで待つ ❷他のプレイヤーの動きがリアルタイム にスムーズに反映される 協力して図形を完成させる

❷コールバックし、 ワークフローが終了する ❶図形が完成したらゲームクリア

解説付きのプレイ動画を公開しています。 「AWS Step FunctionsとAppSync Eventsで構築したオンラインゲーム 解説付 きプレイ動画」 https://www.docswell.com/s/kkmtyyz/vPNWVM5-2025-08-10-5892

• https://www.docswell.com/s/kkmtyyz/vPNWVM5-2025-08-10-5892

まとめ • Step FunctionsとAppSync Events / GraphQLにより クライアント全体の状態遷移の同期および管理ができる • AppSync Eventsによりクライアント間のリアルタイム通信ができる • AWSなら工夫次第でサーバーレスなリアルタイムオンラインゲームも作れる

ご清聴ありがとうございました。 休憩時間にゲームしてみませんか？ https://