通过 Node.js, Express.js 实现 HTTP/2 Server Push-阿里云开发者社区

开发者社区> 行者武松> 正文

通过 Node.js, Express.js 实现 HTTP/2 Server Push

简介:
+关注继续查看


什么是 HTTP/2 Server Push

HTTP/2 是 Web 开发的新标准,拥有很多不错的优点能够让 Web 访问更快且开发的工作更轻松简单。比如,引入多路复用传输不用合并资源,服务器推送(Server Push)资源让浏览器预加载。

该文不会讲述 HTTP/2 的所有优势。你可以通过上篇文章了解更多{% post_link http2-node-express %}。该文主要关注于在 Node.js环境使用 Express.js 和 HTTP/2 库 spdy。

服务器推送(Server Push)工作方式是通过在一个 HTTP/2 请求中捆绑多个资源。在底层,服务器会发送一个 PUSH_PROMISE,客户端(包括浏览器)就可以利用它且不基于 HTML 文件是否需要该资源。如果浏览器检测到需要该资源,就会匹配到收到的服务器推送的 PROMISE 然后让该资源表现的就像正常的浏览器 Get 请求资源。显而易见,如果匹配到有推送,浏览器就不需要重新请求,然后直接使用客户端缓存。这推荐几篇文章关于服务器推送(Server Push)的好处:

  • What’s the benefit of Server Push?
  • Announcing Support for HTTP/2 Server Push
  • Innovating with HTTP 2.0 Server Push

这是个关于在 Node.js 实现服务器推送(Server Push)实践教程。为了更清晰精简,我们只实现一个路由地址 /pushy 的 Node.js和 Express.js 服务器,它会推送一个 JS 文件,正如之前所说,我们会用到一个 HTTP/2 库 spdy。

HTTP/2 和 Node.js

先解释一下,为啥在 Node.js 环境选择 HTTP/2 库 spdy。当前来说,为 Node.js 主要有两个库实现了 HTTP/2 :

  • spdy
  • http2

两个库都跟 Node.js 核心模块的 http 和 https 模块 api 很相似。这就意味着如果你不使用 Express ,这两个库就没什么区别。然而, spdy 库支持 HTTP/2 和 Express,而 http2 库当前不支持 Express。这就是为什么我们选择使用 spdy , Express 是Node.js 适合搭配的实践标准的服务框架。之所以叫 spdy是来自于 Google 的 SPDY 协议后来升级成 HTTP/2。

HTTPS密钥和证书

要在浏览器(Firefox, Safari, Chrome, 或者 Edge)中访问使用 HTTPS ,你需要生成密钥和证书。去搜索 “ssl 密钥生成” 或者按照以下步骤去生成密钥、证书。在该文提供的源码中没有上传生成的密钥和证书


  1. $ mkdir http2-node-server-push  
  2. $ cd http2-node-server-push 
  3. $ openssl genrsa -des3 -passout pass:x -out server.pass.key 2048 
  4. ... 
  5. $ openssl rsa -passin pass:x -in server.pass.key -out server.key 
  6. writing RSA key 
  7. $ rm server.pass.key 
  8. $ openssl req -new -key server.key -out server.csr 
  9. ... 
  10. Country Name (2 letter code) [AU]:US 
  11. State or Province Name (full name) [Some-State]:California 
  12. ... 
  13. A challenge password []: 
  14. ... 
  15. $ openssl x509 -req -sha256 -days 365 -in server.csr -signkey server.key -out server.crt 

按照以上步骤,你就会产生三个 SSL 文件:

  • server.crt
  • server.csr
  • server.key

你就可以在 Node.js 的 server 脚本中读取 server.key 和 server.crt。

搭建项目

首先,通过 package.json 初始化项目和下载项目依赖:


  1. npm init -y 
  2. npm i express@4.14.0 morgan@1.7.0 spdy@3.4.0 --save 
  3. npm i node-dev@3.1.1 --save-dev 

当前的目录结构如下


  1. /http2-node-server-push 
  2. /node_modules 
  3. index.js 
  4. package.json 
  5. server.crt 
  6. server.csr 
  7. server.key 

然后,在 package.json 的 scripts 中添加两个脚本行,去简化命令(node-dev、自动重载):


  1. "start""./node_modules/.bin/node-dev ."
  2. "start-advanced""./node_modules/.bin/node-dev index-advanced.js" 

现在就可以开始使用 Node.js 、 Express.js 、 spdy 编写这个简单实现的带服务器推送 HTTP/2 服务器

编写脚本

首先,创建 index.js 脚本,并引入以及实例化依赖,看看查看上面的项目目录结构。其中,我使用了 ES6/ES2015 的语法 const来声明依赖,如果你不熟悉该声明语法,你可以进一步阅读Top 10 ES6 Features Every Busy JavaScript Developer Must Know。


  1. const http2 = require('spdy'
  2. const logger = require('morgan'
  3. const express = require('express'
  4. const app = express() 
  5. const fs = require('fs'

然后,设置 morgan logger 来监听服务器服务了哪些请求。


  1. app.use(logger('dev')) 

设置主页,该页面显示了 /pushy 是我们服务器推送的页面。


  1. app.get('/'function (req, res) { 
  2.   res.send(`hello, http2! go to /pushy`) 
  3. }) 

服务器推送只需简单的调用 spdy 实现的 res.push ,我们将文件路径名传输进去作为第一个参数,浏览器会使用这个路径名来匹配push promise 资源。res.push() 的第一个参数 /main.js 一定得跟 HTML 文件中需要的文件名相匹配。

而第二个参数是一个可选的对象,设置了该资源的一些资源信息描述。


  1. app.get('/pushy', (req, res) => { 
  2.   var stream = res.push('/main.js', { 
  3.     status: 200, // optional 
  4.     method: 'GET', // optional 
  5.     request: { 
  6.       accept: '*/*' 
  7.     }, 
  8.     response: { 
  9.       'content-type''application/javascript' 
  10.     } 
  11.   }) 
  12.   stream.on('error'function() { 
  13.   }) 
  14.   stream.end('alert("hello from push stream!");'
  15.   res.end('<script src="/main.js"></script>'
  16. }) 

你可以看到,stream 对象有两个方法 on 和 end。前者监听了 error 和 finish 事件,而后者则监听完成传输 end,然后就会main.js 就会触发弹窗。

或者,如果你拥有多个数据块,你可以选择使用 res.write() 然后最后使用 res.end(),其中 res.end() 会自动关闭结束response 而 res.write() 则让它保持开启。(该文的源码中未实现这种情况)

最后,读取 HTTPS 密钥和证书并使用 spdy 启动运转服务器。


  1. var options = { 
  2.   key: fs.readFileSync('./server.key'), 
  3.   cert: fs.readFileSync('./server.crt'
  4.  
  5. http2 
  6.   .createServer(options, app) 
  7.   .listen(8080, ()=>{ 
  8.     console.log(`Server is listening on https://localhost:8080. 
  9.     You can open the URL in the browser.`) 
  10.   } 

该实现的关键就在于,围绕着 streams(流)。不是树林中的河流,而是指开发者使用的从源头到客户端的建立起的数据通道流。如果你几乎不懂流以及 Node.js 和 Express.js 的 HTTP 的请求和返回信息

启动和对比 HTTP/2 Server Push

使用命令 node index.js 或者 npm stat 运行服务端脚本,然后访问 https://localhost:3000/pushy,就可以看到弹窗!而且我们在该路由不存在文件,你可以查看服务器终端的 logs ,只会有一个请求,而不是没使用服务器推送的时候的两个请求(一个 HTML、一个 JS)。

可以在浏览器中检测收到服务器端推送的行为。Chrome 启动开发者工具,打开 Network 标签,你可以看到 main.js 不存在绿色时间条,就是说明没有等待时间 TTFB (Time to First Byte)详细

再仔细看,可以看到请求是由 Push 开始发起的(Initiator列查看),没有使用服务器推送的 HTTP/2 服务器或者 HTTP/1,这一列就会显示文件名称,如 index.html 发起的显示就是 index.html。

实践就结束了,使用了 Express 和 Spdy 简单就实现了推送 JS 资源,而该资源可以用于后面 HTML 中 <script> 标签引入的。当然你也可以在脚本中使用 fs 来读取文件资源。

总结

HTTP/2 拥有很多很好的特性,服务器推送是最被看好的特性之一。它的好处就在于当浏览器请求页面的时候,同时发送必需的资源文件(图片,CSS 样式,JS 文件),而不需要等待客户端浏览器请求这些资源,从而做到更快的第一次渲染时间

HTTP/2 库 spdy 让开发者在基于 Express 的应用能更容易的实现服务器推送特性。


作者:Azat Mardan

来源:51CTO

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
通过搭建wordpress博客来学习云服务器的详细使用方法
云服务器越来越普及,很多企业及个人都纷纷上云,从传统的虚拟主机或者托管服务器上把网站和应用迁移到腾讯云、阿里云、百度云等这些云服务器上。 云服务器相比传统服务器的优势有很多,比如安全性、性价比、稳定性、可用性、便捷性等等各方面,大家可以百度自己了解,我就不在这里多说了。
1785 0
阿里云acp认证有什么用?如何通过阿里云ACP认证考试?
阿里云acp认证有什么用吗?其实当你拥有了阿里云acp认证,就等于向别人展示自己在云计算领域的专业能力,在求职时,无疑会更受互联网公司的青睐。如果你想了解阿里云acp认证考试题型和时间,下面认证大使就来给大家详细介绍一下。
77 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
4347 0
通过KNN算法预测数据所属NBA球员——Python实现
项目介绍 通过得分,篮板,助攻,出场时间四个数据来预测属于哪位球员。 选取了'LeBron James','Chris Paul','James Harden','Kevin Love','Dwight Howard'五位球员单场数据。
1160 0
通过Job Committer保证Mapreduce/Spark任务数据一致性
并发地向目标存储系统写数据是分布式任务的一个天然特性,通过在节点/进程/线程等级别的并发写数据,充分利用集群的磁盘和网络带宽,实现高容量吞吐。并发写数据的一个主要需要解决的问题就是如何保证数据一致性的问题,本文主要介绍MapReduce/Spark如何通过Job Committer机制解决写数据一致性的问题,以及在OSS等对象存储上的解决方案。
221 0
kbmmw 与extjs 通过JSON Base64 显示图片
delphi 官网上开始也来越多的介绍delphi与extjs 结合的例子,今天我就把官方的例子翻版一下。 官方使用C++builder 和webbroker 实现。 我使用kbmmw 来实现一下。
989 0
node 通过指令创建一个package.json文件及npm安装package.json
描述包的文件是package.json文件. 一个这样的文件,里面的信息还是挺大的.我们可以放弃手动建立.为了练手我们有命令行来建一个这样的包; 完成name,varsion....license项的信息填写后会出现这样一段话.
757 0
+关注
行者武松
杀人者,打虎武松也。
14545
文章
2569
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载