NodeJS基礎教學&簡介

NodeJS
新一代高效能網站開發框架

From:http://blog.xdxie.net
1

Outline
! NodeJS簡介 – What & Why
! NodeJS V.S JavaScript V.S JAVA
!   NON-BLOCKING & BLOCKING
! NodeJS 總結&具體優點
! NodeJS 開發環境建置 & 執行
!   Require & Module
!   NPM(Node Package Manager)
!   DEMO HTTP伺服器建立(基本、延伸、再延伸)
!   DEMO Socket.IO聊天室
!   What is your need
!   Reference
2

What is NodeJS

! Node.JS 是一個高效能、易擴充的網站應用程式開發框架
(Web Application Framework) 。它誕生的原因，是為了讓開發
者能夠更容易開發高延展性的網路服務，不需要經過太多
複雜的調校、效能調整及程式修改，就能滿足網路服務在
不同發展階段對效能的要求。

!   Ryan Dahl 是 NodeJS 的催生者，他開發 NodeJS 的目的，就是
希望能解決 Apache 在連線數量過高時，緩衝區 (buffer) 和系
統資源會很快被耗盡的問題，希望能建立一個新的開發框
架以解決這個問題。因此嘗試使用效能十分優秀的 V8
JavaScript Engine ，讓網站開發人員熟悉的 JavaScript 程式
語言，也能應用於後端服務程式的開發，並且具有出色的
執行效能。

3

Why use NodeJS
!   以前要寫一個能夠同時容納上百人的上線的網路服務，需要花費
多大的苦工，可能10人多就需要經過一次程式調整，而NodeJS就
是為了解決這個困境， NodeJS 因此誕生，它是一種利用 V8
Javascript 編譯器，所開發的產品，利用V8 編譯器的高效能，與
Javascript 的程式開發特性所產生的網路程式。

!   以前的網路程式原理是將使用者每次的連線(connection)都開啟一個
執行緒(thread)，當連線爆增的時候將會快速耗盡系統效能，並且
容易產生阻塞(block)的發生。
! NodeJS對於資源的調校有所不同，當程式接收到一筆連線
(connection)，會通知作業系統將連線保留，並且放入heap中配置，
先讓連線進入休眠(Sleep)狀態，當系統通知時才會觸發連線的
callback。這種處理連線方式只會佔用掉記憶體，並不會使用到CPU
資源。另外因為採用Javascript 語言的特性，每個request都會有一個
callback，如此可以避免發生Block的狀況發生。

4

NodeJS V.S JavaScript V.S JAVA
!   JavaScript是網頁的前端語言。早期稱為LiveScript，由Netscape
與Sun合作，受當時的JAVA啟發改名為Javascript，目的之一為
看上去像JAVA，故結構上有部分相似處，但JavaScript與JAVA
並沒有任何關係。

! NodeJS可以說是JavaScript的後端語言。

5

BLOCKING & NON-BLOCKING
是什麼？

6

BLOCKING
// 開始泡泡麵
make_cup_noodles();

// 在等泡麵泡好的時候電話響了, 但是我還是必須等麵泡完了才能
接, 於是我便錯過了這通電話
answer_a_phone_call();

// 這時我突然想尿尿, 但我還是必須等面泡完,於是我便尿褲子了…
go_to_toilet();

// 麵好了我穿著滿是尿的褲子吃麵
eat_the_noodles();

// 吃完了我穿著滿是尿的褲子丟掉空碗
throw_the_cup_to_trash_can();

7

NON-BLOCKING
make_cup_noodles(function(完成的麵){ //開始泡麵,麵好後做function

eat_the_noodles(function(空碗){ //吃泡麵,吃完以後做function

throw_the_cup_to_trash_can(); //吃完了可以丟掉空碗

});
確認事情發生後必須寫在callback內然而
}); 動作一多,程式將不方便閱讀也不好維護
answer_a_phone_call(function(響了的電話){
solution : events模組

//電話響了我才接電話,而不是一直在電話旁邊等電話
});
go_to_toilet(function(想上廁所的我){

//想上廁所的時候才去上廁所,而不是一直在廁所等尿意
});

EVENT-DRIVEN使整支程式可以在事件發生時才做事,
而不是BLOCK在一件事上後面的事情都要等

8

所以簡單說
NodeJS到底是什麼？

9

•  JavaScript的後端語言
•  使用V8 JavaScript編譯器所開發的產品
•  NON-BLOCKING （非阻塞特性）
•  EVENT-DRIVEN （事件驅動）
•  HIGH CONCURRENCY （高連線數量）

10

那NodeJS的具體優點呢？

11

•  入手容易
•  無論你曾學過PHP、Ruby或是Python多少
對於JavaScript都有一些基本觀念，要入手
NodeJS可以迅速很多，甚至可以說會一種
語言前後端都通吃。
•  高性能低耗能的優秀性能表現
•  非同步I/O
•  Event-Driven
•  強大的社群支援
•  NPM
！
•  Realtime應用的選擇
效能
•  Socket.IO
高
12

簡單介紹了NodeJS

13

NodeJS開發環境建置
!   官方網站下載安裝
!   http://nodejs.org/

!   於命令視窗執行指令: node –v

!   出現版本號表示安裝成功

14

NodeJS執行程式方法
!   目前工作目錄為您.js檔案的位置

!   執行指令:node filename.js

15

Require Module
!   require = load module
NodeJS所看到的

var http = require(‘http’);

//可以開始使用http的各種方法, 如 http.createServer()

前端Javascript所看到的

script src=“jquery.js”

//可以開始使用jQuery

16

Require好簡單
但是Module從哪來？

17

Node Package Manager
! NodeJS 的套件（package）管理工具

!   開發者可以直接利用線上套件庫，加速軟體專案開發

! NodeJS 在 0.6.3 版本開始內建 NPM
不用再另外安裝了！

!  https://npmjs.org/

18

! npm -v //NPM版本訊息
! npm list //列出目前工作目錄安裝的套件
! npm install module_name //安裝於目前工作目錄
! npm install -g module_name //安裝於系統目錄
! npm update module_name //更新套件

19

!   使用package.json管理套件版本
EXAMPLE:
{

name: application-name ,

version: 0.0.1 ,

private: true ,

dependencies:

{

express: 2.5.5 ,

coffee-script: latest ,

mongoose: = 2.5.3

}
}
20

還想知道什麼?

npm help
21

來點實作的東西吧！

22

DEMO - HTTP伺服器建立
var server,
port=2012,
http=require('http');

server=http.createServer(function(req,res){

res.writeHead(200,{'Content-type':'text/plain'});

res.end('Hello World');

console.log('guest visted');
});

server.listen(port); 出現兩次訊息, Why?
console.log('Server is running');
favorite.ico

23

DEMO – HTTP伺服器建立
延伸
var server,

…..
url=require('url');


path=url.parse(req.url);


switch(path.pathname){

case '/’:

res.end('hello world');break;

case '/index’:

res.end('index page');break;

default:

res.end('path.pathname='+path.pathname);break;

}
}).listen(port);
console.log('Server is running.');

24

這樣的HTTP伺服器似乎還是不怎麼樣

25

DEMO – HTTP伺服器建立
再延伸
var server,
…
fs=require('fs');


path=url.parse(req.url);

fs.readFile('static'+path.pathname,'utf8',function(err,file){

if(err){


res.end();

return;

}

res.writeHead(200,{'Content-type':'text/html'}); 純文字輸出

res.end(file);

});
}).listen(port);
console.log('Server is running.');
以html方式輸出

26

Socket.IO簡介
!   整合了websocket，long-polling，iframe polling等技術，讓不支援
websocket 的瀏覽器也能夠體驗websocket 的感受

!   實現Server-push,Real-Time服務,典型範例:聊天室

! NodeJS最常使用的套件之一

!   跨各瀏覽器(包括IE..XD)

的噩夢！
開發者
I E是
27

DEMO – Socket.IO聊天室
Real-time
Server-side核心部分
var sio=io.listen(3333);
sio.sockets.on('connection',function(socket){

socket.emit('reqname');

socket.on('username',function(data){

console.log(data.username+' enter the room');

var username=data.username;
chat room'});

sio.sockets.emit('msg',{msg:'User '+username+' enter the

})

socket.on('msg',function(data){

sio.sockets.emit('msg',{msg:data.msg});

});
});
對所有Socket廣播,包括自己
比較: socket.broadcast.emit 不包括自己
28

DEMO – Socket.IO聊天室
Real-time
Client核心部分

script src=http://localhost:3333/socket.io/socket.io.js/script

var name;

var socket=io.connect('http://localhost:3333');

socket.on('reqname',function(data){

name=window.prompt(what's your name?);

socket.emit('username',{username:name});

})

socket.on('msg',function(data){

console.log(data);

document.getElementById('chatbox').innerHTML+='br /'+data.msg;

});

function sendmsg(){

var msg=document.getElementById('msg').value;

document.getElementById('msg').value='';

socket.emit('msg',{msg:name+' says '+msg});

}

29

講到這裡
你覺得NodeJS怎麼樣?

30

31

如果你對NodeJS有興趣
你還需要什麼？

32

What is your need
! Javascript
!   如果未曾寫過javascript建議先從javascript學起

! NodeJS 電子書
!   完整的教學

! NodeJS API
!   從官方API手冊了解可以使用的API,知道的越多對開發越有幫助

!   express
! NodeJS的Web開發框架,使開發http service變得更容易

33

其實你最需要的是創意

34

還有Google
身為一個開發者如果不會Google那跟鹹魚有什麼分別

35

Reference
! NodeJS官方網站
!   http://nodejs.org/
! NodeJS API
!   http://nodejs.org/docs/latest/api/
!   NODEJS台灣社群電子書
!   http://book.nodejs.tw/
! Dreamerslab
!   http://dreamerslab.com/
! Socket.IO
!   http://socket.io/!
! XDXie’s Blog
!   http://blog.xdxie.net/
我的Blog,或許可以來這邊挖筆記XD

36

Thanks for your attention.

37

NodeJS基礎教學&簡介

More Related Content

What's hot (20)

Similar to NodeJS基礎教學&簡介 (20)

NodeJS基礎教學&簡介