前端系列——nodejs环境下http2初尝试

2019年8月24日 244次阅读 来源: 二月

目标

http2出来也有段时候了，许多网站都已现实运用了它，而我还活在http1.1的时期，趁着还年青，记性还行，花点时候研讨了http2在nodejs中的运用。

http2基础理论

  • HTTP2是二进制协定
  • 这是一个复用协定。并行的要求能在同一个链接中处置惩罚，移除了HTTP/1.x中递次和壅塞的束缚。
  • 紧缩了headers。由于headers在一系列要求中常常是类似的，其移除了反复和传输反复数据的本钱。
  • 其许可服务器在客户端缓存中添补数据，经由过程一个叫服务器推送的机制来提早要求。
  • 对Alt-Svc的支撑许可了给定资本的位置和资本审定，许可了更智能的CDN缓冲机制。
  • Client-Hints 的引入许可浏览器或许客户端来主动交换它的需求，或许是硬件束缚的信息给服务端。
  • 在Cookie头中引入平安相干的的前缀，如今协助保证一个平安的cookie没被更悛改。

http2运用近况

案例1：淘宝

《前端系列——nodejs环境下http2初尝试》

案例2：京东

《前端系列——nodejs环境下http2初尝试》

案例3：知乎

《前端系列——nodejs环境下http2初尝试》

案例4：二月的公司
不好意思，我们还没用上这么牛逼的协定。
《前端系列——nodejs环境下http2初尝试》

nodejs运用HTTP2协定

我参考了一个外国程序员和一个中国程序员的http2计划，然后对源码进行了调解，重要目标在于体验一把http2，没有很深的学问。假如你想深切相识node中http2的运用，请看这里：nodejs之http2大全

开辟环境

mac: 10.12.6

node: v8.9.4

项目构造

├── index.js // 进口文件
├── package-lock.json 
├── package.json //设置
├── public // 前端资本文件
│   ├── bundle1.js
│   ├── bundle2.js
│   ├── index.html
│   └── network.png
├── src //服务端文件
│   ├── helper.js
│   └── server.js
└── ssl //证书
    ├── cert.pem
    └── key.pem

步骤

1、你必须要装置http2

npm i --save http2

2、天生ssl证书

我比较懒，就没有本身天生，用他人天生好的证书来测试。

3、项目中最中心的就是server文件

能够看到代码顶用到了fs读取文件，helper也是猎取文件的插件。和运用http1.1差别的是，这里导入的是http2，然后用http2.createSecureServer()建立一个服务器。注重它的语法： http2.createSecureServer(options, callback)，options示意你的证书或许其他有关的设置选项，然则证书是必备的。

'use strict'
const fs = require('fs')
const path = require('path')
const http2 = require('http2')
const helper = require('./helper')

const PORT = process.env.PORT || 8080
const PUBLIC_PATH = path.join(__dirname, '../public')
const publicFiles = helper.getFiles(PUBLIC_PATH)

//建立HTTP2服务器
const server = http2.createSecureServer({
  cert: fs.readFileSync(path.join(__dirname, '../ssl/cert.pem')),
  key: fs.readFileSync(path.join(__dirname, '../ssl/key.pem'))
}, onRequest)

// Request 事宜
function onRequest (req, res) {
    // 途径指向 index.html
  const reqPath = req.url === '/' ? '/index.html' : req.url
    //猎取html资本
  const file = publicFiles.get(reqPath)
  // 文件不存在
  if (!file) {
    res.statusCode = 404
    res.end()
    return
  }
  
  res.stream.respondWithFD(file.fileDescriptor, file.headers)
}
server.listen(PORT)

4、写好服务端代码，剩下的事变就是启动项目，然后交给浏览器衬着html和加载资本。

5、症结点2 html文件
确保你的浏览器支撑fetch，由于我没有用第三方支撑库，for轮回的作用是客户端向服务器提议100个要求，让我们越发直观的看到http2要求多个资本的状况。

<html>
<head>
  <meta charset="UTF-8">
</head>
<body>
  <h1>体验一把HTTP2</h1>
</body>
  <script src="bundle1.js"></script>
  <script src="bundle2.js"></script>
<script>
        for(var i=0;i<100;i++) {
            fetch('//localhost:8080/network.png');
        }
</script>
</html>

6、衬着效果

《前端系列——nodejs环境下http2初尝试》

《前端系列——nodejs环境下http2初尝试》

源码

http2-test

总结

从测试效果来看，能够回忆一下http2的学问，异常显著的一点是：同个域名只须要占用一个 TCP 衔接，头部紧缩须要抓包才分析出来，另有服务端推送等功能，在这里没有做测试，假如你也想体验一把http2，下载源码装置好插件就可以用了，同时也得注重你的开辟环境是不是支撑。

本文内容很浅，想要相识更多http2的学问，能够去知乎搜相干文章和回复。

    原文作者：二月
    原文地址: https://segmentfault.com/a/1190000013184607
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞