Node.js静态服务器的实现方法


Posted in Javascript onFebruary 28, 2018

当你输入一个url时,这个url可能对应服务器上的一个资源(文件)也可能对应一个目录。 So服务器会对这个url进行分析,针对不同的情况做不同的事。 如果这个url对应的是一个文件,那么服务器就会返回这个文件。 如果这个url对应的是一个文件夹,那么服务器会返回这个文件夹下包含的所有子文件/子文件夹的列表。 以上,就是一个静态服务器所主要干的事。

但真实的情况不会像这么简单, 我们所拿到的url可能是错误的,它所对应的文件或则文件夹或许根本不存在, 又或则有些文件和文件夹是被系统保护起来的是隐藏的,我们并不想让客户端知道。 因此,我们就要针对这些特殊情况进行一些不同的返回和提示。

再者,当我们真正返回一个文件前,我们需要和客户端进行一些协商。 我们需要知道客户端能够接受的语言类型、编码方式等等以便针对不同浏览器进行不同的返回处理。 我们需要告诉客户端一些关于返回文件的额外信息,以便客户端能更好的接收数据: 文件是否需要缓存,该怎样缓存? 文件是否进行了压缩处理,该以怎样的方式解压? 等等...

至此,我们已经初步了解了一个静态服务器所主要做的几乎所有事情, let's go!

实现

项目目录

static-server/
|
| - bin/
| | - start # 批处理文件
|  
|
| - src/
| | - App.js # main文件
| | - Config.js # 默认配置
|
|
·- package.json

配置文件

要启动一个服务器,我们需要知道这个服务器的启动时的端口号和静态服务器的工作目录

let config = {
 host:'localhost' //提升用
 ,port:8080 //服务器启动时候的默认端口号
 ,path:path.resolve(__dirname,'..','test-dir') //静态服务器启动时默认的工作目录
}

整体框架

注意

事件函数中的this默认指向绑定的对象(这里是小server),这里修改成了Server这个大对象,以便调用在回调函数中调用Server下的方法。

class Server(){
 constructor(options){
  /* === 合并配置参数 === */
  this.config = Object.assign({},config,options)
 }
 start(){
  /* === 启动http服务 === */
  let server = http.createServer();
  server.on('request',this.request.bind(this)); 
  server.listen(this.config.port,()=>{
   let url = `${this.config.host}:${this.config.port}`;
   console.log(`server started at ${chalk.green(url)}`)
  })
 }
 async request(req,res){
  /* === 处理客户端请求,决定响应信息 === */
  // try
  //如果是文件夹 -> 显示子文件、文件夹列表
  //如果是文件 -> sendFile()
  // catch
  //出错 -> sendError()
 }
 sendFile(){
  //对要返回的文件进行预处理并发送文件
 }
 handleCache(){
  //获取和设置缓存相关信息
 }
 getEncoding(){
  //获取和设置编码相关信息
 }
 getStream(){
  //获取和设置分块传输相关信息
 }
 sendError(){
  //错误提示
 }
}
module.exports = Server;

request请求处理

获取url的 pathname ,和 服务器本地的工作根目录地址 进行拼接,返回一个 filename 利用filename和 stat方法 检测是文件还是文件夹

是文件夹, 利用 readdir方法 返回该文件夹下的列表,将列表包装成一个对象组成的数组 然后结合handlebar将数组数据编译到模板中,最后返回这个模板给客户端

是文件, 将req、res、statObj、filepath传递给 sendFile ,接下来交由sendFile处理

async request(req,res){
 let pathname = url.parse(req.url);
 if(pathname == '/favicon.ico') return;
 let filepath = path.join(this.config.root,pathname);
 try{
  let statObj = await stat(filepath);
  if(statObj.isDirectory()){
   let files = awaity readdir(filepath);
   files.map(file=>{
    name:file
    ,path:path.join(pathname,file)
   });
   // 让handlebar 拿着数去编译模板
   let html = this.list({
    title:pathname
    ,files
   })
   res.setHeader('Content-Type','text/html');
   res.end(html);
  }else{
   this.sendFile(req,res,filepath,statObj);
  }
 }catch(e){
  this.sendError(e,req,res);
 }
}

[tip] 我们将 request 方法 async 化,这样我们就能像写同步代码一样写异步

方法

sendFile

涉及缓存、编码、分段传输等功能

sendFile(){
 if(this.handleCache(req,res,filepath,statObj)) return; //如果走缓存,则直接返回。
 res.setHeader('Content-type',mime.getType(filepath)+';charset=utf-8');
 let encoding = this.getEncoding(req,res); //获取浏览器能接收的编码并选择一种
 let rs = this.getStream(req,res,filepath,statObj); //支持断点续传
 if(encoding){
  rs.pipe(encoding).pipe(res);
 }else{
  rs.pipe(res);
 }
}

handleCache

缓存处理时要注意的是,缓存分为强制缓存和对比缓存,且强制缓存的优先级是高于相对缓存的。 也就是说,当强制缓存生效的时候并不会走相对缓存,不会像服务器发起请求。 但一旦强制缓存失效,就会走相对缓存,如果 文件标识 没有改变,则相对缓存生效, 客户端仍然会去缓存数据拿取数据,所以强制缓存和相对缓存并不冲突。 强制缓存和相对缓存一起使用时,能在减少服务器的压力的同事又保持请求数据的及时更新。

另外需要注意的是,如果同时设置了两种相对缓存的文件标识,必须要两种都没有改变时,缓存才生效。

handleCache(req,res,filepath,statObj){
 let ifModifiedSince = req.headers['if-modified-since']; //第一次请求是不会有的
 let isNoneMatch = req.headers['is-none-match'];
 res.setHeader('Cache-Control','private,max-age=30');
 res.setHeader('Expires',new Date(Date.now()+30*1000).toGMTString()); //此时间必须为GMT
 
 let etag = statObj.size;
 let lastModified = statObj.ctime.toGMTString(); //此时间格式可配置
 res.setHeader('Etag',etag);
 res.setHeader('Last-Modified',lastModified);
 
 if(isNoneMatch && isNoneMatch != etag) return false; //若是第一次请求已经返回false
 if(ifModifiedSince && ifModifiedSince != lastModified) return false;
 if(isNoneMatch || ifModifiedSince){
 // 说明设置了isNoneMatch或则isModifiedSince且文件没有改变
  res.writeHead(304);
  res.end();
  return true;
 }esle{
  return false;
 }
}

getEncoding

从请求头中拿取到浏览器能接收的编码类型,利用正则匹配匹配出最前面那个, 创建出对应的zlib实例返回给sendFile方法,以便在返回文件时进行编码。

getEncoding(req,res){
 let acceptEncoding = req.headers['accept-encoding'];
 if(/\bgzip\b/.test(acceptEncoding)){
  res.setHeader('Content-Encoding','gzip');
  return zlib.createGzip();
 }else if(/\bdeflate\b/.test(acceptEncoding)){
  res.setHeader('Content-Encoding','deflate');
  return zlib.createDeflate();
 }else{
  return null;
 }
}

getStream

分段传输,主要利用的是请求头中的 req.headers['range'] 来确认要接收的文件是从哪里开始到哪里结束,然而真正拿到这部分数据是通过 fs.createReadStream 来读取到的。

getStream(req,res,filepath,statObj){
 let start = 0;
 let end = startObj.size - 1;
 let range = req.headers['range'];
 if(range){
  res.setHeader('Accept-Range','bytes');
  res.statusCode = 206; //返回整个数据的一块
  let result = range.match(/bytes = (\d*)-(\d*)/); //不可能有小数,网络传输的最小单位为一个字节
  if(result){
   start = isNaN(result[1])?0:parseInt(result[1]);
   end = isNaN(result[2])?end:parseInt(result[2])-1; //因为readstream的索引是包前又包后故要减去1
  }
 }
 return fs.createReadStream(filepath,{
  start,end
 });
}

包装成命令行工具

我们可以像在命令行中输入 npm start 启动一个dev-server一样自定义一个启动命令来启动我们的静态服务器。

大体实现的思路是: 在 packge.json 中的 bin 属性下配置一个启动命令和这个执行这个命令的文件的路径。 然后我们需要准备一个批处理文件,在文件中引入我们的静态服务器文件,让我们的服务器跑起来 然后将这个文件 node link 即可。

总结

以上所述是小编给大家介绍的Node.js静态服务器的实现方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript indexOf函数使用说明
Jul 03 Javascript
Eval and new funciton not the same thing
Dec 27 Javascript
解析页面加载与js函数的执行 onload or ready
Dec 12 Javascript
jQuery产品间断向下滚动效果核心代码
May 08 Javascript
在Javascript中处理字符串之big()方法的使用
Jun 08 Javascript
谈谈js中的prototype及prototype属性解释和常用方法
Nov 25 Javascript
整理Javascript基础语法学习笔记
Nov 29 Javascript
jQuery常用选择器详解
Jul 17 jQuery
Vue Socket.io源码解读
Feb 07 Javascript
基于打包工具Webpack进行项目开发实例
May 29 Javascript
用JS实现根据当前时间随机生成流水号或者订单号
May 31 Javascript
动态内存分配导致影响Javascript性能的问题
Dec 18 Javascript
JS脚本加载后执行相应回调函数的操作方法
Feb 28 #Javascript
vue+webpack 打包文件 404 页面空白的解决方法
Feb 28 #Javascript
webpack项目调试以及独立打包配置文件的方法
Feb 28 #Javascript
vue-cli+webpack项目 修改项目名称的方法
Feb 28 #Javascript
vue 组件 全局注册和局部注册的实现
Feb 28 #Javascript
vue 自定义全局方法,在组件里面的使用介绍
Feb 28 #Javascript
Vue2.0子同级组件之间数据交互方法
Feb 28 #Javascript
You might like
这部番真是良心,画质好到像风景区,剧情让人跟着小公会热血沸腾
2020/03/10 日漫
php实现短信发送代码
2015/07/05 PHP
详解WordPress中用于合成数组的wp_parse_args()函数
2015/12/18 PHP
PHP中常用的三种设计模式详解【单例模式、工厂模式、观察者模式】
2019/06/14 PHP
解决laravel 表单提交-POST 异常的问题
2019/10/15 PHP
jQuery Study Notes学习笔记 (二)
2010/08/04 Javascript
浅谈js的setInterval事件
2014/12/05 Javascript
浅析javascript 定时器
2014/12/23 Javascript
原生javascript获取元素样式
2014/12/31 Javascript
jQuery实现的右下角广告窗体跟随效果示例
2016/09/16 Javascript
jquery插件canvaspercent.js实现百分比圆饼效果
2017/07/18 jQuery
python爬取安居客二手房网站数据(实例讲解)
2017/10/19 Javascript
浅谈vux之x-input使用以及源码解读
2018/11/04 Javascript
jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题
2019/05/12 jQuery
jQuery实现消息弹出框效果
2019/12/10 jQuery
React生命周期原理与用法踩坑笔记
2020/04/28 Javascript
详解Vue2的diff算法
2021/01/06 Vue.js
[02:28]DOTA2英雄基础教程 狼人
2013/12/23 DOTA
python微信公众号开发简单流程
2018/03/23 Python
python字典setdefault方法和get方法使用实例
2019/12/25 Python
深入浅析python变量加逗号,的含义
2020/02/22 Python
Python unittest单元测试openpyxl实现过程解析
2020/05/27 Python
python Scrapy框架原理解析
2021/01/04 Python
Sofmap官网:日本著名的数码电器专卖店
2017/05/19 全球购物
纪伊国屋新加坡网上书店:Kinokuniya新加坡
2017/12/29 全球购物
Under Armour澳大利亚官网:美国知名的高端功能性运动品牌
2018/02/22 全球购物
美体小铺法国官方网站:The Body Shop法国
2020/06/04 全球购物
Tommy Hilfiger澳洲官网:美国高端休闲领导品牌
2020/12/16 全球购物
收银员的岗位职责范本
2014/02/04 职场文书
学校庆元旦歌咏比赛主持词
2014/03/18 职场文书
2014镇副书记群众路线专题民主生活会思想汇报
2014/09/23 职场文书
逃课检讨书范文
2015/05/06 职场文书
大学生党课心得体会
2016/01/07 职场文书
2019西餐厅创业计划书范文!
2019/07/12 职场文书
24句精辟的现实社会语录,句句扎心,道尽人性
2019/08/29 职场文书
Android Studio 计算器开发
2022/05/20 Java/Android