NodeJS基礎教學&簡介

source:   http://www.slideshare.net/xdxie/nodejs-15251110

• 1. NodeJS 新一代高效能網站開發框架From:http://blog.xdxie.net 1
• 2. 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 !   ReferenceFrom:http://blog.xdxie.net 2
• 3. What is NodeJS ! Node.JS 是一個高效能、易擴充的網站應用程式開發框架 (Web Application Framework) 。它誕生的原因，是為了讓開發 者能夠更容易開發高延展性的網路服務，不需要經過太多 複雜的調校、效能調整及程式修改，就能滿足網路服務在 不同發展階段對效能的要求。 !   Ryan Dahl 是 NodeJS 的催生者，他開發 NodeJS 的目的，就是 希望能解決 Apache 在連線數量過高時，緩衝區 (buffer) 和系 統資源會很快被耗盡的問題，希望能建立一個新的開發框 架以解決這個問題。因此嘗試使用效能十分優秀的 V8 JavaScript Engine ，讓網站開發人員熟悉的 JavaScript 程式 語言，也能應用於後端服務程式的開發，並且具有出色的 執行效能。From:http://blog.xdxie.net 3
• 4. Why use NodeJS !   以前要寫一個能夠同時容納上百人的上線的網路服務，需要花費 多大的苦工，可能10人多就需要經過一次程式調整，而NodeJS就 是為了解決這個困境， NodeJS 因此誕生，它是一種利用 V8 Javascript 編譯器，所開發的產品，利用V8 編譯器的高效能，與 Javascript 的程式開發特性所產生的網路程式。 !   以前的網路程式原理是將使用者每次的連線(connection)都開啟一個 執行緒(thread)，當連線爆增的時候將會快速耗盡系統效能，並且 容易產生阻塞(block)的發生。 ! NodeJS對於資源的調校有所不同，當程式接收到一筆連線 (connection)，會通知作業系統將連線保留，並且放入heap中配置， 先讓連線進入休眠(Sleep)狀態，當系統通知時才會觸發連線的 callback。這種處理連線方式只會佔用掉記憶體，並不會使用到CPU 資源。另外因為採用Javascript 語言的特性，每個request都會有一個 callback，如此可以避免發生Block的狀況發生。From:http://blog.xdxie.net 4
• 5. NodeJS V.S JavaScript V.S JAVA !   JavaScript是網頁的前端語言。早期稱為LiveScript，由Netscape 與Sun合作，受當時的JAVA啟發改名為Javascript，目的之一為 看上去像JAVA，故結構上有部分相似處，但JavaScript與JAVA 並沒有任何關係。 ! NodeJS可以說是JavaScript的後端語言。From:http://blog.xdxie.net 5
• 6. BLOCKING & NON-BLOCKING 是什麼？From:http://blog.xdxie.net 6
• 7. BLOCKING // 開始泡泡麵 make_cup_noodles(); // 在等泡麵泡好的時候電話響了, 但是我還是必須等麵泡完了才能 接, 於是我便錯過了這通電話 answer_a_phone_call(); // 這時我突然想尿尿, 但我還是必須等面泡完,於是我便尿褲子了… go_to_toilet(); // 麵好了我穿著滿是尿的褲子吃麵 eat_the_noodles(); // 吃完了我穿著滿是尿的褲子丟掉空碗 throw_the_cup_to_trash_can();From:http://blog.xdxie.net 7
• 8. 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在一件事上後面的事情都要等 From:http://blog.xdxie.net 8
• 9. 所以簡單說 NodeJS到底是什麼？From:http://blog.xdxie.net 9
• 10. •  JavaScript的後端語言 •  使用V8 JavaScript編譯器所開發的產品 •  NON-BLOCKING （非阻塞特性） •  EVENT-DRIVEN （事件驅動） •  HIGH CONCURRENCY （高連線數量）From:http://blog.xdxie.net 10
• 11. 那NodeJS的具體優點呢？From:http://blog.xdxie.net 11
• 12. •  入手容易 •  無論你曾學過PHP、Ruby或是Python多少 對於JavaScript都有一些基本觀念，要入手 NodeJS可以迅速很多，甚至可以說會一種 語言前後端都通吃。 •  高性能低耗能的優秀性能表現 •  非同步I/O •  Event-Driven •  強大的社群支援 •  NPM ！ •  Realtime應用的選擇 效 能 •  Socket.IO 高From:http://blog.xdxie.net 12
• 13. 簡單介紹了NodeJSFrom:http://blog.xdxie.net 13
• 14. NodeJS開發環境建置 !   官方網站下載安裝 !   http://nodejs.org/ !   於命令視窗執行指令: node –v !   出現版本號表示安裝成功From:http://blog.xdxie.net 14
• 15. NodeJS執行程式方法 !   目前工作目錄為您.js檔案的位置 !   執行指令:node filename.jsFrom:http://blog.xdxie.net 15
• 16. Require & Module !   require = load module NodeJS所看到的 var http = require(‘http’); //可以開始使用http的各種方法, 如 http.createServer() 前端Javascript所看到的 <script src=“jquery.js”> //可以開始使用jQueryFrom:http://blog.xdxie.net 16
• 17. Require好簡單 但是Module從哪來？From:http://blog.xdxie.net 17
• 18. Node Package Manager ! NodeJS 的套件（package）管理工具 !   開發者可以直接利用線上套件庫，加速軟體專案開發 ! NodeJS 在 0.6.3 版本開始內建 NPM 不用再另外安裝了！ !  https://npmjs.org/From:http://blog.xdxie.net 18
• 19. Node Package Manager ! npm -v //NPM版本訊息 ! npm list //列出目前工作目錄安裝的套件 ! npm install module_name //安裝於目前工作目錄 ! npm install -g module_name //安裝於系統目錄 ! npm update module_name //更新套件From:http://blog.xdxie.net 19
• 20. Node Package Manager !   使用package.json管理套件版本 EXAMPLE: { "name": "application-name" , "version": "0.0.1" , "private": true , "dependencies": { "express": "2.5.5" , "coffee-script": "latest" , "mongoose": ">= 2.5.3" } }From:http://blog.xdxie.net 20
• 21. 還想知道什麼? npm helpFrom:http://blog.xdxie.net 21
• 22. 來點實作的東西吧！From:http://blog.xdxie.net 22
• 23. 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.icoFrom:http://blog.xdxie.net 23
• 24. DEMO – HTTP伺服器建立 延伸 var server, ….. url=require(url); server=http.createServer(function(req,res){ path=url.parse(req.url); res.writeHead(200,{Content-type:text/plain}); 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.);From:http://blog.xdxie.net 24
• 25. 這樣的HTTP伺服器似乎還是不怎麼樣From:http://blog.xdxie.net 25
• 26. DEMO – HTTP伺服器建立 再延伸 var server, … fs=require(fs); server=http.createServer(function(req,res){ path=url.parse(req.url); fs.readFile(static+path.pathname,utf8,function(err,file){ if(err){ res.writeHead(404,{Content-type:text/plain}); res.end(); return; } res.writeHead(200,{Content-type:text/html}); 純文字輸出 res.end(file); }); }).listen(port); console.log(Server is running.); 以html方式輸出 From:http://blog.xdxie.net 26
• 27. Socket.IO簡介 !   整合了websocket，long-polling，iframe polling等技術，讓不支援 websocket 的瀏覽器也能夠體驗websocket 的感受 !   實現Server-push,Real-Time服務,典型範例:聊天室 ! NodeJS最常使用的套件之一 !   跨各瀏覽器(包括IE..XD) 的噩夢！ 開發 者 I E是From:http://blog.xdxie.net 27
• 28. 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 不包括自己From:http://blog.xdxie.net 28
• 29. 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("whats 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}); }From:http://blog.xdxie.net 29
• 30. 講到這裡 你覺得NodeJS怎麼樣?From:http://blog.xdxie.net 30
• 31. From:http://blog.xdxie.net 31
• 32. 如果你對NodeJS有興趣 你還需要什麼？From:http://blog.xdxie.net 32
• 33. What is your need ! Javascript !   如果未曾寫過javascript建議先從javascript學起 ! NodeJS 電子書 !   完整的教學 ! NodeJS API !   從官方API手冊了解可以使用的API,知道的越多對開發越有幫助 !   express ! NodeJS的Web開發框架,使開發http service變得更容易From:http://blog.xdxie.net 33
• 34. 其實你最需要的是創意From:http://blog.xdxie.net 34
• 35. 還有Google 身為一個開發者如果不會Google那跟鹹魚有什麼分別From:http://blog.xdxie.net 35
• 36. 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 From:http://blog.xdxie.net 36
• 37. Thanks for your attention.From:http://blog.xdxie.net 37