Node.js應用之靜態檔案分發器

我不久之前翻譯過一篇文章：

asp.net使用httphandler打包多CSS或JS檔案以加快頁面載入速度

採用打包並壓縮和在瀏覽器與用戶端同時構建緩衝的技術，來對頁面的載入進行最佳化。最近在學習Node.js，下面我們來看看Node.js在這方面能做些什麼。

 

Node.js的優勢是網路通訊、I/O不阻塞，可見它是高並發需求的有效解決方案。在Web開發中有許多檔案是靜態檔案，例如CSS檔案、JS檔案。對它們的請求，通常是頁面載入到用戶端後，瀏覽器重新發出的非同步請求。通常Web伺服器能處理的並發請求是有限的，對於大的應用來講，動態網頁面的並發請求可能已經足夠多了。何不利用好Node.js的服務端優勢，給Web伺服器減輕一點負擔呢？

下面，我通過測試來，驗證該方案是否可行。

首先，我們構建網站(asp.net)。

檔案清單：

一個測試頁面	Default.aspx
一個樣式表檔案	StyleSheet.css
一個Javascript檔案	Jscript.js(實現動態改變節點常值內容

頁面內容：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %></p><p><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></p><p><html xmlns="http://www.w3.org/1999/xhtml"><br /><head runat="server"><br /> <title></title><br /> <!--通常的請求方式--><br /> <link rel="Stylesheet" href="StyleSheet.css" /><br /> <script type="text/javascript" src="JScript.js"></script><br /></head><br /><body><br /> <form id="form1" runat="server"><br /> <div><br /> <p class="a">This is a test Page.</p><br /> <p class="b" id="hw">Hello world!</p><br /> <input type="button" id="testBtn" onclick="test.change();" value="change innerText" /><br /> </div><br /> </form><br /></body><br /></html><br />

上面是我們通常的做法，這些請求通常也是被Web伺服器首先接管，然後進一步處理（這裡不做討論）。

運行效果：

CSS效果：

JS效果，點擊按鈕之後：

點擊按鈕，可以切換第二個P標籤內容（這裡也主要是說明JS檔案是有效並能被訪問的）

而，採用Node.js我們就可以不必將這些靜態檔案的請求交給Web伺服器來處理，可以讓其交給另外一個Node.js建立的http伺服器來處理（通過將請求該Http伺服器正在監聽的那個連接埠）。

採用Node.js檔案的請求方式：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %></p><p><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></p><p><html xmlns="http://www.w3.org/1999/xhtml"><br /><head runat="server"><br /> <title></title><br /> <!--通常的請求方式--><br /> <%--<link rel="Stylesheet" href="StyleSheet.css" /><br /> <script type="text/javascript" src="JScript.js"></script>--%></p><p> <!--Node.js的請求方式--><br /> <link rel="Stylesheet" href="http://localhost:8080/StyleSheet.css" /><br /> <script type="text/javascript" src="http://localhost:8080/JScript.js"></script></p><p></head><br /><body><br /> <form id="form1" runat="server"><br /> <div><br /> <p class="a">This is a test Page.</p><br /> <p class="b" id="hw">Hello world!</p><br /> <input type="button" id="testBtn" onclick="test.change();" value="change innerText" /><br /> </div><br /> </form><br /></body><br /></html><br />

當然，這隻是用戶端的請求方式，光有這些是不夠的。下面我們需要構建服務端的處理邏輯：

(1)    在Cygwin根目錄下建立一個test.js檔案；

(2)    裡面鍵入如下JS：

var sys=require("sys"),<br />http=require("http"),<br />url=require("url"),<br />path=require("path"),<br />fs=require("fs");<br />http.createServer(function(request,response){<br />var uri=url.parse(request.url).pathname;<br />var filename=path.join(__dirname,uri);<br />path.exists(filename,function(exists){<br />if(!exists){<br />response.writeHead(404,{"Content-Type":"text/plain"});<br />response.write("404 Not Found\n");<br />response.end();<br />return;<br />}</p><p>fs.readFile(filename,"binary",function(err,file){<br />if(err){<br />response.writeHead(500,{"Content-Type":"text/plain"});<br />response.write(err+"\n");<br />response.end();<br />return;<br />}</p><p>response.writeHead(200);<br />response.write(file,"binary");<br />response.end();<br />});<br />});<br />}).listen(8080);</p><p>sys.puts("Server running at http://localhost:8080/");

(3)    運行Cygwin，鍵入命令：node /test.js

可以看到，http伺服器已經構建完成：

接下來，我們就可以讓它處理用戶端請求了。它會根據，請求的檔案結合路徑，到檔案系統中尋找檔案並響應到用戶端。

頁面效果：

可以看到效果和普通做法是一樣的。

很顯然，Node.js能夠很輕鬆地完成這些事情，I/O與通訊無阻塞是它的優勢。並且它對檔案的讀取可以是非同步。非同步與基於事件驅動一直都是JS的優勢。

該例子只是列舉了擷取JS、CSS這些檔案，其實只要是那些靜態檔案，都可以切換成這種請求方式。當然這個例子並不能作為商業應用的部署方案，這隻是一種可行性驗證，但很明顯它確實是一種方案，只是還有很多問題需要考慮，例如，構建緩衝以提高效率，檔案壓縮問題，加密問題，分布式架構下檔案結構訪問，Node.js服務端安全的問題等等。

但作為一個興起的技術，我相信它會慢慢完善的。

最近正在學習Node.js有興趣的童鞋可以多多交流~

mailto:yanghua1127@gmail.com