Does not provide fallback content when JavaScript is not available. このサイトを視聴するにはJavaScriptを有効にしてください。node.jsなんかでオンラインなゲームを作る(4) ルーム機能 | blog.potproject.net

前回

オンラインゲームには不可欠な存在だと思える、ルーム機能を実装していきます。

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

この機能には、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の値として登録します。


  
    
    RoomID:<%=room\_id %>
    
  
  
  

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


  
    
    title
  
  
  

部屋ID:

[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にソースがあります。