准备SSL证书
- 生成服务器私钥key
# 生成密码文件,省去输入密码
openssl genrsa -des3 -passout pass:123456 -out key/server.pass.key 2048 openssl rsa -passin pass:123456 -in key/server.pass.key -out key/server.key
- 生成证书请求文件CSR
openssl req -new -key key/server.key -out key/server.csr
- 生成证书
openssl x509 -req -days 3650 -in key/server.csr -signkey key/server.key -out key/server.crt
Node.js代码实现
- 新建项目
初始化项目并安装spdy和express:
npm init -y npm i express spdy -D
- 创建入口文件index.js,实例化express和引入spdy
const port = 3000 const spdy = require('spdy') const express = require('express') const path = require('path') const fs = require('fs') const app = express()
- 读取证书
const options = { key: fs.readFileSync(__dirname + '/key/server.key'), cert: fs.readFileSync(__dirname + '/key/server.crt') }
- 把证书传入spdy并创建服务
app.get('/', (req, res) => { res.end('hello from http/2') }) spdy .createServer(options, app) .listen(port, (error) => { if (error) { console.error(error) return process.exit(1) } else { console.log('Listening on port: ' + port + '.') } })
- 启动服务
$ node index.js
-
浏览器打开页面测试 https://127.0.0.1:3000, 因为我们创建的证书并没有经过CA机构认证,所以会提示页面不安全,点击继续访问即可。 查看网络请求协议可以看到网站使用了HTTP/2(h2)。
到此一个简易的基于Node.js的HTTP/2实现已经完成。 接下来我们看看HTTP/2协议中的Server Push功能。
服务端推送Server Push
为了改善延迟,HTTP/2引入了 Server Push ,这允许服务器在明确的请求之前将资源推送到浏览器。这就允许服务器充分利用空闲的网络来改善加载时间。
添加服务端推送代码:
app.get('/', (req, res) => { var stream = res.push('/main.js', { status: 200, // optional method: 'GET', // optional request: { accept: '*/*' }, response: { 'content-type': 'application/javascript' } }) stream.on('error', function() {}) stream.end(fs.readFileSync('./public/main.js')) res.end(fs.readFileSync('./public/index.html')) }) app.use('/', express.static(path.join(__dirname, 'public')))
网络请求可以看到main.js是由推送来的。在请求头部并没有太多的请求信息,因为和HTTP1.1不同,不需要客户端发起请求获取main.js,而是服务端在已经知道一个页面所需要的额外的资源,并且可以在响应初始请求时开始推送这些资源。
几个注意点:
- 只能推送当前服务器上的资源,无法推送托管在CDN上的资源。
- 除非客户端确定需要,否则不要推送,浏览器缓存的资源不要再推送。
- 不要把客户端需要的所有资源的推送,根据实际情况按需推送。