🐶

世界一くだらないオンライン対戦ゲームを作った話

2023/12/19に公開

Laravel

pusher

websocke

tech

クソアプリアドベントカレンダー19日目

こんにちは、普段はエンジニアっぽいことは多分全部やってるITかあさんという者です。
@ミラクルというペットを幸せにするプロダクトの開発をメインにやってます。

今回はそこで培った技術を使って　技術の無駄遣いをしてきました！！

最高にくだらないオンライン対戦ゲーム作ったよ！

ボタンを連打する、ただそれだけ！その名も　アタタタター！！

このゲームは先日開催されたクソアプリハッカソンで３時間で開発し
対戦相手の進捗がわかるようリアルタイムのプログレスバーも追加しました
これで臨場感バッチリだねｗｗ

最高にくだらないけどオンライン対戦の基本が詰まってるよ

何ができるの？

クリックでwebsocketから繋いで相手のクリック数、自分のクリック数がリアルタイムで通信できます。

→オンライン対戦の基本だよね！

オンライン対戦の様子。

websocketをつかって、サーバーサイドから同じ「チャンネル」を見ているエンドに対して互いのクリック数を送信し、規定の数に達した方が勝ち。🐶のクリック数は同じページを開いている相手にも通信されて勝手にプログレスバーが更新されます。
クリックする、ただそれだけ！

最高に　くだらないね！！！

SNSのリアルタイムなブラウザチャットをイメージしてください。あれと基本的な仕組みは一緒

Websocket、、でも難しいんでしょう？

ところがどっこい、超簡単に実現できます。pusherを使えばね！

すごいよ pusher!!

私の作ったものはとてもしょうもないですが、使ったpusherはすごいです。一昔前にリアルタイムなチャットを作った時、自前でsocket通信するためのサーバーを組んだことがあるのですがやっぱりハードル上がります。

LaravelがデフォルトでPusherのブロードキャストドライバーを用意してくれており、Pusherのアカウントを発行したらコードはほんの少量でLaravel側のイベントをブロードキャスト可能です。

でもお高いんでしょう？？

一定の通信数以内であればなんと無料で利用可能！
https://pusher.com/channels/pricing/

しかも　dev stg prodの３環境分のApp keysを発行可能。しゅごい。身内で遊ぶ程度なら十分すぎる。みんなも使ってみてほしい。。

コードを少しだけ解説

envを設定したらdispatchを渡します。


    public function click(Request $request)
    {
        $playerName = $request->input('player');
        $clickCount = 1; // クリック数は常に1ですが、必要に応じて変更可能

        // プレイヤー名とクリック数を含むメッセージをイベントに渡す
        MessageStreamed::dispatch(json_encode(['player' => $playerName, 'clicks' => $clickCount]));
    }

streamとして、対戦相手が同じ「チャンネル」を見るようにします。

class MessageStreamed implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public mixed $message;

    public function __construct($message)
    {
        $this->message = $message;
    }

    public function broadcastOn(): Channel
    {
        Log::info('stream');
        return new Channel('stream');

    }
}

今回は特にチャンネルを複数用意しませんでしたが、トークルームのような仕組みの場合はbroadcastのChannel名をユニークな値にすれば　チャットルームを実現できます。
つまり、同じホスト内で同じチャンネルを見ている人だけが互いに通信し合う仕組みです

javascriptについてはES６だろうが、Vueだろうがなんでも問題ありません。pusherから取得したキーを設定すれば準備は完了です
ブロードキャストをpusherに設定してあげるだけです

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: import.meta.env.VITE_PUSHER_APP_KEY,
    cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER ?? 'mt1',
    wsHost: import.meta.env.VITE_PUSHER_HOST ? import.meta.env.VITE_PUSHER_HOST : `ws-${import.meta.env.VITE_PUSHER_APP_CLUSTER}.pusher.com`,
    forceTLS: import.meta.env.VITE_PUSHER_APP_FORCE_TLS ?? false, // SSLを使用していないためfalseに設定
    enabledTransports: ['ws', 'wss'], // WebSocketのみを使用する
    disabledTransports: ['sockjs'], // SockJSは無効にする
    logToConsole: import.meta.env.VITE_PUSHER_LOG_CONSOLE ?? true // コンソールにログを出力
});

正しくpusherに繋がるとpusherが受信してくれます

簡単だね

まとめ

なんかリアルタイムな通信をお手軽にやってみたいならpuhserがおすすめだよ。
今回の内容は全部リポジトリ公開しているからよかったらみてね。動作の保証はいたしかねるよ

クソアプリアドベントカレンダーはおもしろくて　お勉強にもなるよ

明日はumiremixさんだよ。何を書いてくれるかな。