20141211 node.js入門，學習歷程 pt.1

文章過長止於Node入門 » 如何來進行請求的 "路由"，接著請由20141215 node.js入門，學習歷程 pt.2繼續。標題改變：node.js初體驗，成功連到其他電腦 → node.js入門，學習歷程 pt.1。

最後更新於12/15。

學習資源：

晚上讀了CCC生活札記: Node.js入門初探這篇文章(已完成)，他推薦讀Node入門 » 一本全面的Node.js教學課程這篇文章當作node.js的入門

閒暇之餘又找了幾篇node.js的參考資料

• node.js教學－建立一個HTTP伺服器 | 電腦故我在
• node.js教學－利用Express來寫HTTP伺服器 | 電腦故我在
• Node.js 初體驗、基礎的HTTP伺服器建立 « I try | MarsW  (10:24，reading中，只看幾頁就吸住我的目光)
• Node.js - 纪争光 - 博客频道 - CSDN.NET
• [NodeJS] 第一次 node 就上手
• [NodeJS] 第一次 Node 就上手 Part 2
• Node & js 學習筆記  |  Facebook社團
• node.js 基本教學 | DreamersLab
• [Node.js]讓 NodeJS 程式 永遠不停止 - forever @ 賽拉維的秋天 :: 痞客邦 PIXNET
• Learning Node.js - 基本 Http Server 建置 « Excelsior
• Jollen's Blog :: Node.js & RESTful所有文章
• 用node.js寫一個BBS出來吧！ | 電腦故我在
• [Node.js]利用Node.js建立http server | 佛祖球球

找到一個node.js的投影片，旁邊還有幾個投影片可以看

• NodeJS基礎教學&簡介

在使用 Node.js 與 Socket.IO 建立即時性（Realtime）網頁應用程式 App - G. T. Wang有詳細的解釋每行code的由來

兩篇io socket的文章

• 使用 Node.js 與 Socket.IO 建立即時性（Realtime）網頁應用程式 App - G. T. Wang
• 透過 socket.io 來建立協同合作的電子白板

搜尋一些three.js與io socket相關的資料，下關鍵字：iosocket threejs - Google 搜尋，找到Real Time Multiplayer in HTML5 - Build New Games這篇文章之外，在GitHub上看到有io socket與three.js相關的code

• threejs-sockets/client.html at master · abepetrillo/threejs-sockets · GitHub

關於NPM

• Java is always EExcellent: NodeJS 教學 - NPM 介紹(1)

學習開始：

現在先閱讀CCC生活札記: Node.js入門初探這篇文章，嚴格說來，Node.js是一個「JavaScript執行平台」，這篇沒什麼內容，但是作者推薦讀Node入門 » 一本全面的Node.js教學課程這篇文章當作node.js的入門，所以我們開始吧。

Node入門 一些文字紀錄

• JavaScript是一門 "完整" 的語言： 它可以使用在不同的上下文中，其能力與其他同類語言相比有過之而無不及。
• Node.js事實上就是另外一種上下文，它允許在後端（脫離瀏覽器環境）運行JavaScript代碼。
• Node.js事實上既是一個運行時環境，同時又是一個函式庫。

這篇有推薦Felix Geisendörfer的大作Understanding node.js，它介紹了一些背景知識，有空可以來讀讀。  (尚未閱讀)

• 一切都歸結於 "Node.js是事件驅動的" 這一事實。

Node入門 這篇讀到"以事件驅動"這論述時，就發現自己不是很懂估狗找到Node.js 初體驗、基礎的HTTP伺服器建立 « I try | MarsW這slide，slide的p8的內容真的太正了，以泡麵、接電話、蹲廁所完美解釋為何node.js是事件導向

(以下2014/12/12新增)
Node.js 初體驗這slide的p10有著以下對node.js的描述：JavaScript的後端語言、non-blocking、event-driven、high concurrency，在p12除了提到已經久仰大名已久的Real time應用：i.o socket之外，還聽到一個新名詞：社群支援 NPM。不知道npm是什麼，這slide的p18提到NodeJS在0.6.3版本開始內建NPM，不需要再另外裝了，辜狗看到一篇2014年的還滿新的文章Java is always EExcellent: NodeJS 教學 - NPM 介紹(1)在此先備份 (尚未閱讀)。快速瀏覽到p36，有許多有用的資源網址，像是推薦了Node.js Taiwan 社群協作中文電子書的GitHub，可惜的是裡面的連結沒有任何東西開的起來，另外他推薦了DreamersLab | No Boundaries No Limitation，看了一下他的文章，最後一篇文章停留在2012，似乎許久沒更新了，在此備份以後也許可以看到一些不錯的參考資料。

新技巧      ，核心文章配色，這篇文章是現在要學習的重點，發現自己這篇讀不懂找其他篇文章輔佐學習，相同的練習技巧請見20141030 今日學習。

現在，我們回到Node入門 » 一本全面的Node.js教學課程來吧，根據進度是到基於事件驅動的回呼(callback)這邊。這節略讀後還是覺得自己有讀跟沒讀一樣的感覺，換讀node.js教學－建立一個HTTP伺服器 | 電腦故我在這篇文章，原來node.js自己就是一個伺服器，電腦故我在的這教學太優秀了，先前讀Node入門 只是照著code打，不知code在幹嘛，在閱讀這篇時也提到一個關鍵字啟動終端機，一直在想要怎麼讓我的server開啟，讓寫的網頁能從其他電腦連過來，接著辜狗找到node.js速度大評測 | 電腦故我在這篇，有提到以前寫JAVA時曾用過的Apache (又想起該死的湯姆貓，那時搞死我了)，以及用node.js寫一個BBS出來吧！ | 電腦故我在，找到另一篇2012的教學[Node.js]利用Node.js建立http server | 佛祖球球，另外又發現電腦故我在內建的搜尋有很多資料。

一直不知道伺服器到底有沒有開啟成功，於是用WebStorm開D:\work\JavaScript\loading_img\server.js來測試，一開始用Node入門 » 基於事件驅動的callback裡的第二個paradigm，在chrome裡鍵入http://localhost:8888/，在自己的電腦測試成功。

接著用實驗室裡的電腦測試

接著把印出的字改掉，自己電腦上測試

接著用實驗室裡的電腦測試

成功從其他電腦連到伺服器的網頁，真的超爽DER，但是我總不可能每次要開伺服器就把WebStorm一直開在那邊，所以我必須要不開任何complier，讓我的電腦去啟動server，執行D:\work\JavaScript\loading_img\server.js這樣，更改loading_img folder的路徑，存放於D:\work\JavaScript\NodeJsPractice\loading_img，找了老半天找到Learning Node.js - 基本 Http Server 建置 « Excelsior這篇，這篇就是我要的，開啟cmd，然後到server.js所在的資料夾下，鍵入：node server.js。cmd的指令?     server開啟後要如何關閉?

如何操作npm指令，找了老半天看到這段影片終於知道怎麼用了

(以下2014/12/13新增)
新技巧     ，學習成功圖示，代表自己真正完成一個小步驟，告訴自己自己很棒 ^_^，其Color Hex是#1ffc64，操作法：在span tag下，style="background-color: #1ffc64;。

看昨晚找到的How to install Node.JS and setup npm (Node Package Manager) - YouTube來操作npm，但是實際安裝時卻一直失敗，一直出現下面這行字

後來辜狗找到Node.js/Windows error: ENOENT, stat 'C:\Users\RT\AppData\Roaming\npm' - Stack Overflow這篇文章，按照文章做法，在C:\Users\Administrator\AppData\Roaming下新增了npm資料夾(folder)，參照使用 Node.js 與 Socket.IO 建立即時性（Realtime）網頁應用程式 App - G. T. Wang這篇文章，終於成功安裝Socket.IO，也參考了node.js教學－利用Express來寫HTTP伺服器 | 電腦故我在這篇，安裝了Express模組。

現在在讀Node入門 » 進行函數傳遞這節，又再讀了一次JavaScript的function可以當variable放在另一個function的parameter這樣的概念，這邊的解釋真的非常好。

再度閱讀基於事件驅動的callback這節，實做在D:\work\JavaScript\NodeJsPractice\Server.js，一開始的時候我是用最早看到的寫法，把callback function寫在http.createServer()裡，請見ex.2 self different test，接著再去用http://localhost:8888/去讀它，成功看到Request received.

但是詭異的是，我寫的那段文字"holla, this is your boy"被載了下來，而且要用筆記本才開的起來。

後來改用文章的寫法，請見ex.2 same，變成直接在chrome中開啟

但是詭異的是，我拜訪了兩次，照理來說Request received.應該只會show兩次啊，怎麼變成show四次了 =..=。

還不清楚原因，現在先擱著。繼續閱讀伺服器是如何處理請求的這節，看到兩個關鍵字：HTTP頭、HTTP狀態。首先找到The Will Will Web | 網頁開發人員應了解的 HTTP 狀態碼這篇文章，原來HTTP 200 代表網頁正常、404 代表找不到網頁，HTTP 狀態碼指的是從伺服器端回應(HTTP Response)的狀態，1xx - 參考資訊 (Informational)、2xx - 成功 (OK)、3xx - 重新導向 (Redirection)、4xx - 用戶端錯誤 (Client Error)、5xx - 伺服器錯誤 (Server Error)，若想知道數字的精確意義，請見這篇文章。HTTP頭，原文是HTTP Header，其他關鍵字是：Http 標頭參照，找到Http Header入門 | CCNP 筆記本這篇文章，感覺還不錯，不過尚未詳讀。

新技巧     ，告訴這很重要但是我還沒去學習 ，這篇學習完後要回過頭來學習它，完成後用線劃掉，其Color Hex是#ff6666。

接著讀伺服器端的模組放在哪裡這節，無論是範例的寫法還是自定義的寫法，成功把Server.js變成可以用的module了，實做在D:\work\JavaScript\NodeJsPractice\Server.js，這節也提到，要開啟index.js要用node index.js，但是我還不懂這要如何用。

(以下2014/12/14新增)

新技巧     ，很重要的預備知識，以前不知道，現在準備要來學習，完成後用線劃掉，其Color Hex是#43e8d8。

對於不同的URL請求，伺服器應該有不同的反應，處理不同的HTTP請求在我們的代碼中是一個不同的部分，叫做 "路由選擇" ，接著要讀如何來進行請求的 "路由"這節。一開始就遇到問題路由是什麼？GET、POST這怎麼好耳熟？

由於不懂路由是什麼玩意，所以辜狗找到鳥哥的 Linux 私房菜 -- Linux 常用網路指令介紹這篇文章，裡面的5.1.2 路由修改： route，提到

• 兩部主機之間一定要有路由才能夠互通 TCP/IP 的協定，否則就無法進行連線

路由追蹤/所謂的路由是什麼意思？ - 實用查詢這篇文章對路油的定義

•  route，路由是把資訊從源穿過網路傳遞到目的地的行為，在路上，至少遇到一個中間節點。路由包含兩個基本的動作：確定最佳路徑和通過網路傳輸資訊。

OK，現在已經對route有稍微概念後，再來是GET、POST，辜狗找到HTML 表單中 GET 與 POST 的用法差異 - Wibibi這篇文章，對於GET、POST有著下面這去破題

• 無論是 GET 或 POST 都可以傳遞資料，但兩者在應用方面需要做選擇

	GET	POST
網址差異	網址會帶有 HTML Form 表單的參數與資料。	資料傳遞時，網址並不會改變。
資料傳遞量	由於是透過 URL 帶資料，所以有長度限制。	由於不透過 URL 帶參數，所以不受限於 URL 長度限制。
安全性	表單參數與填寫內容可在 URL 看到。	透過 HTTP Request 方式，故參數與填寫內容不會顯示於 URL。

• 一般的表單可以用 GET 直接傳遞，而需要保密的資料必須用 POST 來處理，像是帳號密碼

現在我們終於可以來讀如何來進行請求的 "路由"這節，onRequest()的第一個參數request進行參數傳遞，但是為了解析這些資料，需導入新的Node.JS模組，它們分別是url和querystring模組。繼續讀後發現它缺了太多背景知識，必須找其他資料來學習NodeJS裡的url和querystring模組，學了一個新單字，parse 解析。

在如何來進行請求的 "路由"這節看不太懂的圖片，辜狗找到Node.js 入門, #3：URL Routing 觀念與實作這篇，它的圖片示意清楚多了，所以先閱讀這篇。在閱讀這篇文章之前，可以先閱讀[Nodejs]学习笔记四：路径（URL,Path,QueryString）相关操作 - Mozlite這篇文章，裡頭介紹了許多專有名詞，在此摘錄部分我覺得重要的

• href: 整個URL地址字符串，不過在nodejs中已經將協議字符串和域名字符串轉換為小寫。如：'http://user:pass@host.com:8080/p/a/t/h?query=string#hash'
• protocol: 請求協議字符串，如："http:"，小寫字符串
• port: 端口，如： '8080'
• host: 主機域名，包含端口的小寫字符串，如： 'host.com:8080'
• hostname: 主機域名，小寫字符串，如： 'host.com'
• pathname: 文件路徑，查詢字符串之前，域名端口之後的字符串，以“/”開頭，如： '/p/a/t/h'
• sea​​rch: 查詢字符串，包含“?”，如： '?query=string'
• path: 包含文件路徑和查詢字符串，如：'/p/a/t/h?query=string'
• query: 查詢字符串鍵值對字符串或JSON對象，如：'query=string' or {'query':'string'}

這篇也有提到，querystring.parse()是根據“&”和“=”將字符串進行分割，反序列化為JSON object，有了這些知識後，我們可以來閱讀URL Routing 觀念與實作這篇文章。

URL Routing 觀念與實作這篇提到另一個有趣的概念Node.js 的軟體架構，主軸是模組化，即 Component-based 軟體工程的觀念，對於 Pathname 與 Query String 的解析也很清楚，請見下圖。

讀這篇時發現件有趣的事，寫後端時通常會用個獨立的index.js然後讓你去讀你寫好的module像是server.js或是router.js，而且server.js、router.js都會個別export成module讓你可以用require去讀到這些modules，這篇接著提到Request Handler這概念，缺了背景知識，辜狗發現作者jollen在他第一篇NodeJS的教學Node.js 入門, #1：Hello World有提到這關鍵字，所以先來閱讀這篇。

這篇提到有趣的概念，先前我們學習時總說http.createServer()裡放的是callback function，onRequest()，不過在這篇我們可以把以前學過的onRequest()當作是我們Server的request listener，用來監聽誰來訪問我們的Server，http.createServer([requestListener])，requestListener 是一個 Request Handler Function，用來處理 request 事件。

現在我已經知道jollen所說的Request Handler不過就是個拿來監聽用的callback function，接著我們回到URL Routing 觀念與實作這篇，後來發現他把requestHandlers.js的定義放在這篇文章的最下面 =..=，這篇很快就能瀏覽完了。

現在我們終於能回到如何來進行請求的 "路由"這節，閱讀與理解已經比第一次碰到這主題時順暢許多了，瞬間秒懂，coding的部分只能留待明天12/15實做了。，已經於12/15下午3:16實作完成，請見D:\work\JavaScript\NodeJsPractice\index.js裡的ex.4。

(以下2014/12/15新增)
實作時遇到一個小粗心，在此紀錄一下。一開始寫完後run時，於chrome裡鍵入http://localhost:8888/後無法顯示網頁，WebStorm顯示有Bug

IDE說我的route為定義，在server的onRequest function，於是我們去檢查server.js發現，onRequest裡的route顏色沒有改變，未被調用到。

後來想起，我們在index.js裡頭是寫server.start(router.route)，start()裡有parameter，如上圖所示，我在server.js裡的start()未給它放parameter，這樣我的index.js裡要用server.start(router.route)時start()裡的參數就不知要放在哪了，所以修改如下

下一節Node入門 » 行為驅動執行開始，由20141215 node.js入門，學習歷程 pt.2繼續。

(以上2014/12/12、12/13、12/14新增)