Deno Deploy とWebSocketを使ったオンライン四目並べゲーム

Deno Deploy とWebSocketを使ったオンライン四目並べゲーム
「しずくと四目並べしよ！オンライン」開発資料

2023/12/19
Serverless Frontend Meetup #4 「FaaS」 #serverlessF
発表資料
https://serverless-frontend.connpass.com/event/304564/

ゲームURLサンプル
https://yonmoku.deno.dev/room/akb70

Transcript

1. Deno Deploy とWebSocketを使っ たオンライン四目並べゲーム リアルタイムオンラインゲームの開発 AKB428
2. 自己紹介 AKB48 秋葉原で働くプロブラマー アニメｘIT的な分野に興味あり 最近はChatGPT DALL-E3にはまっています https://note.com/akb428 https://qiita.com/AKB428
3. ChatGPT DALL-E3で美少女四目並べ制作 (過去note記事) https://shizuku-to-yonmoku.vercel.app/
4. 今回作ったオンライン四目並べゲーム
5. 概要 • プロジェクトの目的: このプロジェクトは、 DenoとWebSocketを用いたリアルタイム Webアプリケー ションの開発過程とその技術的な側面を理解することを目的としています。 • アプリケーションの概要 : 開発されたアプリケーションは、オンラインでプレイできる四目並べゲーム です。プレイヤーはリアルタイムで駒を配置し、ゲームの進行を他のプレイヤーと共有します。 • 技術スタック: 主な技術として、フロントエンドには JavaScriptとHTML5 Canvasを、バックエンドには DenoとWebSocketプロトコルを使用しています。また、データ管理とリアルタイム通信には Supabaseを活用しています。 • ポイント: リアルタイムWebアプリケーションの開発には、ユーザー間のインタラクションの即時性と データの同期が重要です。このプレゼンテーションでは、これらの要素を如何にして実現しているか に焦点を当てます。
6. 使用したライブラリ Deno • dotenv • Oak (Webミドルウェアフレームワーク） • supabase-js • dejs (テンプレートエンジン) JavaScript 　未使用
7. WebSocket通信の詳細 クライアント側の処理 • ウェブソケットの接続は、 JavaScriptを使用して WebSocket オブジェクトを作成することで開始されます。 • 接続が開始されると、クライアントはサーバーにメッセージを送信できます。 • クライアントはサーバーからのメッセージをリアルタイムで受信し、適切に処理します。 サーバー側の処理 • サーバーは、 DenoのWebSocket APIを利用してクライアントからの接続を受け入れます。 • クライアントからのデータを受信した際には、適切な応答や処理を行い、必要に応じてクライアントにデータを送信します。 • ゲームの状態更新やプレイヤー間のアクションをリアルタイムで処理し、反映させます。 通信の流れ • クライアントが行動（例 : 石を置く、キャラクターを選択する）を行う。 • 行動データは WebSocketを介してサーバーに送信されます。 • サーバーはこのデータを処理し、ゲームの状態を更新。 • 更新されたゲーム状態は、同じ部屋にいる他のクライアントにブロードキャストされます。
8. Deno&Deno Deployは標準でWebSocketに対応している https://deno.com/blog/deploy-streams https://developer.mozilla.org/ja/docs/Web/API/ WebSockets_API/Writing_a_WebSocket_serve r_in_JavaScript_Deno
9. websocket クライアント側
10. websocketサーバー側(deno oakを使用)
12. サーバーの構成 • Deno Deployを活用: 本プロジェクトでは、Deno Deployをバックエンドとして採用しています。Deno Deployは、 WebSocketを用いたリアルタイム通信に対応しており、本プロジェクトの四目並べゲームにおける即時性とインタラク ティブな体験を実現しています。 • サーバーの役割: • WebSocket通信のハンドリング: クライアントからのWebSocket接続を受け入れ、双方向のリアルタイム通信 を管理します。 • ゲーム状態の管理: ゲームの進行状況、プレイヤーの行動、ゲームボードの状態などを管理し、適切なタイミ ングでクライアントに情報を配信します。 • Supabaseとの連携: ゲームの状態はSupabaseに保存され、サーバーはデータベースの変更をリアルタイム で監視し、必要に応じてクライアントへの情報を更新します。 • Supabaseの役割: • データの永続化: プレイヤーの設定、ゲームの進行状態などのデータを安全に保存し、アプリケーションの再 起動や複数セッションにわたって情報を保持します。 • リアルタイムデータベース: ゲームの状態が変更されるたびに、その情報をリアルタイムでサーバーに通知 し、ユーザー体験の向上に貢献します。
13. Deno Deploy Deno Deployは、Deno(TypeScript)で書かれたWEBアプリケーションをデプロイす るためのサービスです。このサービスは、無料で1日最大10万リクエストまで利用可 能で、HTTPSとカスタムドメインにも対応しています。 Deno Deployにはドメイン名の変更機能やカスタムドメインへの変更機能があり、 SSL証明書の自動設定も無料で提供されています 。便利機能としては、リアルタイ ムログの閲覧、サーバーレスタイプでの動作、リリースリビジョンの保持などがあり ます https://qiita.com/AKB428/items/ebebed20dbebd2b9ab78
14. ゲームの実装 • フロントエンド（クライアントサイド） : • JavaScriptとHTML5 Canvasの使用: ゲームのインターフェースは HTML5のCanvas要素を使用して描画され、 JavaScriptでゲームロジックが実装されています。 • ユーザーインタラクション: プレイヤーはマウスクリックでゲームボード上に石を置きます。石は下から積み上げ る形で配置され、四目並べのルールに従います。 • バックエンド（サーバーサイド） : • Deno DeployとWebSocket: サーバーサイドはDeno Deployを利用し、WebSocketを通じてクライアント間のリ アルタイム通信を実現しています。 • ゲーム状態の同期と管理: サーバーはゲームの状態を管理し、プレイヤー間での状態同期を担います。 • ゲームロジック: • ゲーム終了の判定: 任意のプレイヤーが横、縦、斜めに 4つの石を並べた場合、ゲームは終了し、勝利プレイ ヤーが決定されます。 • 勝利セルのハイライト: 勝利条件を満たしたセルは特別な色でハイライトされ、勝利の視覚的な確認を提供しま す。 • データの永続化: • Supabaseの活用: ゲームの進行状態やプレイヤーの設定などは Supabaseに保存され、セッション間でのデー タの永続化が可能になっています。
15. ファイル構成 index.ejsがdejsの拡張子 characters.jsが設定ファイル コア実装は server.ts(deno) game.js deno.lockはコードの参照ライブラリを見て 自動的に生成される
16. deno.jsonc の中身 deno task devで起動できる server.tsを修正したら自動再起動してくれる
17. ルームの概念　３者のブラウザは同一ルーム[akb73]にいる
18. 四目オンラインには複数のルーム(=ゲームボード)が存在する
19. 同一の部屋のクライアントが Deno Deployのリージョンをまたがる問題 => Supabase側で集約してポーリングする
20. Deno Deployではリージョン固定を制御できない
21. supabaseのテーブル設定でリアルタイム機能をONにする
22. supabaseのリアルタイム監視機能を使う(deno実装)
23. Deno deployでのENV処理
24. Deno deployでの設定
25. 同一ルームの情報しかブロードキャストしないようにする制御が必要
26. websocket受信時にsocketをハッシュマップで持つ
27. 特定のルームへブロードキャスト(Deno)
29. websocket通知されるアクション • キャラクター選択　（キャラクターの選択は対戦ゲーム雰囲気の演出のみ） • ゲームの開始 (2名揃ったらサーバーからPush） • ケーム中　駒をおく（自分の駒を送信、相手の駒を受信） • ゲーム終了
30. Deno Deployのダッシュボードでconsole.logが出る ある意味便利だがローカルでバッグ用に console.logしま くってるとこうなってしまう
31. その他 • ローカル開発ではMacのセキュリティの制限なのかport80で起動しないとwebsocketがう まく通信できなかった（開発環境のデフォは8080など） • ChatGPT4を使いながらコーディングしたがDenoの環境周り、supabaseのリアルタイム 周りの情報は古すぎて役に立たなかった。 • このパワポはコーディング指南してもらっていたChatGPTに最後に「今まで書いてきたソ フトの内容をプレゼンにしたいんで目次と中身つくって」といって作ってもらいました（半分 ぐらいはそのまま適用、図はMermaid図）
32. レッツプレイ　サンドボックスとしてakb21-50を開放 スマートフォン表示でやってください デフォルトキャラクター以外を選択しないとバグります 先手と後手がブッキングしないように 2名でやるときは P1かP2をきめておいてください なんかうまく通信できなかったらリロードでなんとかなります 1名で2役やるときはブラウザはわけてください（ cookie制御があるため） https://yonmoku.deno.dev/room/akb21 https://yonmoku.deno.dev/room/akb50
33. おわり　質疑応答