靜態(tài)文件服務(wù)器實(shí)現(xiàn)

十余年的武邑網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。營銷型網(wǎng)站的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整武邑建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)從事“武邑網(wǎng)站設(shè)計(jì)”,“武邑網(wǎng)站推廣”以來，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

nodejs不僅僅可以用來寫服務(wù)端接口，用來做靜態(tài)文件服務(wù)器替代nginx的功能， 也是分分鐘可以搞定的。 話不多說，先上代碼：

var server=http.createServer(function (req,res){
 fs.createReadStream(Path.resolve(__dirname,"."+req.url)).pipe(res);
})

在項(xiàng)目根目錄建一個(gè)hello.html文件測試一下 hello.html內(nèi)容如下：

<h2>hello,world</h2>

node app.js運(yùn)行，打開瀏覽器訪問一下： http://localhost/hello.html

我們再回頭審視一下代碼，的確就只有這么簡單，這要?dú)w功于node Stream類 pipe方法的強(qiáng)大，fs.createReadStream讀取本地文件創(chuàng)建一個(gè)可讀流（ReadStream類的實(shí)例），再使用pipe導(dǎo)流到res響應(yīng)流，res是一個(gè)http.ServerResponse類的實(shí)例，是一個(gè)可寫流，繼承自 Stream類

http.ServerResponse類的繼承關(guān)系如下：

安全性考慮

上述代碼實(shí)現(xiàn)靜態(tài)文件服務(wù)器后，意味著項(xiàng)目根目錄下所有的文件（遞歸）都可以通過瀏覽器直接訪問和下載了，這樣會(huì)帶來一些安全性的問題，想想看，你的服務(wù)器端代碼和配置文件都能通過瀏覽器直接下載了，因此需要在代碼里加一些限制，例如只能訪問特定的目錄下的文件和特定擴(kuò)展名的文件，這樣還不夠，參考OWasp Top 10安全風(fēng)險(xiǎn)（第4條-不安全的對(duì)象直接引用）,攻擊者仍然可以通過../../目錄回溯的方法訪問到其它目錄，對(duì)于訪問路徑中包含..的也要全部過濾掉。

實(shí)現(xiàn)mine type

mime type是指http 響應(yīng)頭中的content-type字段，它決定了瀏覽器如何解析文件，是直接當(dāng)做純文件顯示(text/plain)，還是做為html文件渲染(text/html)，或者當(dāng)做二進(jìn)制文件下載，沒有輸出正確的mine type，可能導(dǎo)致圖片文件無法顯示，字體文件無效，視頻文件無法播放的問題。要實(shí)現(xiàn)起來也十分簡單，只需要做一個(gè)映射表，不同文件擴(kuò)展名，在響應(yīng)頭的content-type字段中輸出對(duì)應(yīng)的mine type就行了。

完整代碼如下：

const http=require("http");
const Path=require("path");
const fs=require("fs");

var server=http.createServer(function (req,res){
 const fileName=Path.resolve(__dirname,"."+req.url);
 const extName=Path.extname(fileName).substr(1);

 if (fs.existsSync(fileName)) { //判斷本地文件是否存在
  var mineTypeMap={
   html:'text/html;charset=utf-8',
   htm:'text/html;charset=utf-8',
   xml:"text/xml;charset=utf-8",
   png:"image/png",
   jpg:"image/jpeg",
   jpeg:"image/jpeg",
   gif:"image/gif",
   css:"text/css;charset=utf-8",
   txt:"text/plain;charset=utf-8",
   mp3:"audio/mpeg",
   mp4:"video/mp4",
   ico:"image/x-icon",
   tif:"image/tiff",
   svg:"image/svg+xml",
   zip:"application/zip",
   ttf:"font/ttf",
   woff:"font/woff",
   woff2:"font/woff2",

  }
  if (mineTypeMap[extName]) {
   res.setHeader('Content-Type', mineTypeMap[extName]);
  }
  var stream=fs.createReadStream(fileName);
  stream.pipe(res);
 }

 
})
server.listen(80);

實(shí)現(xiàn)gzip

對(duì)于文本類型的文件，如html,js,css，采用gzip壓縮可以大幅減少傳輸量，提升服務(wù)器傳輸性能,當(dāng)然這會(huì)損耗一點(diǎn)服務(wù)器的cpu性能做為代價(jià)，如果客戶端瀏覽器支持gzip壓縮，則會(huì)在請(qǐng)求頭的accept-encoding中攜帶gzip關(guān)鍵字，用node自帶的zlib類就可以實(shí)現(xiàn)gzip壓縮了，只要在stream.pip實(shí)多加一層，先導(dǎo)流到gzip流，再導(dǎo)出到res流，當(dāng)然，還要在響應(yīng)頭中添加Content-Encoding為gzip，這樣瀏覽器才能正確識(shí)別到http body是采用gzip算法壓縮的，并進(jìn)行自動(dòng)解壓縮。

代碼如下：

const zlib = require('zlib');

if (req.headers["accept-encoding"].indexOf("gzip")>=0 && (extName=="js" || extName=="css" || extName=="html"))) {
  res.setHeader('Content-Encoding', "gzip");
  const gzip = zlib.createGzip();
  stream.pipe(gzip).pipe(res);
 }

客戶端緩存

http協(xié)議的緩存協(xié)商流程比較長，最終在響應(yīng)頭中生成expire（絕對(duì)時(shí)間）和cache-control（相對(duì)時(shí)間）兩個(gè)用于控制緩存過期時(shí)間的參數(shù)，瀏覽器下次請(qǐng)求該文件時(shí)，分為以下幾種情況：

• 如果沒到過期時(shí)間，瀏覽器不會(huì)請(qǐng)求文件直接讀緩存
• 如果已到過期時(shí)間，則會(huì)在請(qǐng)求頭中l(wèi)ast-modified字段攜帶文件的最后修改日期，如果對(duì)比時(shí)間戳與服務(wù)器文件一致，則HTTP 返回 304: Not Modified
• 如果按下f5刷新，會(huì)在請(qǐng)求頭中if-modified-since字段中攜帶緩存的過期時(shí)間，如果對(duì)比時(shí)間戳與服務(wù)器文件一致，則HTTP 返回 304: Not Modified
• ctrl+f5刷新，請(qǐng)求頭中攜帶 cache-control: no-cache，強(qiáng)制禁用緩存。重新下載文件

邏輯分支較多，但都是日期比對(duì)，搞清楚緩存協(xié)商過程比較容易寫出來，有興趣的同學(xué)可以自行實(shí)現(xiàn)

高性能靜態(tài)文件服務(wù)器優(yōu)化

如果要做一個(gè)高性能的靜態(tài)文件服務(wù)器僅實(shí)現(xiàn)gzip和緩存協(xié)商是不夠的，涉及到本地文件的頻繁讀取，高并發(fā)下I/O必定成為瓶頸，考慮到服務(wù)器上的文件是很少更新的， 可以用Buffer把文件流緩存到內(nèi)存中，每次請(qǐng)求時(shí)先在內(nèi)存中查找匹配項(xiàng)，如果命中了直接從內(nèi)存中返回，避免了讀取磁盤，gzip也不用壓縮了，直接用壓縮好的文件流返回，可以成倍的大幅提升性能。當(dāng)然如果文件太多了，內(nèi)存也會(huì)飆升，需要考慮淘汰算法，只緩存訪問次數(shù)高的文件，剔除低訪問量的文件。

采用fs.watch監(jiān)控目錄文件的變化，如果文件有更新，則刪掉緩存。

小結(jié)

Node.js 內(nèi)置的pipe方法可以非常簡便的實(shí)現(xiàn)將服務(wù)器本地文件輸出到http 響應(yīng)流中，gzip壓縮也同樣可以通過pipe實(shí)現(xiàn)，再配合輸出mine type 實(shí)現(xiàn)的靜態(tài)服務(wù)器已經(jīng)可以滿足一般業(yè)務(wù)的使用。如果要實(shí)現(xiàn)高性能的靜態(tài)文件服務(wù)器，還需要實(shí)現(xiàn)客戶端緩存、服務(wù)端緩存功能（本文提供了思路，按圖索驥也非難事）。

最后，推薦一下個(gè)人的開源項(xiàng)目， node.js web開發(fā)框架，已包含本文靜態(tài)文件服務(wù)器的功能 webcontext: https://github.com/windyfancy/webcontext

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

當(dāng)前文章：Node.js一行代碼實(shí)現(xiàn)靜態(tài)文件服務(wù)器的方法步驟
轉(zhuǎn)載來源：http://chinadenli.net/article0/gioioo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)建站、電子商務(wù)、用戶體驗(yàn)、網(wǎng)站制作、搜索引擎優(yōu)化、網(wǎng)站設(shè)計(jì)公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)