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

bigdevil_s 发布于2019-08-26 11:38 / 3375人阅读

摘要：基础理论是二进制协议这是一个复用协议。使用现状案例淘宝案例京东案例知乎案例二月的公司不好意思，我们还没用上这么牛逼的协议。本文内容很浅，想要了解更多的知识，可以去知乎搜相关文章和回答。

目的

http2出来也有段时间了，很多网站都已经实际应用了它，而我还活在http1.1的时代，趁着还年轻，记性还行，花点时间研究了http2在nodejs中的使用。

http2基础理论

HTTP2是二进制协议

这是一个复用协议。并行的请求能在同一个链接中处理，移除了HTTP/1.x中顺序和阻塞的约束。

压缩了headers。因为headers在一系列请求中常常是相似的，其移除了重复和传输重复数据的成本。

其允许服务器在客户端缓存中填充数据，通过一个叫服务器推送的机制来提前请求。

对Alt-Svc的支持允许了给定资源的位置和资源鉴定，允许了更智能的CDN缓冲机制。

Client-Hints 的引入允许浏览器或者客户端来主动交流它的需求，或者是硬件约束的信息给服务端。

在Cookie头中引入安全相关的的前缀，现在帮助保证一个安全的cookie没被更改过。

http2使用现状

案例1：淘宝

案例2：京东

案例3：知乎

案例4：二月的公司
不好意思，我们还没用上这么牛逼的协议。

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请求多个资源的情况。



  


  体验一把HTTP2

6、渲染结果

源码

http2-test

总结

从测试结果来看，可以回顾一下http2的知识，非常明显的一点是：同个域名只需要占用一个 TCP 连接，头部压缩需要抓包才能分析出来，还有服务端推送等功能，在这里没有做测试，如果你也想体验一把http2，下载源码安装好插件就能用了，同时也得注意你的开发环境是否支持。

本文内容很浅，想要了解更多http2的知识，可以去知乎搜相关文章和回答。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107288.html

【Electron】酷家乐客户端开发实践分享 — 入坑篇

摘要：系列文章酷家乐客户端开发实践分享入坑篇酷家乐客户端开发实践分享软件自动更新酷家乐客户端开发实践分享浏览器启动客户端酷家乐客户端开发实践分享进程通信酷家乐客户端开发实践分享下载管理器不定期更新本文的初衷所使用的技术栈和前端工程师完美契合。作者：钟离，酷家乐PC客户端负责人原文地址：https://webfe.kujiale.com/electron-ku-jia-le-ke-hu-d...

jay_tian 2019-08-02 15:16 评论0 收藏0
【Electron】酷家乐客户端开发实践分享 — 入坑篇

摘要：系列文章酷家乐客户端开发实践分享入坑篇酷家乐客户端开发实践分享软件自动更新酷家乐客户端开发实践分享浏览器启动客户端酷家乐客户端开发实践分享进程通信酷家乐客户端开发实践分享下载管理器不定期更新本文的初衷所使用的技术栈和前端工程师完美契合。作者：钟离，酷家乐PC客户端负责人原文地址：https://webfe.kujiale.com/electron-ku-jia-le-ke-hu-d...

TwIStOy 2019-08-23 18:05 评论0 收藏0
Notadd 2.0 全新 Node.js 版本～（开发中） [从 PHP 到 node 的踩坑记

摘要：有着最全的协议支持，同时有各种非阻塞拓展，可以说是最符合要求的，但是异步需要对做很大的改动。的计划将基于开发，同时也提供一些无法提供的功能和特性。一点小遗憾对于 Notadd 我们本来期望它实现更多... 尽管我们也尝试做了很多努力，但是由于 PHP 本身的局限，以及考虑到开发环境配置的复杂程度，最终使用了折中方案。接下来，我们谈谈整个技术选型历程，也供今后相关开发者做借鉴和参考：...

Tonny 2019-06-28 14:31 评论0 收藏0
学会JavaScript测试你就是同行中最亮的仔（妹）

摘要：测试驱动开发是一种使用自动化单元测试来推动软件设计并强制依赖关系解耦的技术。使用这种做法的结果是一套全面的单元测试，可随时运行，以提供软件可以正常工作的反馈。 showImg(http://ws1.sinaimg.cn/large/005NRne3gy1g2cmxxl7c5j30nc0c8h1p.jpg); 一、几种概念（稍微了解一下） ATDD： Acceptance Test Dr...

fengxiuping 2019-08-23 17:20 评论0 收藏0