node.js 08 代码创建 http 静态web服务器

之前已经介绍了 和 ,这为介绍本篇打下了基础。

首先我们会介绍http静态web服务器需要实现哪些需求,接下来我们会从node.js出发,介绍所需要的模块。


http


http静态web服务器

这里的http静态服务器是指创建静态网站,并且通过node.js创建静态web服务器来向客户端提供服务。一个静态web服务器的例子就是Apache,只需要把网站相关的html,css,javascript,jpg等静态资源放到Apache的目录下,只需要访问主机名就可以显示网页了。

这里面我们可以看到,静态网站资源包括:

html文件css文件javascript文件

实际情况是,除了这三类主要文件,大部分网站资源还包括图片文件,音频文件,压缩文件,字体文件等等。

而静态网站的web服务器需要提供

http服务,可以对于客户端提交的http请求,返回静态页面以及静态页面所需要使用的资源
。假设需要访问index.html页面,那么该页面中使用到的图片文件,css风格文件,javascript文件都需要返回给客户端的浏览器用以展示。如果在程序中只返回了html文件,那么浏览器将无法显示关联的图片,响应的css效果,javascript效果也无法展示。http端口,用于监听客户端提交的http请求,上面Apache使用的就是80端口。各个web服务器都支持端口的配置,那我们node.js也不例外,可以在程序中实现状态码:对于每一个客户端请求,在返回页面的同时,web服务器会返回一个状态码。请求处理成功的状态码是 200,而 404 则表示访问的文件或者资源不存在。

HTTP Header 中的 Content-Type


http header

上图是访问某网站时的http response header。我们可以看到这次的 状态码 status code 是 200,表示请求处理成功。在返回的 response headers 里面有一个Content-Type,这里面的值是"text/html;charset=utf-8"。

text/html:表示返回页面的格式是html,页面在浏览器中以html的形式显示。charset: 返回页面的字符集

有时候返回页面的格式如果是"text/plain",表示页面将以纯本文的形式来展示。

这些格式统称为 MIME (Multipurpose Internet Mail Extensions) 是描述消息内容类型的因特网标准。

根据不同文件类型,需要在http headers中的Content-Type里面写入对应的值。

具体可以在node.js中定义一个常量,通过键值对的方式根据文件后缀名来获得Content-Type。

<code>const mimeType = {
'.ico': 'image/x-icon',
'.html': 'text/html',
'.js': 'text/javascript',
'.json': 'application/json',
'.css': 'text/css',
'.png': 'image/png',
'.jpg': 'image/jpeg',
'.wav': 'audio/wav',
'.mp3': 'audio/mpeg',
'.svg': 'image/svg+xml',
'.pdf': 'application/pdf',
'.zip': 'application/zip',
'.doc': 'application/msword',
'.eot': 'application/vnd.ms-fontobject',
'.ttf': 'application/x-font-ttf',
};/<code>

上面的代码基本可以满足一个静态网站所需要的资源类型的定义。

代码逻辑以及实现

通过node.js 创建http server,详见 解析url通过访问路径判断文件或者目录是否存在,如果不存在,则返回错误状态码 404如果访问路径为目录,则返回文件路径index.html根据请求路径在response中写入文件内容,同时根据资源类型设定Conten-type。

上面逻辑中所有跟文件处理,目录处理相关的代码都需要通过node.js中的fs模块的调用来实现,详见 。

具体代码段如下:

<code>http.createServer(function (req, res) {
// 调用url模块来解析访问的url
const parsedUrl = url.parse(req.url);

// 提取路径
const sPath = path.normalize(parsedUrl.pathname).replace(/^(\\.\\.[\\/\\\\])+/, '');
let pathname = path.join(__dirname, sPath);
//判断路径是否存在
fs.exists(pathname, function (exist) {
if(!exist) {
//如果路径不存在,则返回404
res.statusCode = 404;
res.end(`File ${pathname} not found!`);
return;
}

// 如果路径是目录,则将路径替换为目录下的 index.html
if (fs.statSync(pathname).isDirectory()) {
pathname += '/index.html';
}

// 根据路径读取文件,此处调用fs模块方法
fs.readFile(pathname, function(err, data){
if(err){
res.statusCode = 500;
res.end(`Error getting the file: ${err}.`);
} else {
// 获取路径后缀名
const ext = path.parse(pathname).ext;
// 根据后缀名获取响应的content-type; 这里的minType定义见上面的代码块


res.setHeader('Content-type', mimeType[ext] || 'text/plain' );
//通过end方法来结束response
res.end(data);
}
});
});
//提供http端口监听
}).listen(8001);/<code>

这样一个http静态web服务器的代码就完成了,非常轻便,跟很多语言比起来,可谓是很精悍了。

如果需要完整的代码,烦请关注本号并留言。