位置: 编程技术 - 正文

使用Node.js搭建静态资源服务详细教程(node搭建项目)

编辑:rootadmin

推荐整理分享使用Node.js搭建静态资源服务详细教程(node搭建项目),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:node.js怎么搭建服务器,nodejs搭建服务器全流程,使用node.js搭建动态页面效果的步骤,node搭建项目,搭建nodejs项目,node搭建项目,node.js怎么搭建服务器,使用node.js搭建动态页面效果的步骤,内容如对您有帮助,希望把文章链接给更多的朋友!

对于Node.js新手,搭建一个静态资源服务器是个不错的锻炼,从最简单的返回文件或错误开始,渐进增强,还可以逐步加深对http的理解。那就开始吧,让我们的双手沾满网络请求!

Note:

当然在项目中如果有使用express框架,用express.static一行代码就可以达到目的了:

这里我们要实现的正是express.static背后所做工作的一部分,建议同步阅读该模块源码。

基本功能

不急着写下第一行代码,而是先梳理一下就基本功能而言有哪些步骤。

在本地根据指定端口启动一个http server,等待着来自客户端的请求 当请求抵达时,根据请求的url,以设置的静态文件目录为base,映射得到文件位置 检查文件是否存在 如果文件不存在,返回状态码,发送not found页面到客户端 如果文件存在: 打开文件待读取 设置response header 发送文件到客户端

6.等待来自客户端的下一个请求

实现基本功能

代码结构

创建一个nodejs-static-webserver目录,在目录内运行npm init初始化一个package.json文件。

接着创建如下文件目录:

default.js存放一些默认配置,比如端口号、静态文件目录(root)、默认页(indexPage)等。当这样的一个请求 如果根据root映射后得到的目录内有index.html,根据我们的默认配置,就会给客户端发回index.html的内容。

static-server.js

在这个模块文件内,我们声明了一个StaticServer类,并给其定义了start方法,在该方法体内,创建了一个server对象,监听rquest事件,并将服务器绑定到配置文件指定的端口。在这个阶段,我们对于任何请求都暂时不作区分地简单地返回请求的文件路径。path模块用来规范化连接和解析路径,这样我们就不用特意来处理操作系统间的差异。

app.js

在这个文件内,调用上面的static-server模块,并创建一个StaticServer实例,调用其start方法,启动了一个静态资源服务器。这个文件后面将不需要做其他修改,所有对静态资源服务器的完善都发生在static-server.js内。

在目录下启动程序会看到成功启动的log:

在浏览器中访问,可以看到服务器将请求路径直接返回了。

路由处理

之前我们对任何请求都只是向客户端返回文件位置而已,现在我们将其替换成返回真正的文件:

将由routeHandler来处理文件发送。

读取静态文件

读取文件之前,用fs.stat检测文件是否存在,如果文件不存在,回调函数会接收到错误,发送响应.

Note:

读取文件,这里用的是流的形式createReadStream而不是readFile,是因为后者会在得到完整文件内容之前将其先读到内存里。这样万一文件很大,再遇上多个请求同时访问,readFile就承受不来了。使用文件可读流,服务端不用等到数据完全加载到内存再发回给客户端,而是一边读一边发送分块响应。这时响应里会包含如下响应头:

默认情况下,可读流结束时,可写流的end()方法会被调用。

MIME支持

现在给客户端返回文件时,我们并没有指定Content-Type头,虽然你可能发现访问文本或图片浏览器都可以正确显示出文字或图片,但这并不符合规范。任何包含实体主体(entity body)的响应都应在头部指明文件类型,否则浏览器无从得知类型时,就会自行猜测(从文件内容以及url中寻找可能的扩展名)。响应如指定了错误的类型也会导致内容的错乱显示,如明明返回的是一张jpeg图片,却错误指定了header:'Content-Type': 'text/html',会收到一堆乱码。

虽然有现成的mime模块可用,这里还是自己来实现吧,试图对这个过程有更清晰的理解。

在根目录下创建mime.js文件:

该模块暴露出一个lookup方法,可以根据路径名返回正确的类型,类型以‘type/subtype'表示。对于未知的类型,按普通文本处理。

接着在static-server.js中引入上面的mime模块,给返回文件的响应都加上正确的头部字段:

重新运行程序,会看到图片可以在浏览器中正常显示了。

Note:

需要注意的是,Content-Type说明的应是原始实体主体的文件类型。即使实体经过内容编码(如gzip,后面会提到),该字段说明的仍应是编码前的实体主体的类型。

添加其他功能

至此,已经完成了基本功能中列出的几个步骤,但依然有很多需要改进的地方,比如如果用户输入的url对应的是磁盘上的一个目录怎么办?还有,现在对于同一个文件(从未更改过)的多次请求,服务端都是勤勤恳恳地一遍遍地发送回同样的文件,这些冗余的数据传输,既消耗了带宽,也给服务器添加了负担。另外,服务器如果在发送内容之前能对其进行压缩,也有助于减少传输时间。

读取文件目录

现阶段,用url: localhost:/testfolder去访问一个指定root文件夹下真实存在的testfolder的文件夹,服务端会报错:

Error: EISDIR: illegal operation on a directory, read

要增添对目录访问的支持,我们重新整理下响应的步骤:

1.请求抵达时,首先判断url是否有尾部斜杠

2.如果有尾部斜杠,认为用户请求的是目录

如果目录存在 如果目录下存在默认页(如index.html),发送默认页 如果不存在默认页,发送目录下内容列表 如果目录不存在,返回

3.如果没有尾部斜杠,认为用户请求的是文件

如果文件存在,发送文件 如果文件不存在,判断同名的目录是否存在 如果存在该目录,返回,并在原url上添加上/作为要转到的location 如果不存在该目录,返回

我们需要重写一下routeHandler内的逻辑:

继续补充respondRedirect方法:

浏览器收到响应时,会根据头部指定的location字段值,向服务器发出一个新的请求。

继续补充respondDirectory方法:

当需要返回目录列表时,遍历所有内容,并为每项创建一个link,作为返回文档的一部分。需要注意的是,对于子目录的href,额外添加一个尾部斜杠,这样可以避免访问子目录时的又一次重定向。

在浏览器中测试一下,输入localhost:/testfolder,指定的root目录下并没有名为testfolder的文件,却存在同名目录,因此第一次会收到重定向响应,并发起一个对目录的新请求。

缓存支持

为了减少数据传输,减少请求数,继续添加缓存支持。首先梳理一下缓存的处理流程:

1.如果是第一次访问,请求报文首部不会包含相关字段,服务端在发送文件前做如下处理:

如服务器支持ETag,设置ETag头 如服务器支持Last-Modified,设置Last-Modified头 设置Expires头 设置Cache-Control头(设置其max-age值) 浏览器收到响应后会存下这些标记,并在下次请求时带上与ETag对应的请求首部If-None-Match或与Last-Modified对应的请求首部If-Modified-Since。

2.如果是重复的请求:

使用Node.js搭建静态资源服务详细教程(node搭建项目)

浏览器判断缓存是否过期(通过Cache-Control和Expires确定)

如果未过期,直接使用缓存内容,也就是强缓存命中,并不会产生新的请求

如果已过期,会发起新的请求,并且请求会带上If-None-Match或If-Modified-Since,或者兼具两者

服务器收到请求,进行缓存的新鲜度再验证:首先检查请求是否有If-None-Match首部,没有则继续下一步,有则将其值与文档的最新ETag匹配,失败则认为缓存不新鲜,成功则继续下一步

接着检查请求是否有If-Modified-Since首部,没有则保留上一步验证结果,有则将其值与文档最新修改时间比较验证,失败则认为缓存不新鲜,成功则认为缓存新鲜

当两个首部皆不存在或者验证结果是不新鲜时,发送及最新文件,并在首部更新新鲜度。

当验证结果是缓存仍然新鲜时(也就是弱缓存命中),不需发送文件,仅发送,并在首部更新新鲜度

为了能启用或关闭某种验证机制,我们在配置文件里增添如下配置项:

default.json:

这里为了能测试到缓存过期,将过期时间设成了非常小的5秒。

在StaticServer类中接收这些配置:

现在,我们要在原来的respondFile前横加一杠,增加是要返回还是的逻辑。

准备返回文件前,根据配置,添加缓存相关的响应首部。

需要注意的是,上面使用了ETag弱验证器,并不能保证缓存文件与服务器上的文件是完全一样的。关于强验证器如何实现,可以参考etag包的源码。

下面是如何判断缓存是否仍然新鲜:

需要注意的是,http首部字段名是不区分大小写的(但http method应该大写),所以平常在浏览器中会看到大写或小写的首部字段。

但是node的http模块将首部字段都转成了小写,这样在代码中使用起来更方便些。所以访问header要用小写,如reqHeaders['if-none-match']。不过,仍然可以用req.rawreq.rawHeaders来访问原headers,它是一个[name1, value1, name2, value2, ...]形式的数组。

现在来测试一下,因为设置的缓存有效时间是极小的5s,所以强缓存几乎不会命中,所以第二次访问文件会发出新的请求,因为服务端文件并没做什么改变,所以会返回。

现在来修改一下请求的这张图片,比如修改一下size,目的是让服务端的再验证失败,因而必须给客户端发送和最新的文件。

接下来把缓存有效时间改大一些,比如分钟,那么在分钟之内的重复请求,都会命中强缓存,浏览器不会向服务端发起新的请求(但network依然能观察到这条请求)。

内容编码

服务器在发送很大的文档之前,对其进行压缩,可以节省传输用时。其过程是:

浏览器在访问网站时,默认会携带Accept-Encoding头

服务器在收到请求后,如果发现存在Accept-Encoding请求头,并且支持该文件类型的压缩,压缩响应的实体主体(并不压缩头部),并附上Content-Encoding首部

浏览器收到响应,如果发现有Content-Encoding首部,按其值指定的格式解压报文

对于图片这类已经经过高度压缩的文件,无需再额外压缩。因此,我们需要配置一个字段,指明需要针对哪些类型的文件进行压缩。

default.json

用zlib模块来实现流压缩:

因为配置了图片不需压缩,在浏览器中测试会发现图片请求的响应中没有Content-Encoding头。

范围请求

最后一步,使服务器支持范围请求,允许客户端只请求文档的一部分。其流程是:

客户端向服务端发起请求 服务端响应,附上Accept-Ranges头(值表示表示范围的单位,通常是“bytes”),告诉客户端其接受范围请求 客户端发送新的请求,附上Ranges头,告诉服务端请求的是一个范围 服务端收到范围请求,分情况响应:

范围有效,服务端返回 Partial Content,发送指定范围内内容,并在Content-Range头中指定该范围

范围无效,服务端返回 Requested Range Not Satisfiable,并在Content-Range中指明可接受范围

请求中的Ranges头格式为(这里不考虑多范围请求了):

其中 start 和 end 并不是必须同时具有:

如果 end 省略,服务器应返回从 start 位置开始之后的所有字节

如果 start 省略,end 值指的就是服务器该返回最后多少个字节

如果均未省略,则服务器返回 start 和 end 之间的字节

响应中的Content-Range头有两种格式:

当范围有效返回 时:

当范围无效返回 时:

添加函数处理范围请求:

用 Postman来测试一下。在指定的root文件夹下创建一个测试文件:

testfile.js

This is a test sentence.

请求返回前六个字节 ”This “ 返回 :

请求一个无效范围返回:

读取命令行参数

至此,已经完成了静态服务器的基本功能。但是每一次需要修改配置,都必须修改default.json文件,非常不方便,如果能接受命令行参数就好了,可以借助 yargs 模块来完成。

瞅瞅 help 命令会输出啥:

这样就可以在命令行传递端口、默认页等:

总结

以上所述是小编给大家介绍的使用Node.js搭建静态资源服务详细教程,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对积木网网站的支持!

node中Express 动态设置端口的方法 能够动态设置端口的话,调试起来会比较方便,不需要因为默认端口被占用去改代码,还可以多开。代码如下,其实没啥难度,只要你了解nodejs里的proce

Node.js 事件循环详解及实例 Node.js事件循环详解及实例Node.js是单进程单线程应用程序,但是通过事件和回调支持并发,所以性能非常高。Node.js的每一个API都是异步的,并作为一个

Node.js REPL (交互式解释器)实例详解 Node.jsREPL(交互式解释器)实例详解Node.jsREPL(ReadEvalPrintLoop:交互式解释器)表示一个电脑的环境,类似Window系统的终端,我们可以在终端中输入命令,并接收

标签: node搭建项目

本文链接地址:https://www.jiuchutong.com/biancheng/380913.html 转载请保留说明!

上一篇:详解基于node的前端项目编译时内存溢出问题(node基础知识)

下一篇:node中Express 动态设置端口的方法(nodejs 动态网页)

  • 一般纳税人是否可以开普票
  • 进项税额的计税基础是什么
  • 债务承担规定是什么意思
  • 增值税纳税申报表在哪里打印
  • 小规模教育培训计划
  • 建筑安装增值税税负率行业标准
  • 出口港杂费是什么费用
  • 会计凭证的内容中应包括会计分录
  • 收到实物返利
  • 化肥贸易需要什么手续
  • 建筑公司对外如何开票
  • 注册商标成功的标志图片
  • 生产企业出口退税的会计分录
  • 增值税发票如何红冲
  • 小规模纳税人可以开9%专票吗
  • 设立独立核算的销售机构的筹划
  • 递延所得税资产怎么计算
  • 基建拨款账务处理
  • 一般纳税人企业所得税税率2023
  • 员工转入子公司怎么做账
  • 企业取得代理销售发票
  • tplink路由器手机怎么设置
  • 存货跌价准备会影响利润吗
  • 长期借款利息如何做账
  • 超级本能加装硬盘吗
  • 合伙企业股东个税税率表
  • .msc是什么意思
  • 代销方式是什么意思
  • 日本北海道 (© Hiroshi Yokoyama/eStock Photo)
  • 建筑业2021年享受核定征收吗
  • 终身职业技能培训
  • 前端解决浏览器跨域问题
  • 研发支出属于哪个表
  • php graph
  • 残保金计入税金还是管理费用
  • GPT-4 免费体验方法
  • php对接微信支付教程
  • 如何让header居中
  • break能结束一个函数的调用
  • 游戏microsoft visual c++ runtime
  • 代销手续费怎么开票
  • 金税盘无法登录410506怎么解决
  • 企业之间的借款利息收入缴纳增值税吗?
  • 特种设备年检费怎么开具发票
  • mysql的innodb引擎支持外键
  • 揭秘蒙娜丽莎25恐怖之处
  • 股票价值和内部收益率的公式
  • 回忆一下会计核算程序有哪几种?
  • 如何计算生产费用
  • 交易性金融资产属于流动资产
  • 空调购买攻略
  • 维修费收入怎么结转销售成本
  • 会计凭证要保存多少年企业注销
  • 稽查人员是干嘛的
  • 什么是交易性金融资产?交易性金融资产主要有哪些特点?
  • 备查账目
  • 结转未交增值税会计处理
  • sql语句参数值
  • mysql 树状查询语句
  • 服务器centos版本选择
  • 去掉电脑右下角显示的时间
  • winxp任务栏消失
  • sdstat.exe - sdstat是什么进程 有什么用
  • win10怎么设置扩展屏
  • android app 源码
  • python模块和类和方法
  • oracle安装使用
  • Linux动态链接库编译
  • linux 删除inode
  • 天干地支在择时中的应用初探
  • svn如何cleanup
  • jquery选择器的优势有哪些
  • cd跳转不到目录
  • 简单阐述javascript的主要作用
  • javascript基础
  • 基于javascript的毕业设计选题
  • 深圳零申报怎么报税的具体流程
  • 广西税务软件
  • 个人所得税申报怎么申报
  • 公司换届审计一般要多久
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设