2013年04月15日にWEBサービス「ブラウザでワンナイト人狼」をリリースして、2025年07月15日をもって終了しました。

せっかくなのでこの機会に「ブラウザでワンナイト人狼」で使用していた「Socket.IO 通信処理部分」を作り直して公開しました（作成したのは通信部分だけです）。

2013年に作ったときは、基本的に jQuery と Ajax を使っていて、通信部分だけ Socket.IO を利用するといった時代を感じるプログラムでした。
当時は Socket.IO に room 機能が（安定版には）なかったので、ゲームを作成したユーザーのブラウザにプレイヤーの Socket ID をあつめ、全員にデータを送信することでネットワークゲームを実行していました。

今回試しで作り直した通信部分ですが、Socket.IO の room 機能（全体メッセージ送信）を使っています。

ライブデモ (Live Demo)

公開プログラムがそのまま動いています
https://socketgamecode.fly.dev/

プログラム と ドキュメント

GitHub – socket_game_base_room
https://github.com/BakuretuKen/socket_game_base_room

プログラミング解説 – 「ワンナイト人狼」カード配布部分

ソケット通信ゲームプログラム解説 – 「ワンナイト人狼」カード配布部分

この基本プログラムを使って、具体的にどの用にゲームを作成するのかを解説しています。

プログラム実行画面

ゲーム作成（マスター画面）

プレイヤー接続（プレイヤー画面）

処理の流れ

ゲーム作成者がマスターとなります。マスターの画面に表示されたゲームコードを使って、プレイヤーは待機ルームに入ることが出来ます。
ゲームコードはクリックでクリップボードにコピーされます。
マスターが「ゲーム開始」クリックで、ゲーム開始です。

ゲーム開始後、全員が Web Socket でサーバを介してつながります。
マスターの画面で「players」ボタンを押すと、マスターが管理しているユーザー情報が表示されます。

[ { “socketId”: “ll0t6YCXCM2GW21KAAAY”, “userName”: “ますた” }, { “socketId”: “xd4zgNRaqXleh8jqAAAa”, “userName”: “さんかしゃ” }, { “socketId”: “95bvp-TALrOMx242AAAc”, “userName”: “あああ” } ]

全体メッセージ送信

マスター、プレイヤーどちらでも「send_all」ボタンを押すと、ゲームに接続されている全員に下記メッセージが送信されます（送信者にも届きます）。
仕組み的にマスターがゲーム進捗を管理すると思うので、ゲーム進捗に関してはマスターから全員にメッセージを送信すると良いかと思います。
（例）「朝」「夜」を切り替えるメッセージ

{ “gameCode”: “IJ5KCJ”, “action”: “SEND_DEBUG”, “message”: “＼(^o^)／おわた”, “status”: true, “socketId”: “ll0t6YCXCM2GW21KAAAY” }

個別メッセージ送信

送信先の socketId がわかっている場合は、そのユーザーだけにメッセージを送信することが出来ます。
「socketId」エリアに socketId を入力して、「send_direct」ボタンで対象ユーザーだけに下記メッセージが送信されます。
マスターからのゲーム進捗情報以外は、こちらの個別送信になることが多いと思います。
（例）マスターからの役職の配布、プレイヤーからの投票

{ “to”: “xd4zgNRaqXleh8jqAAAa”, “action”: “SEND_DIRECT_DEBUG”, “message”: “こんにちは”, “status”: true, “socketId”: “ll0t6YCXCM2GW21KAAAY” }

特記事項

JSON の socketId 項目は、送信者の socketId になります。
プレイヤー側はこの情報をマスターの socketId として保持しておくことにより、マスターに個別送信が可能になります。

単一サーバで動かす前提のコードです。複数サーバでバランシングする場合は、同じゲームコードは同じサーバにするなどのアプリレベルでのロードバランシングが必要になります。

開発について

game_master.ts、game_player.ts にゲームプログラムを書いてください。
MITライセンスです。