Detailed explanation of node static file server instance

This article mainly introduces you to an example of a practical node static file server. This article will first list its functions and then share it with you in the form of code. I hope it can help you.

Supported functions:

1. Read static files

2. Accessing the directory can automatically find the following index.html file, if If there is no index.html, list the files

3. MIME type support

4. Cache support/control

5. Support gzip compression

6. Range support, breakpoint resume transmission

7. Global command execution

8. Subprocess running

1. Create a service to read static files

First introduce the http module, create a server, and listen to the configuration port:

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

Write a fn specifically to handle requests and return static files. The url module obtains the path:

 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); // 读取文件，并响应
 }

Supports finding index.html:

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

When accessing the directory, list the file directory:

 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 template:

 function list() {
  let tmpl = fs.readFileSync(path.resolve(__dirname, 'template', 'list.html'), 'utf8');
  return handlebars.compile(tmpl);
 }

 76c82f278ac045591c9159d381de2c57
 9fd01892b579bba0c343404bcccd70fb
 93f0f5c25f18dab9d176bd4f6de5d30e
 a80eb7cbb6fff8b0ff70bae37074b813
 8f6d5a544bbc0d98e0f297ef053f784d
 ef0e6bda9678de73355aeb4407692a87
 b2386ffb911b14667cb8f0f91ea547a7{{title}}6e916e0f7d1e588d4f442bf645aedb2f
 9c3bca370b5104690d9ef395f2c5f8d1
 6c04bd5ca3fcae76e30b72ad730ca86d
 4a249f0d628e2318394fd9b75b4636b1hope-server静态文件服务器473f0a7621bec819994bb5020d29372a
 ff6d136ddc5fdfeffaf53ff6ee95f185
  {{#each files}}
  25edfb22a4f469ecb59f1190150159c6
   0e8c1c10a7257f38575c59bd16d77a1a{{name}}5db79b134e9f6b82c0b36e0489ee08ed
  bed06894275b65c1ab86501b08a632eb
  {{/each}}
 929d1f5ca49e04fdcb27f9465b944689
 36cc49f0c466276486e50c850b7e4956
 73a6ac4ed44ffec12cee46588e518a5e

2.MIME type support

Use the mime module to get the file type and set the encoding:

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

3.Cache support

http protocol cache:

Cache-Control: http1.1 content, tells the client how to cache data, and the rules

1. private client can cache

2. public Both client and proxy server can cache

3. max-age=60 The cached content will expire after 60 seconds

4. no-cache You need to use the comparison cache to verify the data, and force the source server to verify again

5. no-store All content will not be cached, neither forced caching nor comparison caching Will trigger

Expires: http1.0 content, cache-control will overwrite it and tell the client when the cache will expire

ETag: The hash value of the content for the next client Request to add if-none-match: etag value in the request header

Last-Modified: Last modified time The next time the client requests, add if-modified-since: Last-Modified value in the request header

 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. Compression

The client sends content and tells the server which compression formats are supported through Accept-Encoding: gzip, deflate in the request header. The server compresses the content based on the supported compression formats. If the server does not support it, no compression will be performed.

 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. Breakpoint resume transmission

The server uses the Range: bytes=0-xxx in the request header to determine whether it is making a Range request. If this value exists and is valid, it will only send Return the requested part of the file content, the response status code becomes 206, indicating Partial Content, and set Content-Range. If it is invalid, a 416 status code is returned, indicating that Request Range Not Satisfiable. If the Range request header is not included, continue to respond in the usual way.

 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. Global command execution

Achieved through npm link

1. Create a soft link for the npm package directory and link it to {prefix}/ lib/node_modules/

2. Create a soft link for the executable file (bin) and link it to {prefix}/bin/{name}

The npm link command makes the npm package command globally executable by linking directories and executable files.

Configuration in package.json

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

Create the bin directory hope file under the project, and use yargs to configure the command line to pass parameters

 // 告诉电脑用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. Subprocess running

Achieved through 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. Source code and testing

Source code address: hope-server

npm install hope-server -g

Enter any directory

hope-server

Related recommendations:

detailed explanation of node static file server

A simple HTTP static file server written using nodejs and Python

Node.js static file server improved version_node.js

The above is the detailed content of Detailed explanation of node static file server instance. For more information, please follow other related articles on the PHP Chinese website!