实战node静态文件服务器的示例代码


Posted in Javascript onMarch 08, 2018

本篇文章主要介绍了实战node静态文件服务器的示例,分享给大家,具体如下:

支持功能:

  1. 读取静态文件
  2. 访问目录可以自动寻找下面的index.html文件, 如果没有index.html则列出文件列表
  3. MIME类型支持
  4. 缓存支持/控制
  5. 支持gzip压缩
  6. Range支持,断点续传
  7. 全局命令执行
  8. 子进程运行

1. 创建服务读取静态文件

首先引入http模块,创建一个服务器,并监听配置端口:

const http = require('http');
 
 const server = http.createServer();
 
 // 监听请求
 server.on('request', request.bind(this));
 
 server.listen(config.port, () => {
  console.log(`静态文件服务启动成功, 访问localhost:${config.port}`);
 });

写一个fn专门处理请求, 返回静态文件, url模块获取路径:

const url = require('url');
 const fs = require('fs');
 function request(req, res) {
 const { pathname } = url.parse(req.url); // 访问路径
 
 const filepath = path.join(config.root, pathname); // 文件路径
 
 fs.createReadStream(filepath).pipe(res); // 读取文件,并响应
 }

支持寻找index.html:

if (pathname === '/') {
  const rootPath = path.join(config.root, 'index.html');
  try{
   const indexStat = fs.statSync(rootPath);
   if (indexStat) {
    filepath = rootPath;
   }
  } catch(e) {
   
  }
 }

访问目录时,列出文件目录:

fs.stat(filepath, (err, stats) => {
 if (err) {
  res.end('not found');
  return;
 }
 if (stats.isDirectory()) {
  let files = fs.readdirSync(filepath);
  files = files.map(file => ({
   name: file,
   url: path.join(pathname, file)
  }));
  let html = this.list()({
   title: pathname,
   files
  });
  res.setHeader('Content-Type', 'text/html');
  res.end(html);
 }
 }

html模板:

function list() {
  let tmpl = fs.readFileSync(path.resolve(__dirname, 'template', 'list.html'), 'utf8');
  return handlebars.compile(tmpl);
 }
<!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>{{title}}</title>
 </head>
 <body>
 <h1>hope-server静态文件服务器</h1>
 <ul>
  {{#each files}}
  <li>
   <a href={{url}}>{{name}}</a>
  </li>
  {{/each}}
 </ul>
 </body>
 </html>

2.MIME类型支持

利用mime模块得到文件类型,并设置编码:

res.setHeader('Content-Type', mime.getType(filepath) + ';charset=utf-8');

3.缓存支持

http协议缓存:

Cache-Control: http1.1内容,告诉客户端如何缓存数据,以及规则

  1. private 客户端可以缓存
  2. public 客户端和代理服务器都可以缓存
  3. max-age=60 缓存内容将在60秒后失效
  4. no-cache 需要使用对比缓存验证数据,强制向源服务器再次验证
  5. no-store 所有内容都不会缓存,强制缓存和对比缓存都不会触发

Expires: http1.0内容,cache-control会覆盖,告诉客户端缓存什么时候过期

ETag: 内容的hash值 下一次客户端请求在请求头里添加if-none-match: etag值

Last-Modified: 最后的修改时间 下一次客户端请求在请求头里添加if-modified-since: Last-Modified值

handleCache(req, res, stats, hash) {
 // 当资源过期时, 客户端发现上一次请求资源,服务器有发送Last-Modified, 则再次请求时带上if-modified-since
 const ifModifiedSince = req.headers['if-modified-since'];
 // 服务器发送了etag,客户端再次请求时用If-None-Match字段来询问是否过期
 const ifNoneMatch = req.headers['if-none-match'];
 // http1.1内容 max-age=30 为强行缓存30秒 30秒内再次请求则用缓存 private 仅客户端缓存,代理服务器不可缓存
 res.setHeader('Cache-Control', 'private,max-age=30');
 // http1.0内容 作用与Cache-Control一致 告诉客户端什么时间,资源过期 优先级低于Cache-Control
 res.setHeader('Expires', new Date(Date.now() + 30 * 1000).toGMTString());
 // 设置ETag 根据内容生成的hash
 res.setHeader('ETag', hash);
 // 设置Last-Modified 文件最后修改时间
 const lastModified = stats.ctime.toGMTString();
 res.setHeader('Last-Modified', lastModified);
 
 // 判断ETag是否过期
 if (ifNoneMatch && ifNoneMatch != hash) {
  return false;
 }
 // 判断文件最后修改时间
 if (ifModifiedSince && ifModifiedSince != lastModified) {
  return false;
 }
 // 如果存在且相等,走缓存304
 if (ifNoneMatch || ifModifiedSince) {
  res.writeHead(304);
  res.end();
  return true;
 } else {
  return false;
 }
 }

4.压缩

客户端发送内容,通过请求头里Accept-Encoding: gzip, deflate告诉服务器支持哪些压缩格式,服务器根据支持的压缩格式,压缩内容。如服务器不支持,则不压缩。

getEncoding(req, res) {
  const acceptEncoding = req.headers['accept-encoding'];
  // gzip和deflate压缩
  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;
  }
 }

5.断点续传

服务器通过请求头中的Range: bytes=0-xxx来判断是否是做Range请求,如果这个值存在而且有效,则只发回请求的那部分文件内容,响应的状态码变成206,表示Partial Content,并设置Content-Range。如果无效,则返回416状态码,表明Request Range Not Satisfiable。如果不包含Range的请求头,则继续通过常规的方式响应。

getStream(req, res, filepath, statObj) {
  let start = 0;
  let end = statObj.size - 1;
  const 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]) ? start : parseInt(result[1]);
    end = isNaN(result[2]) ? end : parseInt(result[2]) - 1;
   }
  }
  return fs.createReadStream(filepath, {
   start, end
  });
 }

6.全局命令执行

通过npm link实现

  1. 为npm包目录创建软链接,将其链到{prefix}/lib/node_modules/
  2. 为可执行文件(bin)创建软链接,将其链到{prefix}/bin/{name}

npm link命令通过链接目录和可执行文件,实现npm包命令的全局可执行。

package.json里面配置

{
 bin: {
 "hope-server": "bin/hope"
 }
 }

在项目下面创建bin目录 hope文件, 利用yargs配置命令行传参数

// 告诉电脑用node运行我的文件
 #! /usr/bin/env node
 
 const yargs = require('yargs');
 const init = require('../src/index.js');
 const argv = yargs.option('d', {
 alias: 'root',
 demand: 'false',
 type: 'string',
 default: process.cwd(),
 description: '静态文件根目录'
 }).option('o', {
 alias: 'host',
 demand: 'false',
 default: 'localhost',
 type: 'string',
 description: '配置监听的主机'
 }).option('p', {
 alias: 'port',
 demand: 'false',
 type: 'number',
 default: 8080,
 description: '配置端口号'
 }).option('c', {
 alias: 'child',
 demand: 'false',
 type: 'boolean',
 default: false,
 description: '是否子进程运行'
 })
 .usage('hope-server [options]')
 .example(
 'hope-server -d / -p 9090 -o localhost', '在本机的9090端口上监听客户端的请求'
 ).help('h').argv;
 
 // 启动服务
 init(argv);

7.子进程运行

通过spawn实现

index.js

const { spawn } = require('child_process');
 const Server = require('./hope');
 
 function init(argv) {
  // 如果配置为子进程开启服务
  if (argv.child) {
   //子进程启动服务
   const child = spawn('node', ['hope.js', JSON.stringify(argv)], {
    cwd: __dirname,
    detached: true,
    stdio: 'inherit'
   });
 
   //后台运行
   child.unref();
   //退出主线程,让子线程单独运行
   process.exit(0);
  } else {
   const server = new Server(argv);
   server.start();
  }
 }
 
 module.exports = init;
hope.js
 if (process.argv[2] && process.argv[2].startsWith('{')) {
 const argv = JSON.parse(process.argv[2]);
 const server = new Hope(argv);
 server.start();
 }

8.源码及测试

源码地址: hope-server

npm install hope-server -g

进入任意目录

hope-server

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

Javascript 相关文章推荐
超酷的网页音乐播放器DewPlayer使用方法
Dec 18 Javascript
基于jquery插件制作左右按钮与标题文字图片切换效果
Nov 07 Javascript
IE8下String的Trim()方法失效的解决方法
Nov 08 Javascript
B/S模式项目中常用的javascript汇总
Dec 17 Javascript
你可能不知道的JavaScript的new Function()方法
Apr 17 Javascript
js中跨域方法原理详解
Jul 19 Javascript
深入理解JavaScript中的call、apply、bind方法的区别
May 30 Javascript
jQuery实现全选、反选和不选功能
Aug 16 jQuery
详解webpack打包第三方类库的正确姿势
Oct 20 Javascript
微信小程序实现带缩略图轮播效果
Nov 04 Javascript
浅谈Fetch 数据交互方式
Dec 20 Javascript
vue-video-player 断点续播的实现
Feb 01 Vue.js
vue.js或js实现中文A-Z排序的方法
Mar 08 #Javascript
vue.js移动数组位置,同时更新视图的方法
Mar 08 #Javascript
在react-router4中进行代码拆分的方法(基于webpack)
Mar 08 #Javascript
JQuery选中select组件被选中的值方法
Mar 08 #jQuery
vue.js中$set与数组更新方法
Mar 08 #Javascript
vue与vue-i18n结合实现后台数据的多语言切换方法
Mar 08 #Javascript
详解使用vue-cli脚手架初始化Vue项目下的项目结构
Mar 08 #Javascript
You might like
全国FM电台频率大全 - 24 贵州省
2020/03/11 无线电
一步一步学习PHP(4) php 函数 补充2
2010/02/15 PHP
从php核心代码分析require和include的区别
2011/01/02 PHP
如何批量清理系统临时文件(语言:C#、 C/C++、 php 、python 、java )
2016/02/01 PHP
JavaScript动态调整TextArea高度的代码
2010/12/28 Javascript
很棒的学习jQuery的12个网站推荐
2011/04/28 Javascript
javascript实现json页面分页实例代码
2014/02/20 Javascript
jQuery 取值、赋值的基本方法整理
2014/03/31 Javascript
jQuery实现带幻灯的tab滑动切换风格菜单代码
2015/08/27 Javascript
jquery实现全屏滚动
2015/12/28 Javascript
jQuery判断浏览器并动态调整select宽度的方法
2016/03/02 Javascript
JS实现弹出居中的模式窗口示例
2016/06/20 Javascript
vue2 自定义动态组件所遇到的问题
2017/06/08 Javascript
JavaScript 中的 this 工作原理
2018/06/20 Javascript
浅谈redux以及react-redux简单实现
2018/08/28 Javascript
基于jquery实现九宫格拼图小游戏
2018/11/30 jQuery
浅谈在Vue.js中如何实现时间转换指令
2019/01/06 Javascript
LayUI动态设置checkbox不显示的解决方法
2019/09/02 Javascript
基于iview-admin实现动态路由的示例代码
2019/10/02 Javascript
SVM基本概念及Python实现代码
2017/12/27 Python
详解Python读取yaml文件多层菜单
2019/03/23 Python
基于python实现FTP文件上传与下载操作(ftp&amp;sftp协议)
2020/04/01 Python
Python爬虫获取页面所有URL链接过程详解
2020/06/04 Python
基于PyTorch的permute和reshape/view的区别介绍
2020/06/18 Python
五分钟学会怎么用python做一个简单的贪吃蛇
2021/01/12 Python
ParcelABC西班牙:包裹运送和快递服务
2019/12/24 全球购物
我的网上商城创业计划书
2013/12/26 职场文书
迟到检讨书900字
2014/01/14 职场文书
迟到早退检讨书
2014/02/10 职场文书
元旦晚会感言
2014/03/12 职场文书
三八节主持词
2014/03/17 职场文书
学校志愿者活动总结
2014/06/27 职场文书
个人授权委托书样本
2014/09/13 职场文书
三潭印月的导游词
2015/02/12 职场文书
计划生育目标责任书
2015/05/09 职场文书
大学新生入学感想
2015/08/07 职场文书