Slide 1

Slide 1 text

Deno Deploy とWebSocketを使っ たオンライン四目並べゲーム リアルタイムオンラインゲームの開発 AKB428

Slide 2

Slide 2 text

自己紹介 AKB48 秋葉原で働くプロブラマー アニメxIT的な分野に興味あり 最近はChatGPT DALL-E3にはまっています https://note.com/akb428 https://qiita.com/AKB428

Slide 3

Slide 3 text

ChatGPT DALL-E3で美少女四目並べ制作 (過去note記事) https://shizuku-to-yonmoku.vercel.app/

Slide 4

Slide 4 text

今回作ったオンライン四目並べゲーム

Slide 5

Slide 5 text

概要 ● プロジェクトの目的: このプロジェクトは、 DenoとWebSocketを用いたリアルタイム Webアプリケー ションの開発過程とその技術的な側面を理解することを目的としています。 ● アプリケーションの概要 : 開発されたアプリケーションは、オンラインでプレイできる四目並べゲーム です。プレイヤーはリアルタイムで駒を配置し、ゲームの進行を他のプレイヤーと共有します。 ● 技術スタック: 主な技術として、フロントエンドには JavaScriptとHTML5 Canvasを、バックエンドには DenoとWebSocketプロトコルを使用しています。また、データ管理とリアルタイム通信には Supabaseを活用しています。 ● ポイント: リアルタイムWebアプリケーションの開発には、ユーザー間のインタラクションの即時性と データの同期が重要です。このプレゼンテーションでは、これらの要素を如何にして実現しているか に焦点を当てます。

Slide 6

Slide 6 text

使用したライブラリ Deno ● dotenv ● Oak (Webミドルウェアフレームワーク) ● supabase-js ● dejs (テンプレートエンジン) JavaScript  未使用

Slide 7

Slide 7 text

WebSocket通信の詳細 クライアント側の処理 ● ウェブソケットの接続は、 JavaScriptを使用して WebSocket オブジェクトを作成することで開始されます。 ● 接続が開始されると、クライアントはサーバーにメッセージを送信できます。 ● クライアントはサーバーからのメッセージをリアルタイムで受信し、適切に処理します。 サーバー側の処理 ● サーバーは、 DenoのWebSocket APIを利用してクライアントからの接続を受け入れます。 ● クライアントからのデータを受信した際には、適切な応答や処理を行い、必要に応じてクライアントにデータを送信します。 ● ゲームの状態更新やプレイヤー間のアクションをリアルタイムで処理し、反映させます。 通信の流れ ● クライアントが行動(例 : 石を置く、キャラクターを選択する)を行う。 ● 行動データは WebSocketを介してサーバーに送信されます。 ● サーバーはこのデータを処理し、ゲームの状態を更新。 ● 更新されたゲーム状態は、同じ部屋にいる他のクライアントにブロードキャストされます。

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

websocket クライアント側

Slide 10

Slide 10 text

websocketサーバー側(deno oakを使用)

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

サーバーの構成 ● Deno Deployを活用: 本プロジェクトでは、Deno Deployをバックエンドとして採用しています。Deno Deployは、 WebSocketを用いたリアルタイム通信に対応しており、本プロジェクトの四目並べゲームにおける即時性とインタラク ティブな体験を実現しています。 ● サーバーの役割: ● WebSocket通信のハンドリング: クライアントからのWebSocket接続を受け入れ、双方向のリアルタイム通信 を管理します。 ● ゲーム状態の管理: ゲームの進行状況、プレイヤーの行動、ゲームボードの状態などを管理し、適切なタイミ ングでクライアントに情報を配信します。 ● Supabaseとの連携: ゲームの状態はSupabaseに保存され、サーバーはデータベースの変更をリアルタイム で監視し、必要に応じてクライアントへの情報を更新します。 ● Supabaseの役割: ● データの永続化: プレイヤーの設定、ゲームの進行状態などのデータを安全に保存し、アプリケーションの再 起動や複数セッションにわたって情報を保持します。 ● リアルタイムデータベース: ゲームの状態が変更されるたびに、その情報をリアルタイムでサーバーに通知 し、ユーザー体験の向上に貢献します。

Slide 13

Slide 13 text

Deno Deploy Deno Deployは、Deno(TypeScript)で書かれたWEBアプリケーションをデプロイす るためのサービスです。このサービスは、無料で1日最大10万リクエストまで利用可 能で、HTTPSとカスタムドメインにも対応しています。 Deno Deployにはドメイン名の変更機能やカスタムドメインへの変更機能があり、 SSL証明書の自動設定も無料で提供されています 。便利機能としては、リアルタイ ムログの閲覧、サーバーレスタイプでの動作、リリースリビジョンの保持などがあり ます https://qiita.com/AKB428/items/ebebed20dbebd2b9ab78

Slide 14

Slide 14 text

ゲームの実装 ● フロントエンド(クライアントサイド) : ● JavaScriptとHTML5 Canvasの使用: ゲームのインターフェースは HTML5のCanvas要素を使用して描画され、 JavaScriptでゲームロジックが実装されています。 ● ユーザーインタラクション: プレイヤーはマウスクリックでゲームボード上に石を置きます。石は下から積み上げ る形で配置され、四目並べのルールに従います。 ● バックエンド(サーバーサイド) : ● Deno DeployとWebSocket: サーバーサイドはDeno Deployを利用し、WebSocketを通じてクライアント間のリ アルタイム通信を実現しています。 ● ゲーム状態の同期と管理: サーバーはゲームの状態を管理し、プレイヤー間での状態同期を担います。 ● ゲームロジック: ● ゲーム終了の判定: 任意のプレイヤーが横、縦、斜めに 4つの石を並べた場合、ゲームは終了し、勝利プレイ ヤーが決定されます。 ● 勝利セルのハイライト: 勝利条件を満たしたセルは特別な色でハイライトされ、勝利の視覚的な確認を提供しま す。 ● データの永続化: ● Supabaseの活用: ゲームの進行状態やプレイヤーの設定などは Supabaseに保存され、セッション間でのデー タの永続化が可能になっています。

Slide 15

Slide 15 text

ファイル構成 index.ejsがdejsの拡張子 characters.jsが設定ファイル コア実装は server.ts(deno) game.js deno.lockはコードの参照ライブラリを見て 自動的に生成される

Slide 16

Slide 16 text

deno.jsonc の中身 deno task devで起動できる server.tsを修正したら自動再起動してくれる

Slide 17

Slide 17 text

ルームの概念 3者のブラウザは同一ルーム[akb73]にいる

Slide 18

Slide 18 text

四目オンラインには複数のルーム(=ゲームボード)が存在する

Slide 19

Slide 19 text

同一の部屋のクライアントが Deno Deployのリージョンをまたがる問題 => Supabase側で集約してポーリングする

Slide 20

Slide 20 text

Deno Deployではリージョン固定を制御できない

Slide 21

Slide 21 text

supabaseのテーブル設定でリアルタイム機能をONにする

Slide 22

Slide 22 text

supabaseのリアルタイム監視機能を使う(deno実装)

Slide 23

Slide 23 text

Deno deployでのENV処理

Slide 24

Slide 24 text

Deno deployでの設定

Slide 25

Slide 25 text

同一ルームの情報しかブロードキャストしないようにする制御が必要

Slide 26

Slide 26 text

websocket受信時にsocketをハッシュマップで持つ

Slide 27

Slide 27 text

特定のルームへブロードキャスト(Deno)

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

websocket通知されるアクション ● キャラクター選択 (キャラクターの選択は対戦ゲーム雰囲気の演出のみ) ● ゲームの開始 (2名揃ったらサーバーからPush) ● ケーム中 駒をおく(自分の駒を送信、相手の駒を受信) ● ゲーム終了

Slide 30

Slide 30 text

Deno Deployのダッシュボードでconsole.logが出る ある意味便利だがローカルでバッグ用に console.logしま くってるとこうなってしまう

Slide 31

Slide 31 text

その他 ● ローカル開発ではMacのセキュリティの制限なのかport80で起動しないとwebsocketがう まく通信できなかった(開発環境のデフォは8080など) ● ChatGPT4を使いながらコーディングしたがDenoの環境周り、supabaseのリアルタイム 周りの情報は古すぎて役に立たなかった。 ● このパワポはコーディング指南してもらっていたChatGPTに最後に「今まで書いてきたソ フトの内容をプレゼンにしたいんで目次と中身つくって」といって作ってもらいました(半分 ぐらいはそのまま適用、図はMermaid図)

Slide 32

Slide 32 text

レッツプレイ サンドボックスとしてakb21-50を開放 スマートフォン表示でやってください デフォルトキャラクター以外を選択しないとバグります 先手と後手がブッキングしないように 2名でやるときは P1かP2をきめておいてください なんかうまく通信できなかったらリロードでなんとかなります 1名で2役やるときはブラウザはわけてください( cookie制御があるため) https://yonmoku.deno.dev/room/akb21 https://yonmoku.deno.dev/room/akb50

Slide 33

Slide 33 text

おわり 質疑応答