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 相关文章推荐
客户端限制只能上传jpg格式图片的js代码
Dec 09 Javascript
JavaScript实现页面实时显示当前时间的简单实例
Jul 20 Javascript
基于javascript的JSON格式页面展示美化方法
Jul 02 Javascript
javascript基本类型详解
Nov 28 Javascript
在百度搜索结果中去除掉一些网站的资料(通过js控制不让显示)
May 02 Javascript
vue的状态管理模式vuex
Nov 30 Javascript
JavaScript判断日期时间差的实例代码
Mar 01 Javascript
vue中的 $slot 获取插槽的节点实例
Nov 12 Javascript
JavaScript基于面向对象实现的无缝滚动轮播示例
Jan 17 Javascript
nginx部署多个vue项目的方法示例
Sep 06 Javascript
使用Vue实现一个树组件的示例
Nov 06 Javascript
夯基础之手撕javascript继承详解
Nov 09 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
解决PHP在DOS命令行下却无法链接MySQL的技术笔记
2010/12/29 PHP
PHP strip_tags()去除HTML、XML以及PHP的标签介绍
2014/02/18 PHP
PHP常见漏洞攻击分析
2016/02/21 PHP
PHP 常用时间函数资料整理
2016/10/22 PHP
基于jQuery的遍历同id元素 并响应事件的代码
2012/06/14 Javascript
jQuery操作 input type=checkbox的实现代码
2012/06/14 Javascript
Firefox中通过JavaScript复制数据到剪贴板(Copy to Clipboard 跨浏览器版)
2013/11/22 Javascript
jquery组件使用中遇到的问题整理及解决
2014/02/21 Javascript
纯js实现html转pdf的简单实例(推荐)
2017/02/16 Javascript
详解nodejs微信公众号开发——4.自动回复各种消息
2017/04/11 NodeJs
angularjs之$timeout指令详解
2017/06/13 Javascript
JS实现静态页面搜索并高亮显示功能完整示例
2017/09/19 Javascript
jquery.pager.js分页实现详解
2019/07/29 jQuery
layer关闭弹出窗口触发表单提交问题的处理方法
2019/09/25 Javascript
Selenium执行Javascript脚本参数及返回值过程详解
2020/04/01 Javascript
javascript 易错知识点实例小结
2020/04/25 Javascript
python中map、any、all函数用法分析
2015/04/21 Python
python 把文件中的每一行以数组的元素放入数组中的方法
2018/04/29 Python
Python实现简单石头剪刀布游戏
2021/01/20 Python
Jupyter Notebook远程登录及密码设置操作
2020/04/10 Python
Python列表的深复制和浅复制示例详解
2021/02/12 Python
python 装饰器重要在哪
2021/02/14 Python
CSS3实现时间轴效果
2016/07/11 HTML / CSS
英国领先的珍珠首饰品牌:Orchira
2016/09/11 全球购物
NBA德国官方网上商店:NBA Store德国
2018/04/13 全球购物
街头时尚在线:JESSICABUURMAN
2019/06/16 全球购物
课例研修方案
2014/05/31 职场文书
2014年学生工作总结
2014/11/20 职场文书
升职自我推荐信范文
2015/03/25 职场文书
员工开除通知书
2015/04/25 职场文书
2016年度员工工作表现评语
2015/12/02 职场文书
Python基础教程,Python入门教程(超详细)
2021/06/24 Python
vue项目支付功能代码详解
2022/02/18 Vue.js
uni-app 微信小程序授权登录的实现步骤
2022/02/18 Javascript
CSS中实现动画效果-附案例
2022/02/28 HTML / CSS
PyCharm 配置SSH和SFTP连接远程服务器
2022/05/11 Python