註：本文節錄自「Node.js & HTML5 開發思惟與入門學習」一書，並原文重現。 本章的目標，是提昇初學者的開發功力。經過前面 4 個章節的介紹，學習到許多基本觀念與技術。接下來，將從三個不同的層面，深化目前所學到的觀念與技術： JavaScript 語言 Web Service 架構 Node.js 觀念 本章先從 JavaScript 語言開始。JavaScript 最重要的觀念是 Closure，這可以說是 JavaScript 初學者的第 1 堂。Closure 與暱名函數有很緊密的關係，這要由 Lambda 的觀念開始講起。 Lambda Lambda（λ）是一個希臘字母（Λ 是它的大寫字母），用來表示許多觀念： 物理學家用來表示波長的符號 數學家用來表示空字串的符號 電腦科學家用來表示暱名函數（Anonymous Function）的符號 Lambda 在電腦科學領域，用來表示暱名函數，目的是進行運算。為了尋找一個語法簡易的運算表示方式，電腦科學家會這麼做。 Step 1：取得一個具名的函數 例如一個加法函數： sum(x)...

本文章採用 Markdown 語法撰寫，若無法閱讀內文（why?），請點擊這裡。 Express.js 的 Middlware 分為二個部份：所有 URL 與特定 URL。要了解 Middlware 的觀念，最快的方法就是實作「頁面保護」的功能。現在，讓我們為 '/hello' URL 加上密碼 '123456' 的保護。 ## 使用 *app.get()* 撰寫 Middlware 針對特定 URL 加入 Middleware，必須透過 *app.get()* 函數的第二個參數。實作步驟如下。 ### Step 1：加入 Middleware 延續上一章的範例，為 '/hello' 加入一個 Middleware： ``` app.get('/hello', function (req,...

本文章採用 Markdown 語法撰寫（why?），若無法閱讀內文，請點擊這裡。 ## Node.js 入門, #1：Hello World Node.js 並不是使用於 Client-side，它使用於 Server-side。有關 Node.js 的說明，可參考 Node.js 官方網站。在繼續進行範例說明前，請先備妥這份文件： http://nodejs.org/api/ 另外，也請參考 Node.js 官方網站的說明，來安裝 Node.js 環境。關於環境安裝，以及 Node.js 的入門觀念，可參考由 MokoVersity 所提供的免費線上課程： http://www.mokoversity.com/course/html5/nodejs-overview ## 取得範例 本文所撰寫的 Node.js 程式碼，皆可在 Github 上取得： https://github.com/jollen/html5-websocket-nodejs 接下來，讓我們用一個連貫性的實例：即時通訊軟體，來為大家介紹 Node.js 技術。 ## 第一個...

本文章採用 Markdown 語法撰寫（why?），若無法閱讀內文，請點擊這裡。 ## 製作 Node.js 模組 學習 Node.js 的第一件事情，就是了解如何將程式碼模組化，簡單來說，就是製作一個程式庫 Node.js 的模組隱含著 Closure 的特性。 JavaScript 比較講求模組化，所以我們重構 hello.js。先將 Web Server 的部份獨立成一個模組，程式碼規劃如下： - index.js：主程式 - server.js：啟動Web server的模組 index.js的完整程式碼如下： ``` // 02-modules/hello.js var server = require("./server"); server.start(); ``` 主程式的部份，以 require() 函數將 server 模組（即...

本文章採用 Markdown 語法撰寫（why?），若無法閱讀內文，請點擊這裡。 Bootstrap 是一個廣受歡迎的 CSS Framework，它有現成的 Grid System 可以支援 Responsive Web Design（RWD）網頁製作。Responsive Web Design是製作多屏（Multi-Device）網頁的技術，RWD 能讓網頁同時在 PC、平板與手機等不同的 Screen 上顯示。 一些 App 開發者，會以 HTML5 的技術來製作 App。除了直接撰寫 Media Query 外，利用像是 Bootstrap 這樣的 CSS Framework 也大有人在。現在，HTML5 App 開發者又多了另外一個選擇了：[Web Starter Kit](https://developers.google.com/web/starter-kit/)。Web Starter Kit 是...

本文章採用 Markdown 語法撰寫（why?），若無法閱讀內文，請點擊這裡。 本文介紹 Web Starter Kit 的入門第一步：簡單認識開發環境，並開始修改第一個 Web App。首先，必須根據 [Web Starter Kit](https://developers.google.com/web/fundamentals/tools/setup/setup_kit#install-tooling) 官方網站上的說明，安裝 Web Starter Kit 所需的開發環境。 從架構面來看，Web Starter Kit 提供二個環境： * Node.js 的 Runtime * 一套 Web App 的 HTML5 文件（ Mobile-optimized HTML 模板與 CSS 定義） Web Starter...

本文章採用 Markdown 語法撰寫（why?），若無法閱讀內文，請點擊這裡。 延續前二篇文章的範例，接著介紹 Node.js 最基本也最重要的觀念－URL Routing。範例網址：https://github.com/jollen/html5-websocket-nodejs ## URL Routing 這是處理 URL（HTTP Request）與 Query String 的核心觀念，這是利用 Node.js 開發 Web Service 的重要步驟。讓我們先來了解 Routing 的寫法，再來探討它的觀念。 首先，先改寫 server.js 模組如下： ``` // 03-route/server.js 1 var http = require("http"); 2 var url = require("url"); 3...

本文章採用 Markdown 語法撰寫（why?），若無法閱讀內文，請點擊這裡。 ## 設計 HTTP API 完整的 NoChat 分為二個部份： - Backend（Server-side）將基於目前的 Node.js 程式碼繼續完善 - Frontend（Client-side）手機端的 App 將以 HTML5 + PhoneGap 來製作 NoChat 提供二個API，現在將 API 詳細定義如下。 - /start，建立與 Client 的 WebSocket 連線 - /send，送出訊息。 '/send' API 的 Query String 參數定義如表...

本文章採用 Markdown 語法撰寫（why?），若無法閱讀內文，請點擊這裡。 ## 解析 Query String Client 端呼叫 Server 所提供的 Web Service API。所以，現在的關鍵是如何解析 Query String。如圖 2.2，Node.js 使用 querystring 模組來解析 Query String。先將 querystring 模組匯入，接著呼叫 parse() 函數： ``` var querystring = require('querystring'); var parsedstring = querystring.parse(“m=helll&u=jollen”); ``` 解析後的結果存放於 parsedstring 物件，回傳結果： ```...

本文章採用 Markdown 語法撰寫（why?），若無法閱讀內文，請點擊這裡。 ## 認識 WebSocket WebSocket 是 HTML5 裡的一個標準，它是一種 TCP/IP 的連線技術。在協定部份，則是基於 HTTP（Over HTTP）協定。因此，WebSocket 標準定義了一些 HTTP Headers 來進行 Client/Server 的通訊。 WebSocket 分為 Client 端與 Server 端二個部份，本章要介紹的是利用 Node.js 技術，來開發 WebSocket Server。 目前有許多現成的 Node.js WebSocket 模組可使用，實作時，我們就不必自行處理複雜的 WebSocket 協定問題。 ## 安裝 WebSocket 模組...

本文章採用 Markdown 語法撰寫（why?），若無法閱讀內文，請點擊這裡。 ## 儲存用戶端 WebSocket 連線 要儲存所有的用戶端 WebSocket 連線，最簡便的方式是使用 Global Array： ``` // Connected WebSocket clients var clients = []; ``` 當用戶端與 Node.js 建立連線時，將會回呼上述提及的 onWsRequest() 函數。所以，儲存連線的程式碼，應該添加至這個地方。繼續加入程式碼如下： ``` function onWsRequest(request) { var connection = request.accept('echo-protocol', request.origin); console.log("WebSocket connection accepted."); //...

本文章採用 Markdown 語法撰寫（why?），若無法閱讀內文，請點擊這裡。 ## Web-Oriented Architect Web 導向架構（WOA, Web-Oriented Architect）著重幾個觀念： - Device-Server 設計模式 - Device 端使用 Browser，以 Browser 做為執行環境（Runtime） - Server 端提供 APIs，即 PaaS 概念 - Device-Server 採用非同步通訊（Asynchronous communication） 事實上，非同步通訊大家都使用過，就是 AJAX；AJAX 的第一個 A 就是 Asynchronous。但是考量 Server 端的負載（Loading），以及百萬連線（Millions requests）等級的處理能力需求，應該儘量少用 AJAX 機制。這就是...

本文章採用 Markdown 語法撰寫（why?），若無法閱讀內文，請點擊這裡。 ## 學習 JSON 格式 思考將要製作的 NoChat 聊天室範例，Server 要把收到的訊息，Push 給所有的 Client 端。Server 與 Client 所使用的標準資料交換格式，就是 JSON。如何把訊息打包成 JSON 格式？方式非常簡單。以表 2 為例，要將這個資料表，撰寫為 JSON 格式，只需要二個步驟： ## Step 1：以 JavaScript 物件表示一筆資料 例如，第一筆個人資料，以 JavaScript 物件來表示的話，只要用 *var* 來宣告此物件即可： ~~~~~~~~ var obj = { "name":...

本文章採用 Markdown 語法撰寫（why?），若無法閱讀內文，請點擊這裡。 ## JSON Stringify 請注意，上述的 JSON 是一個型別（Type），是一個 Array Type。我們不能儲存或傳送「Type」，所以要將 Type 轉成字串（String）後，才能儲存或傳送。例如，對電腦來說，這是一個物件（Object）： ``` { "name": "James" } ``` 我們把這個物件轉成字串： ``` "{ \"name\": \"James\" }"" ``` 對電腦來說，這才是字串。所以，將 JSON 物件（Object）轉成字串後，才能儲存或傳送。這個動作就叫 JSON Stringify（字串化）。當然，字串化過的 JSON 字串，要使用時，也要解析（Parse）回物件。 在 Node.js 裡如何做 JSON Stringify 呢？只要呼叫 JSON.stringify()...

這幾天因為專案需要，開始將線上支付的金流平臺，從 Paypal 轉移到 Pay2go... 本文章採用 Markdown 語法撰寫（why?），若無法完整閱讀全文，請點擊這裡。 ## 前言 這幾天因為專案需要，開始將線上支付的金流平臺，從 Paypal 轉移到 Pay2go。要串接 Pay2go 金流平台是一個很簡單的工作，API 文件也很完整。在實作前端與後端的過程中，發現有一些應該要注意的事項，紀錄如下。 ## 關於 MPG 參數 由於 Pay2go 是以 Form Post（HTML5 的 ``````）的方式提交付款請求，所以必須使用 `````` 來紀錄交易參數，如圖一。  圖一：MPG API 一個稱為 ```CheckValue``` 的參數，編碼規則如下： ```js var...