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 相关文章推荐
Eclipse去除js(JavaScript)验证错误
Feb 11 Javascript
javascript关于继承的用法汇总
Dec 20 Javascript
js简单抽奖代码
Jan 16 Javascript
简单谈谈javascript中this的隐式绑定
Feb 22 Javascript
JS简单随机数生成方法
Sep 05 Javascript
javascript 四十条常用技巧大全
Sep 09 Javascript
bootstrap table单元格新增行并编辑
May 19 Javascript
jQuery.Form实现Ajax上传文件同时设置headers的方法
Jun 26 jQuery
angularJS的radio实现单项二选一的使用方法
Feb 28 Javascript
element实现合并单元格通用方法
Nov 13 Javascript
如何将Node.js中的回调转换为Promise
Nov 10 Javascript
vue实现简易计算器功能
Jan 20 Vue.js
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
php错误级别的设置方法
2013/06/17 PHP
php创建sprite
2014/02/11 PHP
php微信公众开发之获取周边酒店信息的方法
2014/12/22 PHP
Laravel模型间关系设置分表的方法示例
2018/04/21 PHP
建议大家看下JavaScript重要知识更新
2007/07/08 Javascript
js实现iframe动态调整高度的代码
2008/01/06 Javascript
初窥JQuery(二) 事件机制(1)
2010/11/25 Javascript
Prototype源码浅析 Enumerable部分之each方法
2012/01/16 Javascript
JavaScript中各种引用类型的常用操作方法小结
2016/05/05 Javascript
RequireJS多页面应用实例分析
2016/06/29 Javascript
JavaScript中的冒泡排序法
2016/08/03 Javascript
详解jQuery uploadify文件上传插件的使用方法
2016/12/16 Javascript
AngularJS自定义指令之复制指令实现方法
2017/05/18 Javascript
Angular通过angular-cli来搭建web前端项目的方法
2017/07/27 Javascript
vue中的数据绑定原理的实现
2018/07/02 Javascript
Vue组件创建和传值的方法
2018/08/17 Javascript
Element-UI中Upload上传文件前端缓存处理示例
2019/02/21 Javascript
基于JS实现父组件的请求服务过程解析
2019/10/14 Javascript
JS实现炫酷轮播图
2020/11/15 Javascript
Python 搭建Web站点之Web服务器网关接口
2016/11/06 Python
python 统计代码行数简单实例
2017/05/04 Python
利用python将xml文件解析成html文件的实现方法
2017/12/22 Python
windows下安装Python的XlsxWriter模块方法
2018/05/03 Python
python中bytes和str类型的区别
2019/10/21 Python
python pyinstaller打包exe报错的解决方法
2019/11/02 Python
使用python去除图片白色像素的实例
2019/12/12 Python
Flask框架搭建虚拟环境的步骤分析
2019/12/21 Python
python pycharm最新版本激活码(永久有效)附python安装教程
2020/09/18 Python
django实现模型字段动态choice的操作
2020/04/01 Python
Python使用Chrome插件实现爬虫过程图解
2020/06/09 Python
PHP如何去执行一个SQL语句
2016/03/05 面试题
详细的大学生创业计划书模板
2014/01/27 职场文书
校运动会广播稿300字
2014/10/07 职场文书
2015年全国助残日活动方案
2015/05/04 职场文书
2016年“5.12”护士节致辞
2015/07/31 职场文书
人生哲理妙语30条:淡写流年,笑过人生
2019/09/04 职场文书