node.jsなんかでオンラインなゲームを作る(4) ルーム機能

オンラインゲームには不可欠な存在だと思える、ルーム機能を実装していきます。
内容は、そのままルーム機能です。チャットで個別の部屋みたいなのを実装するためのもの。
同じ部屋同士で対戦できます。逆に同じ部屋に入っていないと対戦できません。これがちゃんと機能しないとえらいこっちゃです。

この機能には、express,ejs,socketを利用します。
ということで、requireで指定します。おまじないという奴です。
var express = require('express')
, http = require('http')//標準モジュール http
, path = require('path') //標準モジュール path
, fs = require('fs') //標準モジュール filesystem
, socketio = require('socket.io')
, mongoose = require('mongoose')
, ejs=require('ejs');

ルーム機能の実装には、socket.ioが不可欠です。ほぼこいつに頼りきり。
流れとしては、

  1. form.htmlからPOSTでルーム番号を送る
  2. ルーム番号を受け取り、ejsで表示、その部屋に入る(index.ejsへ遷移)
  3. emitで通知する場合、そのルーム内だけ通知するようになる(socket.io)

これが一連の流れとなります。
3はsocket.ioを含む処理のため、次の記事で。1,2を実装していきましょう。

ejsについて
ejsはテンプレートエンジンというもので、htmlに変数を流しいれるために使うファイルみたいなものです。VIEWに当たるもの。
書き方としては、PHPやJSPと似てます。htmlにejsタグを付けて、変数を入れていきます。
ついでに、デフォルトでエスケープ処理をしてくれたりもします。
[index.ejs]

<%=room_id %>に送った変数[room_id]が挿入されます。JSPと書き方ほぼ一緒だし見分けがつかない
これで、POSTで送った値を取得したら、ejsで流し込み、タイトルに表示・javascriptの値として登録します。

<html>
  <head>
    <meta charset="utf-8">
    <title>RoomID:<%=room_id %></title>
    <script type="text/javascript">
    var RoomID = "<%=room_id %>";
    </script>
  </head>
  <body>
  </body>
</html>

[form.html]
送信する方のPOSTはこんな感じです。特に何も考えずシンプルに実装。こっちはhtmlです。

<!DOCTYPE html>
  <head>
    <meta charset="utf-8">
    <title>title</title>
  </head>
  <body>
  <form action="./" method="post">
    <p>部屋ID:<input type="text" name="room" size="10"></p>
      <p>
    <input type="submit" value="入室"><input type="reset" value="リセット">
      </p>
</form>
  </body>
</html>

[app.js]
app.jsはサーバーサイドのjavascriptとして。サーバーの処理を記述します。
httpサーバのlisten、expressの初期設定などは省略します。
POSTで送った値はreq.bodyに格納されているということが割と重要です。覚えていないと変なところで躓くかも。

//入室
app.get('/', function(req,res){ //アクセスされたら
      fs.readFile('form.html',function(err, data){ //form.html読み込んで送る
        if (err) {
            console.error("console:"+err);
            res.send(404); // エラーで404を返す
            return;
        }
        res.set('Content-Type', 'text/html');
        res.send(data);
      });
});
//index.htmlのGET
app.post('/', function(req,res){ //postで送られて来たら
        if(req.body.room==null){
            res.send(500); // 値なしならエラーで500を返す
            return;
        }
        res.render('index.ejs',{room_id:req.body.room}); //ejsをレンダリングして送る
        });

});

次はsocket.ioについて理解していかないと・・・。


githubにソースがあります。製作中。ソースは自由に。

前:node.jsなんかでオンラインなゲームを作る(3) express設定
次:node.jsなんかでオンラインなゲームを作る(5) ルーム機能(socket.io)

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)