用Node提供静态文件服务的方法


Posted in Javascript onJuly 06, 2018

前言

对于一个web应用,提供静态文件(CSS、JavaScript、图片)服务常常是必须的。本文将介绍如何做一个自己的静态文件服务器。

创建一个静态文件服务器

每个静态文件服务器都有个根目录,也就是提供文件服务的基础目录。所以我们要在即将创建的服务器上定义一个root变量,它将作为我们这个静态文件服务器的根目录:

var http = require('http')
var join = require('path').join
var fs = require('fs')

var root = __dirname

__dirname 在Node中是一个神奇的变量,它的值是该文件所在目录的路径。在本例中,服务器会将这个脚本所在的目录作为静态文件的根目录。

有了文件的路径,还需要传输文件的内容。

这可以用fs.ReadStream完成,它是Node中Stream类之一。成功调用 fs.createReadStream() 会返回一个新的 fs.ReadStream 对象。

下面的代码实现了一个简单但功能完备的文件服务器。

var server = http.createServer(function(req, res){
 let path = join(root, req.url)
 let stream = fs.createReadStream(path)
 stream.on('data', function(chunk){
  res.write(chunk)
 })
 stream.on('end', function(){
  res.end()
 })
})

server.listen(3000)

这个文件服务器大体能用,但还有很多细节需要考虑。接下来我们要优化数据的传输,同时也精简一下服务器的代码。

用STREAM.PIPE()优化数据传输

虽然上面的代码看上去还不错,但Node还提供了更高级的实现机制:Stream.pipe()。用这个方法可以极大简化服务器的代码。 优化后代码如下:

var server = http.createServer(function(req, res){
 let path = join(root, req.url)
 let stream = fs.createReadStream(path)
 stream.pipe(res)
})

server.listen(3000)

这种写法,是不是更简单,更清晰了呢?

理解流和管道

流是Node中很重要的一个概念,你可以把Node中的管道想象成水管,如果你想让某个源头(比如热水器)流出来的水流到一个目的地(比如厨房的水龙头),可以在中间加一个管道把它们连起来,这样水就会顺着管道从源头流到目的地。

Node中的管道也是这样,但其中流动的不是水,而是来自源头(即ReadableStream)的数据,管道可以让它们“流动”到某个目的地(即WritableStream)。你可以用pipe方法把管道连起来:

ReadableStream.pipe(WritableStream)

读取一个文件(ReadableStream)并把其中的内容写到另一个文件中(WritableStream)用的就是管道:

let readStream = fs.createReadStream('./original.txt') 
let writeStream = fs.createWriteStream('./copy.txt') 
readStream.pipe(writeStream)

所有ReadableStream都能接入任何一个WritableStream。比如HTTP请求(req)对象就是ReadableStream,你可以让其中的内容流动到文件中:

req.pipe(fs.createWriteStream('./req-body.txt'))

运行

现在我们来运行上面的代码,我们在根目录下放一张图片,比如peiqi.jpg。

在浏览器中输入http://127.0.0.1:3000/peiqi.jpg,发现可爱的peiqi已经出现在你的面前了。peiqi.jpg被当作响应主体从http服务器送到了客户端(浏览器)。

用Node提供静态文件服务的方法

虽然已经品尝到了成功的滋味,但这个静态文件服务器还不够完整,因为它很容易出错。想象一下,如果用户不小心输入了一个并不存在的资源,比如abc.html,服务器就会马上崩掉。所以我们还得给这个文件服务器加上错误处理机制,让它足够健壮。

处理服务器错误

在Node中,所有继承了EventEmitter的类都可能会发出error事件。为了监听错误,在fs.ReadStream上注册一个error事件处理器(比如下面这段代码),返回响应状态码500表明有服务器内部错误:

stream.on('error', function(err){
  res.statusCode = 500
  res.end('服务器内部错误')
 })

用fs.stat()实现错误处理

我们可以用fs.stat()来获取文件的相关信息,如果文件不存在,fs.stat()会在err.code中放入ENOENT作为响应,然后你可以返回错误码404,向客户端表明文件未找到。如果fs.stat()返回了其他错误码,你可以返回通用的错误码500。
重构后的代码如下:

var server = http.createServer(function(req, res){
 let path = join(root, req.url)

 fs.stat(path, function(err, stat) {
  if (err) {
   if ('ENOENT' == err.code) {
    res.statusCode = 404
    res.end('Not Found')
   } else {
    res.statusCode = 500
    res.end('服务器内部错误')
   }
  } else { // 有该文件
   res.setHeader('Content-Length', stat.size)
   var stream = fs.createReadStream(path)
   stream.pipe(res)

   stream.on('error', function(err) { // 如果读取文件出错
    res.statusCode = 500
    res.end('服务器内部错误')
   })
  }
 })
})

server.listen(3000)

注意

本节构建的文件服务器是个简化版。如果你想把它放到生产环境中,应该更全面地检查输入的有效性,以防用户通过目录遍历攻击访问到你本来不想开放给他们的那部分内容。

小结

读到这里,相信聪明的你已经掌握了如何用Node创建一个静态服务器,下一篇文章我会给大家介绍如何用Node处理用户上传的文件并存放到服务器中。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 触发HTML元素绑定的函数
Sep 11 Javascript
JavaScript电子时钟倒计时
Jan 09 Javascript
基于jQuery Tipso插件实现消息提示框特效
Mar 16 Javascript
详解js中常规日期格式处理、月历渲染和倒计时函数
Dec 28 Javascript
JavaScript的继承实现小结
May 07 Javascript
React学习笔记之列表渲染示例详解
Aug 22 Javascript
vue-cli配置文件——config篇
Jan 04 Javascript
Vue递归实现树形菜单方法实例
Nov 06 Javascript
vuejs2.0运用原生js实现简单拖拽元素功能
Aug 21 Javascript
详解微信小程序的不同函数调用的几种方法
May 08 Javascript
JavaScript闭包相关知识解析
Oct 19 Javascript
jQuery+ajax实现用户登录验证
Sep 13 jQuery
vue使用监听实现全选反选功能
Jul 06 #Javascript
vue 实现数字滚动增加效果的实例代码
Jul 06 #Javascript
详解在Vue中使用TypeScript的一些思考(实践)
Jul 06 #Javascript
javascript显示动态时间的方法汇总
Jul 06 #Javascript
Django+Vue跨域环境配置详解
Jul 06 #Javascript
微信小程序画布圆形进度条显示效果
Nov 17 #Javascript
微信小程序实时聊天WebSocket
Jul 05 #Javascript
You might like
PHP默认安装产生系统漏洞
2006/10/09 PHP
从MySQL数据库表中取出随机数据的代码
2007/09/05 PHP
CI框架安全类Security.php源码分析
2014/11/04 PHP
PHP函数extension_loaded()用法实例
2015/01/19 PHP
PHP遍历XML文档所有节点的方法
2015/03/12 PHP
THINKPHP支持YAML配置文件的设置方法
2015/03/17 PHP
如何通过Linux命令行使用和运行PHP脚本
2015/07/29 PHP
php抓取网站图片并保存的实现方法
2015/10/29 PHP
php实现转换html格式为文本格式的方法
2016/05/16 PHP
PHP get_html_translation_table()函数用法讲解
2019/02/16 PHP
ThinkPHP框架实现的微信支付接口开发完整示例
2019/04/10 PHP
Nigma vs Liquid BO3 第一场2.14
2021/03/10 DOTA
checkbox全选/取消全选以及checkbox遍历jQuery实现代码
2009/12/02 Javascript
javascript的函数、创建对象、封装、属性和方法、继承
2011/03/10 Javascript
通过正则格式化url查询字符串实现代码
2012/12/28 Javascript
jquery改变disabled的boolean状态的三种方法
2013/12/13 Javascript
js获取页面description的方法
2015/05/21 Javascript
AngularJS前端页面操作之用户修改密码功能示例
2017/03/27 Javascript
js实现从左向右滑动式轮播图效果
2017/07/07 Javascript
JavaScript实现三级联动效果
2017/07/15 Javascript
vue获取input输入值的问题解决办法
2017/10/17 Javascript
微信小程序开发之转发分享功能
2019/10/22 Javascript
JavaScript组合设计模式--改进引入案例分析
2020/05/23 Javascript
jQuery实现评论模块
2020/08/19 jQuery
[03:09]DOTA2亚洲邀请赛 LGD战队出场宣传片
2015/02/07 DOTA
python读取dicom图像示例(SimpleITK和dicom包实现)
2020/01/16 Python
Python OrderedDict字典排序方法详解
2020/05/21 Python
Python第三方包PrettyTable安装及用法解析
2020/07/08 Python
如何将字串String转换成整数int
2015/02/21 面试题
室内设计专业学生的自我评价分享
2013/11/27 职场文书
关于学习的演讲稿
2014/05/10 职场文书
社区爱国卫生月活动总结
2014/06/30 职场文书
计算机应用应届生求职信
2014/07/12 职场文书
春节慰问信范文
2015/02/15 职场文书
2015最新民情日记范文
2015/06/26 职场文书
Kubernetes部署实例并配置Deployment、网络映射、副本集
2022/04/01 Servers