Node.js一行代码实现静态文件服务器的方法步骤


Posted in Javascript onMay 07, 2019

静态文件服务器实现

nodejs不仅仅可以用来写服务端接口,用来做静态文件服务器替代nginx的功能, 也是分分钟可以搞定的。 话不多说,先上代码:

var server=http.createServer(function (req,res){
 fs.createReadStream(Path.resolve(__dirname,"."+req.url)).pipe(res);
})

在项目根目录建一个hello.html文件测试一下 hello.html内容如下:

<h1>hello,world</h1>

node app.js运行,打开浏览器访问一下: http://localhost/hello.html

Node.js一行代码实现静态文件服务器的方法步骤

我们再回头审视一下代码,的确就只有这么简单,这要归功于node Stream类 pipe方法的强大,fs.createReadStream读取本地文件创建一个可读流(ReadStream类的实例),再使用pipe导流到res响应流,res是一个http.ServerResponse类的实例,是一个可写流,继承自 Stream类

http.ServerResponse类的继承关系如下:

Node.js一行代码实现静态文件服务器的方法步骤

安全性考虑

上述代码实现静态文件服务器后,意味着项目根目录下所有的文件(递归)都可以通过浏览器直接访问和下载了,这样会带来一些安全性的问题,想想看,你的服务器端代码和配置文件都能通过浏览器直接下载了,因此需要在代码里加一些限制,例如只能访问特定的目录下的文件和特定扩展名的文件,这样还不够,参考OWasp Top 10安全风险(第4条-不安全的对象直接引用),攻击者仍然可以通过../../目录回溯的方法访问到其它目录,对于访问路径中包含..的也要全部过滤掉。

实现mine type

mime type是指http 响应头中的content-type字段,它决定了浏览器如何解析文件,是直接当做纯文件显示(text/plain),还是做为html文件渲染(text/html),或者当做二进制文件下载,没有输出正确的mine type,可能导致图片文件无法显示,字体文件无效,视频文件无法播放的问题。要实现起来也十分简单,只需要做一个映射表,不同文件扩展名,在响应头的content-type字段中输出对应的mine type就行了。

完整代码如下:

const http=require("http");
const Path=require("path");
const fs=require("fs");

var server=http.createServer(function (req,res){
 const fileName=Path.resolve(__dirname,"."+req.url);
 const extName=Path.extname(fileName).substr(1);

 if (fs.existsSync(fileName)) { //判断本地文件是否存在
  var mineTypeMap={
   html:'text/html;charset=utf-8',
   htm:'text/html;charset=utf-8',
   xml:"text/xml;charset=utf-8",
   png:"image/png",
   jpg:"image/jpeg",
   jpeg:"image/jpeg",
   gif:"image/gif",
   css:"text/css;charset=utf-8",
   txt:"text/plain;charset=utf-8",
   mp3:"audio/mpeg",
   mp4:"video/mp4",
   ico:"image/x-icon",
   tif:"image/tiff",
   svg:"image/svg+xml",
   zip:"application/zip",
   ttf:"font/ttf",
   woff:"font/woff",
   woff2:"font/woff2",

  }
  if (mineTypeMap[extName]) {
   res.setHeader('Content-Type', mineTypeMap[extName]);
  }
  var stream=fs.createReadStream(fileName);
  stream.pipe(res);
 }

 
})
server.listen(80);

实现gzip

对于文本类型的文件,如html,js,css,采用gzip压缩可以大幅减少传输量,提升服务器传输性能,当然这会损耗一点服务器的cpu性能做为代价,如果客户端浏览器支持gzip压缩,则会在请求头的accept-encoding中携带gzip关键字,用node自带的zlib类就可以实现gzip压缩了,只要在stream.pip实多加一层,先导流到gzip流,再导出到res流,当然,还要在响应头中添加Content-Encoding为gzip,这样浏览器才能正确识别到http body是采用gzip算法压缩的,并进行自动解压缩。

代码如下:

const zlib = require('zlib');

if (req.headers["accept-encoding"].indexOf("gzip")>=0 && (extName=="js" || extName=="css" || extName=="html"))) {
  res.setHeader('Content-Encoding', "gzip");
  const gzip = zlib.createGzip();
  stream.pipe(gzip).pipe(res);
 }

客户端缓存

http协议的缓存协商流程比较长,最终在响应头中生成expire(绝对时间)和cache-control(相对时间)两个用于控制缓存过期时间的参数,浏览器下次请求该文件时,分为以下几种情况:

  • 如果没到过期时间,浏览器不会请求文件直接读缓存
  • 如果已到过期时间,则会在请求头中last-modified字段携带文件的最后修改日期,如果对比时间戳与服务器文件一致,则HTTP 返回 304: Not Modified
  • 如果按下f5刷新,会在请求头中if-modified-since字段中携带缓存的过期时间,如果对比时间戳与服务器文件一致,则HTTP 返回 304: Not Modified
  • ctrl+f5刷新,请求头中携带 cache-control: no-cache,强制禁用缓存。重新下载文件

逻辑分支较多,但都是日期比对,搞清楚缓存协商过程比较容易写出来,有兴趣的同学可以自行实现

高性能静态文件服务器优化

如果要做一个高性能的静态文件服务器仅实现gzip和缓存协商是不够的,涉及到本地文件的频繁读取,高并发下I/O必定成为瓶颈,考虑到服务器上的文件是很少更新的, 可以用Buffer把文件流缓存到内存中,每次请求时先在内存中查找匹配项,如果命中了直接从内存中返回,避免了读取磁盘,gzip也不用压缩了,直接用压缩好的文件流返回,可以成倍的大幅提升性能。当然如果文件太多了,内存也会飙升,需要考虑淘汰算法,只缓存访问次数高的文件,剔除低访问量的文件。

采用fs.watch监控目录文件的变化,如果文件有更新,则删掉缓存。

小结

Node.js 内置的pipe方法可以非常简便的实现将服务器本地文件输出到http 响应流中,gzip压缩也同样可以通过pipe实现,再配合输出mine type 实现的静态服务器已经可以满足一般业务的使用。如果要实现高性能的静态文件服务器,还需要实现客户端缓存、服务端缓存功能(本文提供了思路,按图索骥也非难事)。

最后,推荐一下个人的开源项目, node.js web开发框架,已包含本文静态文件服务器的功能 webcontext: https://github.com/windyfancy/webcontext

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

Javascript 相关文章推荐
用js实现键盘方向键翻页功能的代码
Jun 03 Javascript
JavaScript charCodeAt方法入门实例(用于取得指定位置字符的Unicode编码)
Oct 17 Javascript
JavaScript 面向对象与原型
Apr 10 Javascript
JS快速实现移动端拼图游戏
Sep 05 Javascript
深入理解javascript中的 “this”
Jan 17 Javascript
vue 路由页面之间实现用手指进行滑动的方法
Feb 23 Javascript
p5.js 毕达哥拉斯树的实现代码
Mar 23 Javascript
Windows下Node爬虫神器Puppeteer安装记
Jan 09 Javascript
vue axios重复点击取消上一次请求封装的方法
Jun 19 Javascript
这15个Vue指令,让你的项目开发爽到爆
Oct 11 Javascript
原生js实现分页效果
Sep 23 Javascript
vue中是怎样监听数组变化的
Oct 24 Javascript
微信小程序扫描二维码获取信息实例详解
May 07 #Javascript
Vue数据绑定简析小结
May 07 #Javascript
javascript实现对话框功能警告(alert 消息对话框)确认(confirm 消息对话框)
May 07 #Javascript
详解Vue、element-ui、axios实现省市区三级联动
May 07 #Javascript
webpack结合express实现自动刷新的方法
May 07 #Javascript
记录一次开发微信网页分享的步骤
May 07 #Javascript
Vue 幸运大转盘实现思路详解
May 06 #Javascript
You might like
轻松修复Discuz!数据库
2008/05/03 PHP
PHP的基本常识小结
2013/07/05 PHP
PHP同时连接多个mysql数据库示例代码
2014/03/17 PHP
微信利用PHP创建自定义菜单的方法
2016/08/01 PHP
PHP大神的十大优良习惯
2016/09/14 PHP
a标签的css样式四个状态
2021/03/09 HTML / CSS
Jquery中给animation加更多的运作效果实例
2013/09/05 Javascript
7个JS基础知识总结
2014/03/05 Javascript
获取当前点击按钮的id用this.id实现
2014/03/17 Javascript
简介JavaScript中的setDate()方法的使用
2015/06/11 Javascript
简单介绍JavaScript数据类型之隐式类型转换
2015/12/28 Javascript
seajs学习教程之基础篇
2016/10/20 Javascript
BootStrapTable服务器分页实例解析
2016/12/20 Javascript
使用vue实现点击按钮滑出面板的实现代码
2017/01/10 Javascript
Vue input控件通过value绑定动态属性及修饰符的方法
2017/05/03 Javascript
Node.js assert断言原理与用法分析
2019/01/04 Javascript
浅析Angular 实现一个repeat指令的方法
2019/07/21 Javascript
原生js实现可兼容PC和移动端的拖动滑块功能详解【测试可用】
2019/08/15 Javascript
JS数据类型(基本数据类型、引用数据类型)及堆和栈的区别分析
2020/03/04 Javascript
Python实现的简单万年历例子分享
2014/04/25 Python
Python中让MySQL查询结果返回字典类型的方法
2014/08/22 Python
python实现封装得到virustotal扫描结果
2014/10/05 Python
详解Python中的文本处理
2015/04/11 Python
基于Python实现对PDF文件的OCR识别
2016/08/05 Python
python脚本替换指定行实现步骤
2017/07/11 Python
python 从csv读数据到mysql的实例
2018/06/21 Python
python实现批量文件重命名
2019/10/31 Python
Python过滤掉numpy.array中非nan数据实例
2020/06/08 Python
List、Map、Set三个接口,存取元素时,各有什么特点?
2015/09/27 面试题
SQL面试题
2013/12/09 面试题
小学生感恩父母演讲稿
2014/08/28 职场文书
诉讼授权委托书范本
2014/10/05 职场文书
2014年专项整治工作总结
2014/11/17 职场文书
任命书怎么写
2015/03/02 职场文书
基于Pygame实现简单的贪吃蛇游戏
2021/12/06 Python
ORACLE中dbms_output.put_line输出问题的解决过程
2022/06/28 Oracle