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" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;

<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head runat="server">
<title></title>
<!–通常的请求方式–>
<link rel="Stylesheet" href="StyleSheet.css" />
<script type="text/javascript" src="JScript.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<p class="a">This is a test Page.</p>
<p class="b" id="hw">Hello world!</p>
<input type="button" id="testBtn" onclick="test.change();" value="change innerText" />
</div>
</form>
</body>
</html>


上面是我们通常的做法,这些请求通常也是被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" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;

<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head runat="server">
<title></title>
<!–通常的请求方式–>
<%–<link rel="Stylesheet" href="StyleSheet.css" />
<script type="text/javascript" src="JScript.js"></script>–%>

<!–Node.js的请求方式–>
<link rel="Stylesheet" href="http://localhost:8080/StyleSheet.css&quot; />
<script type="text/javascript" src="http://localhost:8080/JScript.js"></script&gt;

</head>
<body>
<form id="form1" runat="server">
<div>
<p class="a">This is a test Page.</p>
<p class="b" id="hw">Hello world!</p>
<input type="button" id="testBtn" onclick="test.change();" value="change innerText" />
</div>
</form>
</body>
</html>


当然,这只是客户端的请求方式,光有这些是不够的。下面我们需要构建服务端的处理逻辑:

(1)    在Cygwin根目录下创建一个test.js文件;

(2)    里面键入如下JS:

var sys=require("sys"),
http=require("http"),
url=require("url"),
path=require("path"),
fs=require("fs");
http.createServer(function(request,response){
var uri=url.parse(request.url).pathname;
var filename=path.join(__dirname,uri);
path.exists(filename,function(exists){
if(!exists){
response.writeHead(404,{"Content-Type":"text/plain"});
response.write("404 Not Found\n");
response.end();
return;
}

fs.readFile(filename,"binary",function(err,file){
if(err){
response.writeHead(500,{"Content-Type":"text/plain"});
response.write(err+"\n");
response.end();
return;
}

response.writeHead(200);
response.write(file,"binary");
response.end();
});
});
}).listen(8080);

sys.puts("Server running at http://localhost:8080/&quot;);


(3)    运行Cygwin,键入命令:node /test.js

可以看到,http服务器已经构建完成:



接下来,我们就可以让它处理客户端请求了。它会根据,请求的文件结合路径,到文件系统中查找文件并响应到客户端。

页面效果:





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

很显然,Node.js能够很轻松地完成这些事情,I/O与通信无阻塞是它的优势。并且它对文件的读取可以是异步的。异步与基于事件驱动一直都是JS的优势。

该例子只是列举了获取JS、CSS这些文件,其实只要是那些静态文件,都可以切换成这种请求方式。当然这个例子并不能作为商业应用的部署方案,这只是一种可行性验证,但很明显它确实是一种方案,只是还有很多问题需要考虑,例如,构建缓存以提高效率,文件压缩问题,加密问题,分布式架构下文件结构访问,Node.js服务端安全的问题等等。

但作为一个兴起的技术,我相信它会慢慢完善的。

最近正在学习Node.js有兴趣的童鞋可以多多交流~

mailto:yanghua1127@gmail.com



版权声明:本文为博主原创文章,未经博主允许不得转载。