WebSocketとは、WebサーバとWebブラウザの間で双方向通信できるようにする技術仕様のことです。これを使えばネット対戦ゲームをつくることが可能になります。

ネット対戦ゲームをつくる場合、各プレイヤーの位置や状態がわかるようにしておかないとなりません。WebSocketを使えばこれができそうです。ではさっそくやってみましょう。

アクセスすると矩形が座標(10, 10)に表示されます。そして方向キーをおすと移動します。複数のアクセスがあると矩形も複数表示されます。ブラウザを閉じるとしばらくしたのち消えます。動作確認はこちらから ⇒ https://test2.lets-csharp.com/test

いまからつくるのはページにアクセスすると矩形が表示され、上下左右の方向キーをおすとその位置が変化するという簡単なものです。これを応用すればネット対戦ゲームもつくることができそうです。

まずapp.jsというファイルをつくりますが、同じ階層にフォルダとつくりそのなかに(フォルダ名).htmlというhtmlファイルをつくります。実際にこれを https://lets-csharp.com/XXXX で公開しようとするとうまくいきません。そこでサブドメインを使います。

まずindex/index.htmlですが、これはTestというページへのリンクを表示するだけです。

index/index.html

404.htmlはtest.html以外のページにアクセスされた場合に「404 not found」を表示させるためのものです。

404/404.html

今回の主役はtest.htmlです。server_to_client_objectsイベント・データ(後述)を受信したときに矩形を表示させるとともに接続しているユーザーのIDと矩形の座標を表示させます。

test/test.html

app.jsをつくります。まずnpmでsocket.ioをインストールします。

つぎにObjectクラスをつくります。IDと座標、色、上下左右に移動できるかどうかが設定できるようにプロパティを定義します。

app.js

アプリケーションが開始されたらmain関数が実行されるようにします。その前に必要なモジュールを読み込みます。そのあとmain関数を定義します。

app.js

main関数が実行されたらHTTPサーバにソケットをひも付ける処理がおこなわれます。LinkSocketToHttpServer関数として新しい関数を作成していますが、これは将来、他のページを追加していくことも考えられるからです。

そしてLinkSocketToHttpServer_Text関数が実行されたらTestというクラスのインスタンスを生成しています。いまから作成するテストページに関する実装はTestクラスのなかで完結させてしまいます。複数のページをつくる場合、グローバル変数や関数が多くなるのでクラスをつかって変数や関数を閉じ込めてしまおうというわけです。

Testクラスのコンストラクタでやることはconnectionイベントを受信すること、client_to_server_keydownイベントとclient_to_server_keyupイベントに対してデータを送信すること、タイマーをセットして一定時間おきにserver_to_client_objectsイベントを発生させることです。

app.js

client_to_server_firstイベントを受信したときの処理を示します。ここでは新しいオブジェクトを生成してObjectの配列 objectsに追加しています。矩形の色は乱数で決定します。

client_to_server_keydownイベントを受信したときの処理を示します。キーが押されたらその方向のTestObject.IsMove~フラグをセットし、離されたらフラグをクリアします。

ユーザーが離脱したらdisconnectイベントが発生するので、対応するオブジェクトを取り除きます。

1000/60ミリ秒ごとにInterval関数が呼び出されます。このときはTestObject.IsMove~フラグをみて座標を変更させます。

あとは実行するだけです。

レンタルサーバーなので実行したら公開したいディレクトリに.htaccessを設置することで無理やり表示させています。

.htaccess

動作確認はこちらから ⇒ https://test2.lets-csharp.com/test