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

bigdevil_s 發布于2019-08-26 11:38 / 3395人閱讀

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

目的

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的知識，可以去知乎搜相關文章和回答。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/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