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

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

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

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

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

搭建项目

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

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

当前的目录结构如下

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

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

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

现在就可以开始使用 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. 
  
  
  
  
  2. const logger = require('morgan')
    3. 
  
  
  
  
  3. const express = require('express')
    4. 
  
  
  
  
  4. const app = express()
    5. 
  
  
  
  
  5. const fs = require('fs')
    6.

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

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

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

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

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

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

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

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

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

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

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

该实现的关键就在于，围绕着 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 中