potpro (ぽとぷろ)

Full-stuck engineer(Not Full-stack)

JS/PHP/Go/Docker/Nginxなど。技術または趣味寄りの発信ブログです。

𝕏

全 85 記事

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

javascriptnode.js

potpro(ぼとぷろ)

2015/04/02

前回

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

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

この機能には、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が不可欠です。ほぼこいつに頼りきり。流れとしては、

form.htmlからPOSTでルーム番号を送る
ルーム番号を受け取り、ejsで表示、その部屋に入る(index.ejsへ遷移)
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にソースがあります。

potpro (ぽとぷろ)

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

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