■インストール
yum install openssl-devel gcc-c++ make#前準備 wget http://nodejs.org/dist/v0.6.11/node-v0.6.11.tar.gz tar xvzf node-v0.6.11.tar.gz cd node-v0.6.11 ./configure make make install curl http://npmjs.org/install.sh | sh npm install -g express express sample cd sample npm install
./app.js
たまたま80番開いていたので以下のようにして80番で繋がるようにする。
/**
* Module dependencies.
*/
var express = require('express')
, routes = require('./routes');
var app = module.exports = express.createServer();
// Configuration
app.configure(function(){
app.set('views', __dirname + '/views');
app.set('view engine', 'jade');
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(__dirname + '/public'));
});
app.configure('development', function(){
app.use(express.errorHandler({ dumpExceptions: true, showStack: true }));
});
app.configure('production', function(){
app.use(express.errorHandler());
});
// Routes
app.get('/', routes.index);
app.listen(80);
console.log("Express server listening on port %d in %s mode", app.address().port, app.settings.env);
■起動
node app.js
http://ec2-123-123-123-123.ap-northeast-1.compute.amazonaws.com/などで自分のインスタンスにアクセスすれば見れる。
■socket.ioを使う
./package.json
以下のように編集する。
{
"name": "application-name"
, "version": "0.0.1"
, "private": true
, "dependencies": {
"express": "2.5.8"
, "jade": ">= 0.0.1"
, "socket.io": "*"
}
}
./sampleで以下のコマンドを実行する。
npm install
./app.js
サーバー側のコードをapp.jsの最後尾に付加する。
var io = socketio.listen(app)
,count = 0;
io.sockets.on('connection', function(socket){
count++;
io.sockets.emit('count change', count);
socket.on('disconnect', function() {
count--;
socket.broadcast.emit('count change', count);
}
);
});
./views/layout.jade
クライアント側の処理を書き加える。
!!!
html
head
title= title
link(rel='stylesheet', href='/stylesheets/style.css')
script(type='text/javascript', src='http://code.jquery.com/jquery.min.js')
script(type='text/javascript', src='/socket.io/socket.io.js')
script(type='text/javascript')
var socket = io.connect();
socket.on('count change', function(count) {
$('#count').text(count);
});
body!= body
./views/index.jade
表示用に要素を追加する。
#page
#headerArea
h1= title
p Welcome to #{title}
p 現在このページを見ている人は
span#count
人います。
■ejsを使う
既存のhtmlコードを使用するときにhamlにするのは手間なのでejsを使う。
./package.json
以下のように編集する。
{
"name": "application-name"
, "version": "0.0.1"
, "private": true
, "dependencies": {
"express": "2.5.8"
, "jade": ">= 0.0.1"
, "socket.io": "*"
, "ejs": "*"
}
}
./app.js
以下のようにして、テンプレートエンジンをjadeからejsに変更する。
/**
* Module dependencies.
*/
var express = require('express')
, socketio = require('socket.io')
, ejs = require('ejs')
, routes = require('./routes');
var app = module.exports = express.createServer();
// Configuration
app.configure(function(){
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');
app.set('view options', {layout : false});
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(__dirname + '/public'));
});
せっかくなんでルーティングも変更してみる。
app.get('/', routes.index);
app.get('/hoge', function(req, res) {
res.render('hoge.ejs', { title: 'My Site' });
});
参考
./views/hoge.ejs
あとは以下のようにテンプレートファイルを用意する。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8" />
<title><%= title %></title>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="/socket.io/socket.io.js"></script>
<script type="text/javascript">
var socket = io.connect();
socket.on('count change', function(count) {
$('#count').text(count);
});
</script>
</head>
<body>
<h1><%= title %></h1>
<p>現在このページを見ている人は<span id="count"></span>人います。</p>
</body>
</html>
以下のようなURLでアクセスができるようになる。
http://ec2-123-123-123-123.ap-northeast-1.compute.amazonaws.com/hoge