前端系列——nodejs環境下http2初嘗試

時間 2019-11-09

標籤前端系列 nodejs 環境 http2 http 嘗試欄目 HTTP/TCP 简体版

原文原文鏈接

目的

http2出來也有段時間了，不少網站都已經實際應用了它，而我還活在http1.1的時代，趁着還年輕，記性還行，花點時間研究了http2在nodejs中的使用。html

http2基礎理論

HTTP2是二進制協議
這是一個複用協議。並行的請求能在同一個連接中處理，移除了HTTP/1.x中順序和阻塞的約束。
壓縮了headers。由於headers在一系列請求中經常是類似的，其移除了重複和傳輸重複數據的成本。
其容許服務器在客戶端緩存中填充數據，經過一個叫服務器推送的機制來提早請求。
對Alt-Svc的支持容許了給定資源的位置和資源鑑定，容許了更智能的CDN緩衝機制。
Client-Hints 的引入容許瀏覽器或者客戶端來主動交流它的需求，或者是硬件約束的信息給服務端。
在Cookie頭中引入安全相關的的前綴，如今幫助保證一個安全的cookie沒被更改過。

http2使用現狀

案例1：淘寶前端

案例2：京東node

案例3：知乎git

案例4：二月的公司
很差意思，咱們還沒用上這麼牛逼的協議。
程序員

nodejs應用HTTP2協議

我參考了一個外國程序員和一箇中國程序員的http2方案，而後對源碼進行了調整，主要目的在於體驗一把http2，沒有很深的知識。若是你想深刻了解node中http2的使用，請看這裏：nodejs之http2大全github

開發環境

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

步驟

一、你必需要安裝http2npm

npm i --save http2

二、生成ssl證書json

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

三、項目中最核心的就是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)

四、寫好服務端代碼，剩下的事情就是啓動項目，而後交給瀏覽器渲染html和加載資源。

五、關鍵點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>

六、渲染結果