搞起node.js静态服务器并实战前端缓存

最新推荐文章于 2022-10-20 22:26:41 发布
最新推荐文章于 2022-10-20 22:26:41 发布
阅读量285 收藏
点赞数
文章标签： javascript 前端 json ViewUI
原文链接：https://segmentfault.com/a/1190000016520159
版权

要实现的内容大概是这样的

  • MIME类型支持，当本地存在资源时响应200状态码，不存在响应404状态吗，默认UTF-8编码
  • 客户端过期时间设置为1年
  • 静态资源在服务器存放的根目录是/home
  • 实现304状态码响应逻辑，etag签名
  • 开启Gzip压缩文件
  • 尽可能提高响应性能，以提高服务器吞吐能力
  • 注意安全问题，防止/../../index.html这种相对路径请求访问到其他系统文件

第一步:实现一个最简单的静态服务器：

var http = require('http');
var server = http.createServer(function(req,res) {
    res.writeHeader(200,{'Content-Type': 'text/plain'});
    res.end('hello');
});
server.listen(9030,function() {
    console.log('you are listening port 9030');
});

第二步:MIME类型支持，当本地存在资源时响应200状态码，不存在响应404状态吗，默认UTF-8编码
要读文件，需要引入url,fs模块，现在已经实现200，404状态码机制了

var server = http.createServer(function(req,res) {
    var pathname=  url.parse(req.url).pathname;//解析路径
    var resourcePath = 'home' + pathname;//资源路径
    if(fs.existsSync(resourcePath)) {//判断资源是否存在，存在则读取
        fs.readFile(resourcePath,'binary',function(err,resource) {
            if(err) {
                res.writeHead(500,{'Content-Type': 'text/plain'});
                res.end();
            }else {
                res.writeHead(200, {'Content-Type': 'text/html'});
                res.write(resource, "binary");
                res.end();
            }
        })
    }else {
        res.writeHead(404,{'Content-Type': 'text/plain'});
        res.write('No Found');
        res.end();
    }
});

接下来就是支持MIME类型，因为服务器不可能知识存储一种类型的资源。增加一个配置文件config.js，内容如下。

exports.types = {
    "css": "text/css",
    "gif": "image/gif",
    "html": "text/html",
    "ico": "image/x-icon",
    "jpeg": "image/jpeg",
    "jpg": "image/jpeg",
    "js": "text/javascript",
    "json": "application/json",
    "pdf": "application/pdf",
    "png": "image/png",
    "svg": "image/svg+xml",
    "swf": "application/x-shockwave-flash",
    "tiff": "image/tiff",
    "txt": "text/plain",
    "wav": "audio/x-wav",
    "wma": "audio/x-ms-wma",
    "wmv": "video/x-ms-wmv",
    "xml": "text/xml"
};

然后使用path模块的extname方法解析文件后缀命。

var path = require('path');
var mimeList = require('./config').types;
var server = http.createServer(function(req,res) {
    var pathname=  url.parse(req.url).pathname;//解析路径
    var resourcePath = 'home' + pathname;//资源路径
    var suffix = path.extname(pathname).slice(1);//获取后缀
    var contentType = mimeList[suffix];
    if(fs.existsSync(resourcePath)) {//判断资源是否存在，存在则读取
        fs.readFile(resourcePath,'binary',function(err,resource) {
            if(err) {
                res.writeHead(500,{'Content-Type': 'text/plain'});
                res.end();
            }else {
                res.writeHead(200, {'Content-Type': contentType});
                res.write(resource, "binary");
                res.end();
            }
        })
    }else {
        res.writeHead(404,{'Content-Type': contentType});
        res.write('No Found');
        res.end();
    }
});

到现在，已经实现了一个比较完整的静态服务器了。那么接下来重点来了，也就是实现前端老生常谈的缓存。接下实现304缓存逻辑，在config文件下增加如下配置，设置过期时间

exports.Expires = {
    maxAge: 60*60*24*365
};

增加如下代码：

var Expires = require('./config').Expires;
var expires = new Date();
expires.setTime(expires.getTime() + Expires.maxAge * 1000);
res.writeHead(200,
    {'Content-Type': contentType,"Expires":expires.toUTCString(),
        "Cache-Control": "max-age=" + Expires.maxAge
    });

304状态码：在服务器上为所有请求的响应都添加Last-Modified头，当浏览器发送第二次请求时会带上If-Modified-Since字段，然后将该字段的值跟文件最后修改时间比较，如果一样则不返回内容。获取文件最后修改时间用fs.stat()方法
主要代码如下：

fs.stat(resourcePath,function(err,stat) {
    var lastModified = stat.mtime.toUTCString();
    var ifModifiedSince = "If-Modified-Since".toLowerCase();
    res.setHeader("Last-Modified", lastModified);
    var expires = new Date();
    expires.setTime(expires.getTime() + Expires.maxAge * 1000);
    if (req.headers[ifModifiedSince] && lastModified == req.headers[ifModifiedSince]) {//实现304逻辑
        res.writeHead(304, "Not Modified");
        res.end();
    }else {
        res.writeHead(200,
            {'Content-Type': contentType,"Expires":expires.toUTCString(),
              "Cache-Control": "max-age=" + Expires.maxAge
             });
        res.write(resource, "binary");
        res.end();
        }
    });

增加etag验头，nodejs生成etag要按照etag包，npm install etag，增加代码：

var ifNoneMatch = req.headers['if-none-match'];
if (req.headers[ifModifiedSince] && lastModified == req.headers[ifModifiedSince] || ifNoneMatch === etag(resource)) {//实现304逻辑,etag

完整代码：

var server = http.createServer(function(req,res) {
    var pathname=  url.parse(req.url).pathname;//解析路径
    var resourcePath = 'home' + pathname;//资源路径
    var suffix = path.extname(pathname).slice(1);//获取后缀
    var contentType = mimeList[suffix];
    if(fs.existsSync(resourcePath)) {//判断资源是否存在，存在则读取
        fs.readFile(resourcePath,'binary',function(err,resource) {
            if(err) {
                res.writeHead(500,{'Content-Type': 'text/plain'});
                res.end();
            }else {
                fs.stat(resourcePath,function(err,stat) {
                    var lastModified = stat.mtime.toUTCString();
                    var ifModifiedSince = "If-Modified-Since".toLowerCase();
                    res.setHeader("Last-Modified", lastModified);
                    var expires = new Date();
                    expires.setTime(expires.getTime() + Expires.maxAge * 1000);
                    console.log(etag(resource),req.headers);
                    var ifNoneMatch = req.headers['if-none-match'];
                    if (req.headers[ifModifiedSince] && lastModified == req.headers[ifModifiedSince] || ifNoneMatch === etag(resource)) {//实现304逻辑
                        res.writeHead(304, "Not Modified");
                        res.end();
                    }else {
                        res.writeHead(200,
                            {'Content-Type': contentType,"Expires":expires.toUTCString(),
                                "Cache-Control": "max-age=" + Expires.maxAge,
                                "ETag":etag(resource)
                            });
                        res.write(resource, "binary");
                        res.end();
                    }
                })
            }
        })
    }else {
        res.writeHead(404,{'Content-Type': contentType});
        res.write('No Found');
        res.end();
    }
});

开启Gzip压缩

  • var zlib = require('zlib');
  • 使用流的方式读取文件

修改代码如下：

var resource = fs.createReadStream(resourcePath);
var acceptEncoding = req.headers['accept-encoding'];
if(acceptEncoding && acceptEncoding.indexOf('gzip') != -1) {//判断是否需要开启Gzip
    res.writeHead(200, "Ok", {'Content-Encoding': 'gzip'});
    resource.pipe(zlib.createGzip()).pipe(res);
}else {
    res.writeHead(200, "Ok");
    resource.pipe(res);
}

最后一步，解决/../../index.html这种相对路径请求访问到其他系统文件。思路：首先替换掉所有的..，然后调用path.normalize方法来处理掉不正常的/。

var resourcePath = path.join("home", path.normalize(pathname.replace(/\.\./g, "")));

到这里基本完成一个静态服务器了：

var http = require('http');
var url = require('url');
var fs = require('fs');
var path = require('path');
var mimeList = require('./config').types;
var Expires = require('./config').Expires;
var zlib = require('zlib');
var server = http.createServer(function(req,res) {
    var pathname=  url.parse(req.url).pathname;//解析路径
    var resourcePath = path.join("home", path.normalize(pathname.replace(/\.\./g, "")));
    var suffix = path.extname(pathname).slice(1);//获取后缀
    var contentType = mimeList[suffix];
    if(fs.existsSync(resourcePath)) {//判断资源是否存在，存在则读取
        fs.stat(resourcePath,function(err,stat) {
            var lastModified = stat.mtime.toUTCString();
            var ifModifiedSince = "If-Modified-Since".toLowerCase();
            var expires = new Date();
            res.setHeader("Last-Modified", lastModified);
            res.setHeader('Content-Type',contentType);
            res.setHeader("Expires",expires.toUTCString());
            res.setHeader("Cache-Control", "max-age=" + Expires.maxAge);
            expires.setTime(expires.getTime() + Expires.maxAge * 1000);
            if (req.headers[ifModifiedSince] && lastModified == req.headers[ifModifiedSince]) {//实现304逻辑
                res.writeHead(304, "Not Modified");
                res.end();
            }else {
                var resource = fs.createReadStream(resourcePath);
                var acceptEncoding = req.headers['accept-encoding'];
                if(acceptEncoding && acceptEncoding.indexOf('gzip') != -1) {//判断是否需要开启Gzip
                    res.writeHead(200, "Ok", {'Content-Encoding': 'gzip'});
                    resource.pipe(zlib.createGzip()).pipe(res);
                }else {
                    res.writeHead(200, "Ok");
                    resource.pipe(res);
                }
            }
        })
    }else {
        res.writeHead(404,{'Content-Type': contentType});
        res.write('No Found');
        res.end();
    }
});
server.listen(9030,function() {
    console.log('you are listening port 9030');
});

附上一篇不错的文章，里面还有更多的一些细节Nodejs实现静态服务器，抄抄改改哈哈【滑稽】

weixin_34007906
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
nodejs搭建静态服务并设置缓存
yezi__6的博客
03-10 779
1.首先搭建nodej服务 var http=require('http'); var server = http.createServer(function (request, response) { // TODO }); server.listen(3200); console.log("Server runing ..."); 2.实现路由 var server = http.c...
Node.js中的etag包知识学习之express的配置etag
高山上的鱼
04-03 5232
原文地址 ：阅读原文   API为：etag(entity, [options])    这个方法为给定的实体产生一个strong etag。这个方法必须获取这个实体的完整内容。可以是Buffer,可以是fs.Stats。默认情况下，这个strong etag的产生是不需要fs.Stats的，因为这个fs.Stats会产生weak Etag而不是strong etag,不过这种默认行为可以通过
Nodejs安装并使用Redis实现服务器缓存能力
weixin_41464806的博客
10-20 1928
nodejs(express)使用redis服务，redis的安装、引入、封装、使用步骤。使用验证码获取的实际使用场景对redis的使用进行详细阐述
【NodeJS】nodejs | 缓存设置
积累与备忘
08-24 1816
原文链接：https://blog.csdn.net/myloverisxin/article/details/122685419。版权声明：本文为CSDN博主「hgSuper」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。“环境变量->系统变量->Path” 增加nodejs目录。1、下载nodejs。6、安装cnpm（可选）4、设置全局缓存位置。
nodejs给html静态资源（css，js）加防缓存时间戳
cs840610862的博客
11-30 1527
在开发的过程中，需要给html的静态资源加上一个随机数，避免版本迭代的时候取本地缓存文件，以下是使用nodejs，正则表达式编写的脚本，可以给css文件，js文件自动加上时间戳，支持已有时间戳二次处理 var fs = require('fs') var path=require('path'); var filenames = [path.resolve(__dirname+'/test.ht...
Node.js静态服务器的实现方法
01-20
以上，就是一个静态服务器所主要干的事。 但真实的情况不会像这么简单， 我们所拿到的url可能是错误的，它所对应的文件或则文件夹或许根本不存在， 又或则有些文件和文件夹是被系统保护起来的是隐藏的，我们并不想...
Node.js硬实战 115个核心技巧.pdf
06-04
《Node.js硬实战 115个核心技巧》是一本深度挖掘Node.js技术的书籍，旨在帮助开发者掌握Node.js的核心技能并提升实际开发能力。Node.js是基于Chrome V8引擎的JavaScript运行环境，它以其非阻塞I/O、事件驱动的特性在...
vue.js+node.js 实战项目视频及源码
最新发布
12-18
Node.js 则是一个基于Chrome V8引擎的JavaScript运行环境，用于构建服务器端和网络应用。 Vue.js 知识点： 1. **Vue实例**：Vue.js 应用的核心是Vue实例，它包含数据和方法，以及配置项。 2. **模板语法**：Vue.js ...
Node.js静态文件服务器改进版
10-23
在本文中，我们将深入探讨如何使用Node.js构建一个静态文件服务器的改进版。这个版本不仅提供了基本的文件服务功能，还引入了一些优化特性，如Last-Modified和If-Modified-Since报文头的使用，以及对资源的压缩支持...
教你编写 Node.js 中间件，实现服务端缓存（附demo源码）
weixin_33719619的博客
09-06 208
Express 作为 Node.js 的框架，如今发展可谓如日中天。我很喜欢其灵活、易扩展的设计理念。尤其是该框架的中间件架构设计：使得在应用中加入新特性更加标准化、成本最小化。这篇文章，我会尝试编写一个非常简单、小巧的中间件，完成服务端缓存功能，进而优化性能。 关于中间件 说到中间件，Express 官网对它的阐述是这样的： “Exp...
node实战前端缓存总结
weixin_33811961的博客
03-31 462
总结 1、浏览器第一次发起一个http/https请求，读取服务器的资源 2、服务端设置响应头（cache-control、Expires、last-modified、Etag）给浏览器 2.1. cache-control、Expires 属于强缓存，last-modified、Etag属于对比缓存（协商缓存） 3、浏览器不关闭tab、f5刷新页面（再次发起一个请求给服务器） 3.1、如果cac...
解决静态资源文件js/css缓存问题(超详细总结版)
热门推荐
a624193873的博客
11-18 1万+
什么是静态资源文件 顾名思义，静态资源文件就是js、css、img等非服务器动态运行生成的文件，统称为静态 资源文件。 为什么要缓存静态资源文件 静态资源文件是基本不会改变的，没必要每次都从服务器中获取。也就是说，我们每次向 服务器发送请求得到的静态资源是相同的。所以我们可以把静态资源缓存再浏览器，也就 是客户端，来进行性能优化。 虽然绝大多数css和js文件都只有几百k，但有些时候会存在如字...
Simple server side cache for Express with Node.js——Express 实现简单的服务器端缓存【翻译】
yinkaihui的博客
08-15 3577
原文地址在这里： http://goenning.net/2016/02/10/simple-server-side-cache-for-expressjs/第一次翻译，不是很好，但大概意思应该还可以。有错误，请多多指正。    express是我目前为止见过扩展性最好的web框架。它的中间件结构使它可以轻松地以标准化方式添加额外的功能。     本次主题，我们将会讨论一个很小很简单，但功能非常强
web页面性能优化系列（4）缓存优化
qq_38560742的博客
02-27 550
自动化缓存策略-处理大规模缓存的方案 http-Header（协议头部）:基于http-Request（请求头部）和http-Response（响应头）来实现的缓存策略 缓存策略（一）cache-control 属性： max-age:指定缓存的有效时间 s-maxage:只能指定Public类型的缓存，优先级高于max-age private:私有缓存，如果个人计算机上的缓存 public:...
Node4-7静态资源服务器实战_缓存
努力学习的肥宅
08-29 174
浏览器发出一个请求,服务器解析出响应的结果返回给浏览器. 缓存是怎么工作的? 用户发起请求,浏览器检查本地是否存在缓存,如果第一次请求没有缓存,那就向服务器发起请求,服务器协商缓存的内容并且返回响应,接着返回缓存响应,再次请求时,会检查缓存是否失效,没有失效就使用本地缓存,如果本地缓存失效了, 缓存header 判断本地有没有失效的可以用 返回时间Expire...
Node.js 缓存加载机制
小辣抓
11-10 2715
谈到node.js 就得说到模块，今天就得来说说node.js的模块缓存加载机制。废话不多说我们直接上代码。 我首先自定义了一个模块nodeJSTest/test13_module.jsvar Student = function(){ this.index; this.say = function(){ console.log("my index is "+thi
node实现缓存
huyao的博客
08-30 5926
为了减少数据传输，减少请求数，继续添加缓存支持。首先梳理一下缓存的处理流程： 如果是第一次访问，请求报文首部不会包含相关字段，服务端在发送文件前做如下处理： 设置Expires头 设置Cache-Control头（设置其max-age值） 如服务器支持Last-Modified，设置Last-Modified头 如服务器支持ETag，设置ETag头 浏览器收到响应后会存下这些标记...
浏览器静态资源缓存问题
liang526011569的博客
05-15 6952
一、场景：页面功能不可用，打开控制台发现js静态资源找不到，见下图 二，分析：可能是由于Nginx上发布了新版本，而浏览器存在缓存，此次操作仍然请求的是原来的静态资源。 ps：什么情况用缓存，什么情况会更新？ js文件比如叫做http://xxx.aaa.com/hello.js，如果更改了hello.js又想让浏览器不要使用缓存而是加载你新...
Node.js服务器端JavaScript开发实战
"NodeWebDevelopment——一本由DavidHerron编写的关于Node.js服务器端JavaScript web开发的实践教程。" 在当今的Web开发领域，Node.js是一个备受瞩目的技术，它允许开发者使用JavaScript语言在服务器端进行编程。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值