用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 相关文章推荐
CSS+Jquery实现页面圆角框方法大全
Dec 24 Javascript
Jquery实现点击切换图片并隐藏显示内容(2种方法实现)
Apr 11 Javascript
js获取下拉列表框中的value和text的值示例代码
Jan 11 Javascript
Backbone.js中的集合详解
Jan 14 Javascript
jQuery 1.9.1源码分析系列(十五)之动画处理
Dec 03 Javascript
angularjs中的$eval方法详解
Apr 24 Javascript
详解Node.js利用node-git-server快速搭建git服务器
Sep 27 Javascript
vue中在vuex的actions中请求数据实例
Nov 08 Javascript
微信小程序文章列表功能完整实例
Jun 03 Javascript
封装 axios+promise通用请求函数操作
Aug 11 Javascript
vue-cli 关闭热更新操作
Sep 18 Javascript
基于Ionic3实现选项卡切换并重新加载echarts
Sep 24 Javascript
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
Javascript 原型和继承(Prototypes and Inheritance)
2009/04/01 Javascript
基于jquery的动态创建表格的插件
2011/04/05 Javascript
在JS中如何调用JSP中的变量
2014/01/22 Javascript
用js模拟struts2的多action调用示例
2014/05/19 Javascript
使用命令对象代替switch语句的写法示例
2015/02/28 Javascript
JavaScript基于ajax编辑信息用法实例
2015/07/15 Javascript
详解JavaScript的表达式与运算符
2015/11/30 Javascript
基于PHP和Mysql相结合使用jqGrid读取数据并显示
2015/12/02 Javascript
jQuery表单验证简单示例
2016/10/17 Javascript
React从react-router路由上做登陆验证控制的方法
2018/05/10 Javascript
详解JavaScript添加给定的标签选项
2018/09/17 Javascript
JavaScript学习笔记之数组基本操作示例
2019/01/09 Javascript
Vue 用Vant实现时间选择器的示例代码
2019/10/25 Javascript
Python实现获取域名所用服务器的真实IP
2015/10/25 Python
python机器人行走步数问题的解决
2018/01/29 Python
利用Python在一个文件的头部插入数据的实例
2018/05/02 Python
用python脚本24小时刷浏览器的访问量方法
2018/12/07 Python
python RC4加密操作示例【测试可用】
2019/09/26 Python
在pandas中遍历DataFrame行的实现方法
2019/10/23 Python
执行Python程序时模块报错问题
2020/03/26 Python
Django实现whoosh搜索引擎使用jieba分词
2020/04/08 Python
解决python父线程关闭后子线程不关闭问题
2020/04/25 Python
python 用struct模块解决黏包问题
2020/11/07 Python
Python实现区域填充的示例代码
2021/02/03 Python
HTML5的Video标签有部分MP4无法播放的问题解析(多图)
2017/08/18 HTML / CSS
为娇小女性量身打造:Petite Studio
2018/11/01 全球购物
英国儿童鞋和靴子:Start-Rite
2019/05/06 全球购物
计算机专业推荐信范文
2013/11/20 职场文书
楼面部长岗位职责范本
2014/02/14 职场文书
小学综治宣传月活动总结
2014/07/02 职场文书
委托书英文
2015/01/28 职场文书
工地食品安全责任书
2015/05/09 职场文书
2015年安置帮教工作总结
2015/05/22 职场文书
南极大冒险观后感
2015/06/05 职场文书
Spring Data JPA框架自定义Repository接口
2022/04/28 Java/Android
Mysql如何查看是否使用到索引
2022/12/24 MySQL