前端系列——nodejs環(huán)境下http2初嘗試

bigdevil_s 發(fā)布于2019-08-26 11:38 / 3392人閱讀

摘要：基礎(chǔ)理論是二進制協(xié)議這是一個復(fù)用協(xié)議。使用現(xiàn)狀案例淘寶案例京東案例知乎案例二月的公司不好意思，我們還沒用上這么牛逼的協(xié)議。本文內(nèi)容很淺，想要了解更多的知識，可以去知乎搜相關(guān)文章和回答。

目的

http2出來也有段時間了，很多網(wǎng)站都已經(jīng)實際應(yīng)用了它，而我還活在http1.1的時代，趁著還年輕，記性還行，花點時間研究了http2在nodejs中的使用。

http2基礎(chǔ)理論

HTTP2是二進制協(xié)議

這是一個復(fù)用協(xié)議。并行的請求能在同一個鏈接中處理，移除了HTTP/1.x中順序和阻塞的約束。

壓縮了headers。因為headers在一系列請求中常常是相似的，其移除了重復(fù)和傳輸重復(fù)數(shù)據(jù)的成本。

其允許服務(wù)器在客戶端緩存中填充數(shù)據(jù)，通過一個叫服務(wù)器推送的機制來提前請求。

對Alt-Svc的支持允許了給定資源的位置和資源鑒定，允許了更智能的CDN緩沖機制。

Client-Hints 的引入允許瀏覽器或者客戶端來主動交流它的需求，或者是硬件約束的信息給服務(wù)端。

在Cookie頭中引入安全相關(guān)的的前綴，現(xiàn)在幫助保證一個安全的cookie沒被更改過。

http2使用現(xiàn)狀

案例1：淘寶

案例2：京東

案例3：知乎

案例4：二月的公司
不好意思，我們還沒用上這么牛逼的協(xié)議。

nodejs應(yīng)用HTTP2協(xié)議

我參考了一個外國程序員和一個中國程序員的http2方案，然后對源碼進行了調(diào)整，主要目的在于體驗一把http2，沒有很深的知識。如果你想深入了解node中http2的使用，請看這里：nodejs之http2大全

開發(fā)環(huán)境

mac: 10.12.6
 node: v8.9.4

項目結(jié)構(gòu)

├── index.js // 入口文件
├── package-lock.json 
├── package.json //配置
├── public // 前端資源文件
│?? ├── bundle1.js
│?? ├── bundle2.js
│?? ├── index.html
│?? └── network.png
├── src //服務(wù)端文件
│?? ├── helper.js
│?? └── server.js
└── ssl //證書
    ├── cert.pem
    └── key.pem

步驟

1、你必須要安裝http2

npm i --save http2

2、生成ssl證書

我比較懶，就沒有自己生成，用別人生成好的證書來測試。

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

可以看到代碼中用到了fs讀取文件，helper也是獲取文件的插件。和使用http1.1不同的是，這里導(dǎo)入的是http2，然后用http2.createSecureServer()創(chuàng)建一個服務(wù)器。注意它的語法： http2.createSecureServer(options, callback)，options表示你的證書或者其他有關(guān)的配置選項，但是證書是必備的。

"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)

//創(chuàng)建HTTP2服務(wù)器
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、寫好服務(wù)端代碼，剩下的事情就是啟動項目，然后交給瀏覽器渲染html和加載資源。

5、關(guān)鍵點2 html文件
確保你的瀏覽器支持fetch，因為我沒有用第三方支持庫，for循環(huán)的作用是客戶端向服務(wù)器發(fā)起100個請求，讓我們更加直觀的看到http2請求多個資源的情況。



  


  體驗一把HTTP2

6、渲染結(jié)果

源碼

http2-test

總結(jié)

從測試結(jié)果來看，可以回顧一下http2的知識，非常明顯的一點是：同個域名只需要占用一個 TCP 連接，頭部壓縮需要抓包才能分析出來，還有服務(wù)端推送等功能，在這里沒有做測試，如果你也想體驗一把http2，下載源碼安裝好插件就能用了，同時也得注意你的開發(fā)環(huán)境是否支持。

本文內(nèi)容很淺，想要了解更多http2的知識，可以去知乎搜相關(guān)文章和回答。