Detailed explanation of node static file server-PHP Tutorial-php.cn

Detailed explanation of node static file server

小云云

Release： 2023-03-20 22:38:01

Original

1422 people have browsed it

Supported functions:

Read static files
Accessing the directory can automatically find the following index.html file, if If there is no index.html, list the files
MIME type support
Cache support/control
Support gzip compression
Range support, breakpoint resume transmission
Global command execution
Subprocess running

This article mainly introduces examples of actual node static file servers. I hope it can help you.

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(&#39;http&#39;);
 
 const server = http.createServer();
 
 // 监听请求
 server.on(&#39;request&#39;, request.bind(this));
 
 server.listen(config.port, () => {
  console.log(`静态文件服务启动成功, 访问localhost:${config.port}`);
 });

Copy after login

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

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

Copy after login

Supports finding index.html:

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

Copy after login

When accessing the directory, list the file directory:

 fs.stat(filepath, (err, stats) => {
 if (err) {
  res.end(&#39;not found&#39;);
  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(&#39;Content-Type&#39;, &#39;text/html&#39;);
  res.end(html);
 }
 }

Copy after login

html template:

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

Copy after login

 <!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>

Copy after login

2.MIME type support

Use the mime module to get the file type, And set the encoding:

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

Copy after login

3. Cache support

http protocol cache:

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

private The client can cache
public Both the client and the proxy server can cache
max-age=60 The cached content will expire after 60 seconds
##no-cache needs to use comparison cache to verify the data and force it to the origin server Verify again
no-store All content will not be cached, and neither forced caching nor comparison caching will be triggered

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. The next time the client requests, add if-none-match: etag value to the request header

Last-Modified: The next client request adds the if-modified-since: Last-Modified value to the request header

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

Copy after login

4. Compression

The client sends content and tells the server which compression formats are supported through the request header Accept-Encoding: gzip, deflate. 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[&#39;accept-encoding&#39;];
  // gzip和deflate压缩
  if (/\bgzip\b/.test(acceptEncoding)) {
   res.setHeader(&#39;Content-Encoding&#39;, &#39;gzip&#39;);
   return zlib.createGzip();
  } else if (/\bdeflate\b/.test(acceptEncoding)) {
   res.setHeader(&#39;Content-Encoding&#39;, &#39;deflate&#39;);
   return zlib.createDeflate();
  } else {
   return null;
  }
 }

Copy after login

5. Breakpoint resume transmission

The server determines whether by Range: bytes=0-xxx in the request header It is to make a Range request. If this value exists and is valid, only the requested part of the file content will be sent back. The response status code becomes 206, indicating Partial Content, and Content-Range is set. 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[&#39;range&#39;];
  if (range) {
   res.setHeader(&#39;Accept-Range&#39;, &#39;bytes&#39;);
   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
  });
 }

Copy after login

6. Global command execution

is achieved through npm link

Create a soft link for the npm package directory and link it to {prefix}/lib/node_modules/
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"
 }
 }

Copy after login

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

Copy after login

7. Child process running

Achieved through spawn

index.js

 const { spawn } = require(&#39;child_process&#39;);
 const Server = require(&#39;./hope&#39;);
 
 function init(argv) {
  // 如果配置为子进程开启服务
  if (argv.child) {
   //子进程启动服务
   const child = spawn(&#39;node&#39;, [&#39;hope.js&#39;, JSON.stringify(argv)], {
    cwd: __dirname,
    detached: true,
    stdio: &#39;inherit&#39;
   });
 
   //后台运行
   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(&#39;{&#39;)) {
 const argv = JSON.parse(process.argv[2]);
 const server = new Hope(argv);
 server.start();
 }

Copy after login

8. Source code and testing

Source code address: hope-server

npm install hope-server -g

Copy after login

Enter any directory

hope-server

Copy after login

Related recommendations:

A simple HTTP static file written using nodejs and Python Server

A simple HTTP static file server written in nodejs and Python_node.js

Node.js static file server improved version_ node.js

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