Introduction to Node.js and a very simple server setup Node.js服務開發課程資訊： http://www.zencher.com/#course/course-cloudapp

1. Node.js 介紹
Fin

2. Node.js 是什麼
• Javascript 運⾏行平台
• 讓Javascript跳脫瀏覽器的限制
• 輕易建⽴立Web Server
• 事件驅動 (Event driven)
• ⾮非阻塞式 (Nonblocking)

3. Why Node.js?
• 前後端語⾔言統⼀一，且能共⽤用模組
• 其特性⾮非常適合即時網路服務
• 本⾝身就可以是⼀一個HTTP伺服器
• 強⼤大的套件管理及開源社群

4. Why not Node.js?
• ⾮非常新的技術，版本甚⾄至還沒1.0
• 對需要⼤大量CPU的⼯工作不拿⼿手 - 直譯式
語⾔言
• library不如其他語⾔言來的多樣及完整
（但在快速發展中）

5. Node.js Dev Env Setup
• Install NVM
• Using NVM

6. Install NVM
• Install NVM
https://github.com/creationix/nvm/
• .bash_profile
加⼊入
curl
https://raw.github.com/creationix/nvm/master/install.sh
|
sh
[[
-­‐s
/Users/$USERNAME/.nvm/nvm.sh
]]
&&
.
/Users/$USERNAME/.nvm/
nvm.sh
#
This
loads
NVM

7. Using NVM
#列出可安裝的node.js版本
nvm
ls-­‐remote
#安裝某版本的nvm
nvm
install
0.11
#列出本機端安裝的版本
nvm
ls
#使⽤用某版本
nvm
use
0.8
#設定預設版本
nvm
alias
default
0.8

8. Hello World!
• helloworld.js
• Run:
$
node
helloworld.js
Hello
World!
console.log(“Hello
World!”);

9. Directory Structure
project
root/
config/
controllers/
doc/
models/
public/
js/
css/
img/
test/
views/
package.json
README.md

10. Build a HTTP Server
#helloserver.js
#A
http
server
that
returns
‘Hello
World’
var
http
=
require('http');
http.createServer(function
(req,
res)
{
res.writeHead(200,
{'Content-­‐Type':
'text/plain'});
res.end('Hello
Worldn');
}).listen(8124,
"127.0.0.1");
console.log('Server
running
at
http://127.0.0.1:8124/');
$
node
helloserver.js
Server
running
at
http://127.0.0.1:8124/

11. Build a HTTP Server -
Using Express
$
npm
install
express
express@3.2.3
node_modules/express
├──
methods@0.0.1
├──
fresh@0.1.0
├──
range-­‐parser@0.0.4
├──
cookie-­‐signature@1.0.1
├──
qs@0.6.4
├──
buffer-­‐crc32@0.2.1
├──
cookie@0.0.5
├──
debug@0.7.2
├──
commander@0.6.1
├──
mkdirp@0.3.4
├──
send@0.1.0
(mime@1.2.6)
└──
connect@2.7.9
(pause@0.0.1,
bytes@0.2.0,
formidable@1.0.13)

12. Simplest Express Server
var
express
=
require('express');
var
app
=
express.createServer();
app.get('/',
function(req,
res)
{
res.send('This
is
an
Express
Server');
});
app.listen(8000);

13. Message Board
/**
*
Module
dependencies.
*/
var
express
=
require('express');
var
app
=
express();
//
Configuration
app.configure(function(){
app.set('views',
__dirname
+
'/views');
app.set('view
engine',
'jade');
app.use('/public',
express.static(__dirname
+
'/public'));
});
https://github.com/finfin/MessageBoard

14. //
Routes
app.get('/',
function(req,
res)
{
var
title
=
'Switter',
header
=
'Welcome
to
Switter';
res.render('index',
{
'title':
title,
'header':
header,
'tweets':
tweets,
})
})
var
tweets
=
[];
app.get('/tweets',
function(req,res)
{
res.send(tweets);
})
app.post('/send',
express.bodyParser(),
function(req,
res)
{
if
(req.body
&&
req.body.tweet)
{
tweets.push(req.body.tweet);
res.send({status:"ok",
message:"Tweet
received"});
}
else
{
//no
tweet?
res.send({status:"nok",
message:"No
tweet
received"});
}
})
app.listen(8000);

15. HTML Template - Jade
• 網⾴頁的呈現
• 語法簡潔
• http://jade-lang.com/
$
npm
install
jade

16. Jade Template
doctype
5
html(lang="zh-­‐tw")
head
meta(charset="utf8")
link(rel='stylesheet',
href='/public/style.css')
title=
title
body
h1=
header
block
content
extends
layout
block
content
form(action="/send",
method="POST")
input(type="text",
length="140",
name="tweet")
input(type="submit",
value="發送")
each
tweet
in
tweets
p=
tweet

17. • 套件越⽤用越多，要如何管理？
>>> NPM!
• package.json
Package Management
{
"name":
"MessageBoard",
"version":
"0.0.1",
"dependencies":
{
"express":
"*",
"jade":
"*"
}
}
#幫你安裝package.json裡⾯面所有的套件
$
npm
install

18. Improvement
function
acceptsHtml(header)
{
var
accepts
=
header.split(',');
for(i=0;
i
<
accepts.length;
i++)
{
if
(accepts[i]
===
'text/html')
{
return
true;
};
}
return
false;
}
app.post('/send',
express.bodyParser(),
function(req,
res)
{
if
(req.body
&&
req.body.tweet)
{
tweets.push(req.body.tweet);
if(acceptsHtml(req.headers['accept']))
{
res.redirect('/',
302)
}
else
{
res.send({status:"ok",
message:"Tweet
received"});
};
}
else
{
//no
tweet?
res.send({status:"nok",
message:"No
tweet
received"});
};
});

19. Result

20. Resources
• http://nodejs.tw/
• http://www.nodebeginner.org/index-zh-
tw.html#javascript-and-nodejs
• https://www.facebook.com/groups/
node.js.tw
• http://book.nodejs.tw/index.html

21. About US
• http://www.zencher.com/
• 課程：雲端服務開發
http://www.zencher.com/#course/course-
cloudapp
• https://www.facebook.com/
thingsaboutwebdev