m_shige1979のささやかな抵抗と欲望の日々

プログラムの勉強をしながら学習したことや経験したことをぼそぼそと書いていきます

なんとなく作ったサイト

http://www.it-check-matome.info/


Github(注意すること)

https://github.com/mshige1979

nodejsサンプル

nodejs

ちょっと勉強するモチベーションが低下してきたので別の言語を触ってみる

環境

server.js
// httpモジュールを読み込み、サーバオブジェクトを取得
var http = require("http");
var url = require("url");
var fs = require("fs");
var path = require("path");
var ejs = require("ejs");
var qs = require("querystring");

// 外部ファイルの読み込み
var settings = require("./settings.js");

// サーバ読み込み
var server = http.createServer();

// メッセージ内容
var posts = [];

// テンプレートファイル(BBS用)
var template_bbs = fs.readFileSync(__dirname + '/templates/bbs.ejs', 'utf-8');

// 画面にメッセージのリストを表示
function renderForm(posts, res){
	
	var data = ejs.render(template_bbs, {
        title: "1行掲示板サンプル",
		posts: posts
    });
	
	// 画面に出力
	res.writeHead(200, {'Content-Type': 'text/html'});
    res.write(data);
    res.end();

}

// イベント設定
server.on('request', function(req, res){
	
	// urlをログに出力
	console.log("url = " + req.url); 
	
	switch(req.url){
	case "/":
		if(req.method === 'POST'){
			// postした場合は内容を保存して、画面に表示
            // フォームからのデータの受信処理
			req.data = "";
			req.on("readable", function(){
				req.data += req.read();
			});
			
			// リクエストの受信データ完了後の処理
			req.on("end", function(){
				var query = qs.parse(req.data);
				posts.push(query.name);
				// 画面にリストを出力
				renderForm(posts, res);
			});
			
		}else{
			// postされていない場合は現時点の内容を表示
		    // 画面にリストを出力
			renderForm(posts, res);	

		}

		break;

	case "/about":
		res.writeHead(200, {'Content-Type': 'text/plain'});
        res.write('hello about');
		res.end();
		break;

	case "/profile":
		res.writeHead(200, {'Content-Type': 'text/plain'});
        res.write('hello profile');
		res.end();
		break;

	default:
		// パスを取得
		var _path =  url.parse(req.url).pathname;
		console.log("path = " + _path);
		
		var _localpath = settings.dir + _path;
		console.log("path = " + _localpath);

		// ノンブロッキングによるファイルの読み込み
		fs.readFile(_localpath, 'utf-8', function(err, data){
			// エラー処理
			if(err){
				res.writeHead(404, {'Content-Type': 'text/plain'});
				res.write('File Not Found');
				return res.end();	// returnとすることでここで処理が終わる
			}

			// 拡張子を取得
			var ext = "";
			var n = 0;
			if ((n = _localpath.lastIndexOf(".")) != -1) {
				ext = _localpath.substring(n+1);
			}

			// 拡張子
			console.log('ext = ' + ext);
			if(ext == "htm" || ext == "html"){
				res.writeHead(200, {"Content-Type": "text/html"});

			}else if(ext == "gif"){
				res.writeHead(200, {"Content-Type": "image/gif"});

			}else if(ext == "ico"){
				res.writeHead(200, {"Content-Type": "image/ico"});

			}else if(ext == "jpg" || ext == "jpeg"){
				res.writeHead(200, {"Content-Type": "image/jpeg"});

			}else if(ext == "css"){
				res.writeHead(200, {"Content-Type": "text/css"});

			}else if(ext == "js"){
				res.writeHead(200, {"Content-Type": "text/javascript"});
				
			}else{
				res.writeHead(200, {"Content-Type": "text/plain"});

			}
			res.write(data);
			res.end();
		
		});
			
		break;
	}

});

// サーバを起動
server.listen(settings.port, settings.host);
console.log('server listening ...');
console.log('server host = ' + settings.host);
console.log('server port = ' + settings.port); 

settings.js
/*                                             *
 * 外部ファイルに設定を定義                    *
 * exportsで指定した変数などを外部データとして *
 * 使用できる。                                */
// ポート
exports.port = 8001;
// ホスト
exports.host = "192.168.51.129";
templates/bbs.ejs
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
	<h1><%= title %></h1>
    <div class="row">
	  <div class="col-xs-12 col-md-8">
	    <form method="post" class="form-inline" role="form">
          <input type="text" name="name" class="form-control" placeholder="message" />
          <input type="submit" value="send" class="btn btn-default" />
        </form>
		<hr />
		<ul>
			<% for(var i = 0; i< posts.length; i++ ){ %>
			<li><%= posts[i] %></li>
            <% } %>
		</ul> 
      </div>
      <div class="col-xs-6 col-md-4">
      </div>
    </div>


    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="/js/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="/js/bootstrap.min.js"></script>
  </body>
</html>
結果

f:id:m_shige1979:20140210225928j:plain

まとめ

開発する上ではフレームワークを使用したほうがいいか基本動作を理解しておくため
ベースとなる方法も理解しておく。

expressとかsocketioとかあるらしいけど今は基本機能を理解する。
写経とかして慣れておく。最近はコピペばかりしているような感じがしているのでちょっとコードをガリガリ書くようにすることが必要

これ以上機能を拡張するとserver.jsが冗長化するなあ...

広告を非表示にする