Shulou(Shulou.com)05/31 Report--

The content of this article mainly focuses on what is the function of the static file server. the content of the article is clear and clear, which is very suitable for beginners to learn and is worth reading. Interested friends can follow the editor to read together. I hope you can get something through this article!

First of all, build the project directory, which is as follows:

Project |-- bin command line implementation placement script | |-- public static file server default static folder | |-- src implementation function related code | _ _ template template folder | _ _ app.js main function file (main file) | | _ _ config.js configuration file | |-package.josn (initialization)

To start a server, we need to know the port number on which the server was started, and configure it in config.js:

Let config = {host:'localhost' / / prompt, port:8080 / / default port number for server startup, path:path.resolve (_ _ dirname,'..','test-dir') / / default working directory for static server startup}

Start the server before reading the static file, and then all the methods are in the class Server method

/ / handlebar compilation template, get a rendering method, and then input the actual data to get the rendered HTML. Function list () {let tmpl = fs.readFileSync (path.resolve (_ _ dirname, 'template',' list.html'), 'utf8'); return handlebars.compile (tmpl); / / compile, * * render} class Server {constructor (argv) {this.list = list () This.config = Object.assign ({}, this.config, argv);} start () {let server = http.createServer (); / / create a server / / when the client sends data to the server, the request event server.on ('request', this.request.bind (this)) will be initiated. Server.listen (this.config.port, () = > {/ / listener port number let url = `port debug (`server started at ${chalk.green (url)} `);});} / / send error message, sendError (err, req, res) {res.statusCode = 500 Res.end (`${err.toString ()}`);}} module.exports = Server

Read static files

Design ideas

When you enter a url first, it may correspond to a file on the server or a directory

Check whether the file or directory if the file does not exist, return the 404 status code and send the not found page to the client

If the file exists: open the file to read

Set response header to send files to the client

If it is a directory, open the directory list.

Async request (req, res) {/ / first fetch the file or folder path let {pathname} = url.parse (req.url) that the client wants; / / get the file information of the path let filepath = path.join (this.config.root, pathname); / / the corresponding server physical path try {let statObj = await stat (filepath) on the server / / get the file information of the path if (statObj.isDirectory ()) {/ / if it is a directory, the list of files under the directory should be displayed let files = await readdir (filepath) / / read the file list of files files = files.map (file = > ({/ / change each string into an object name: file, url: path.join (pathname, file)}) / / handlebar compilation template let html = this.list ({title: pathname, files}); res.setHeader ('Content-Type',' text/html'); set request header res.end (html);} else {this.sendFile (req, res, filepath, statObj) / / read file} catch (e) {/ / send error message debug (inspect (e)) without access; / / inspect converts an object to character this.sendError (e, req, res);}}

Cache support / control

Design ideas

Caching is divided into forced caching and contrast caching:

Two kinds of cache rules can exist at the same time, and the forced cache priority is higher than the contrast cache, that is, when the forced cache rule is executed, if the cache is in effect, the cache is directly used, and the comparison cache rule is no longer executed.

If the forced cache takes effect, there is no need to interact with the server, while the comparison cache needs to interact with the server whether it takes effect or not.

* * when you visit the server, the server returns the identity of the resource and the cache, and the client caches the resource in the local cache database.

The second time the client needs this data, get the identity of the cache, and then ask the server if my resource is *. If it is *, the cached data is directly used. If it is not *, the server returns new resources and caching rules, and the client caches the new data according to the caching rules.

Determine whether the cache is available by * modification time

Last-Modified: tell the client the modification time of this resource in response

If-Modified-Since: when the resource expires (using the max-age identified by Cache-Control), if you find that the resource has a Last-Modified declaration, you will request the server with the header If-Modified-Since again.

After receiving the request, the server finds that the header If-Modified-Since is compared with the modification time of the requested resource. If the modification time of * is relatively new and the resource has been changed again, you will respond to the resource content of * and return 200 status code

If the modification time is the same as that of If-Modified-Since, which means that the resource has not been modified, it means that the resource has not been updated and tells the browser to continue using the saved cache file.

ETag is the resource tag. If the resource does not change, it will not change.

If the client wants to determine whether the cache is available, it can first get the ETag of the document in the cache, and then send a request to the Web server through If-None-Match to ask if the cache is available.

The server receives a request and compares the ETag of this file in the server with the If-None-Match in the request header. If the value is the same, the cache is still * *. The Web server will send a 304 Not Modified response code to the client to indicate that the cache has not been modified and can be used.

If not, the Web server will send the * version of the document to the browser client.

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'); / / max-age=30 cache content will expire in 30 seconds res.setHeader ('Expires', new Date (Date.now () + 30 * 1000). ToGMTString ()); let etag = statObj.size Let lastModified = statObj.ctime.toGMTString (); res.setHeader ('ETag', etag); / / get ETag res.setHeader (' Last-Modified', lastModified); / / Server file * * modification time / / if any of the comparison cache headers do not match, the cache if (isNoneMatch & & isNoneMatch! = etag) {/ / cache expiration return fasle will not be cached. } if (ifModifiedSince & & ifModifiedSince! = lastModified) {/ / cache expiration return fasle;} / / if any one of the comparison cache headers exists in the request, if is returned, otherwise if (isNoneMatch | | ifModifiedSince) {/ / cache valid res.writeHead (304); res.end (); return true;} cache {return false;}}

Support for gzip compression

Design ideas

Browsers all carry their own supported compression types, and the two most commonly used are gzip and deflate. Different compression formats are returned according to the request header Accept-Encoding.

GetEncoding (req, res) {let acceptEncoding = req.headers ['accept-encoding']; / / get the information of the compression request header sent by the client if (/\ bgzip\ b/.test (acceptEncoding)) {/ / if it is the format res.setHeader (' Content-Encoding', 'gzip') of gzip; return zlib.createGzip () } else if (/\ bdeflate\ b/.test (acceptEncoding)) {/ / if it is the deflate format res.setHeader ('Content-Encoding',' deflate'); return zlib.createDeflate ();} else {return null;// uncompressed}}

Range support, breakpoint continuation

Design ideas

This option specifies the range of download bytes and is often used in block download files

The server tells the client that range response.setHeader ('Accept-Ranges',' bytes') can be used

Server determines whether to make a Range request by the Range:bytes=0-xxx in the request header. If this value exists and is valid, only that part of the file content of the request is sent back, and the status code of the response becomes 206. if it is invalid, 416 status code is returned, indicating Request.

GetStream (req, res, filepath, statObj) {let start = 0 range' / readable stream start position let end = statObj.size-1 strike / readable stream end position let range = req.headers ['range']; / / get the range request header information of the client, if (range) {/ / breakpoint continuation res.setHeader (' Accept-Range', 'bytes'); res.statusCode = 206 / / return a piece of the whole content let result = range.match (/ bytes= (\ d*)-(\ d*) /); / / the segmented content resumed from the breakpoint cannot have decimals, and the smallest unit of network transmission is a byte 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});}

Issue as executable command

First configure "bin": {"http-static": "bin/www"} in package.json

#! / usr/bin/env node / / this code must be written at the beginning, in order to be compatible with the differences between different computer platforms / /-d-- root static file directory-o-- host host-p-- port port number let yargs = require ('yargs'); let Server = require ('.. / src/app.js') Let argv = yargs.option ('alias:'root', demand:'false', type:'string', default:process.cwd, {alias:'root', demand:'false', type:'string', default:process.cwd (), description:' static files and directories'}) .option ('alias:'host', demand:'localhost', type:'string', description:', {configure the host to listen'}) .option ('alias:'root', {alias:'root') Demand:'false', type:'number', default:8080, description:', please configure the port number'}) .usage ('http-static [options]') .example ('http-static-d / 8080-o localhost',' listens for client requests on local port 9090') .help ('h') .argv / / argv = {d _

In this way, the static file server is started directly by typing http-static on the command line, and the function of command line call is also realized. finally, it is released with npm publish and published to npm, and we can install it globally through npm install-g.

Thank you for your reading. I believe you have a certain understanding of "what is the function of the static file server?" go to practice, if you want to know more related knowledge points, you can pay attention to the website! The editor will continue to bring you better articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.