[[403958]]

本文轉載自微信公眾號「全棧修仙之路」，作者阿寶哥。轉載本文請聯系全棧修仙之路公眾號。

在 JavaScript 中如何實現大文件并發上傳? 和 JavaScript 中如何實現大文件并行下載? 這兩篇文章中，阿寶哥介紹了如何利用 async-pool 這個庫來優化傳輸大文件的功能。本文阿寶哥將為大家介紹一下 HTTP 傳輸大文件的幾種方案。不過在介紹具體的方案之前，我們先使用 Node.js 的 fs 模塊來生成一個 “大” 文件。

const fs = require("fs"); 
 
const writeStream = fs.createWriteStream(__dirname + "/big-file.txt"); 
for (let i = 0; i <= 1e5; i++) { 
  writeStream.write(`${i} 我是阿寶哥，歡迎關注全棧修仙之路\n`, "utf8"); 
} 
 
writeStream.end(); 

以上代碼成功運行后，在當前的執行目錄下將會生成一個大小為 5.5 MB 的文本文件，該文件將作為以下方案的 “素材”。準備工作完成之后，我們先來介紹第一種方案 —— 數據壓縮。

一、數據壓縮

當使用 HTTP 進行大文件傳輸時，我們可以考慮對大文件進行壓縮。通常瀏覽器在發送請求時，都會攜帶 accept 和 accept-* 請求頭信息，用于告訴服務器當前瀏覽器所支持的文件類型、支持的壓縮格式列表和支持的語言。

accept: */* 
accept-encoding: gzip, deflate, br 
accept-language: zh-CN,zh;q=0.9 

gzip 的壓縮率通常能夠超過 60%，而 br 算法是專門為 HTML 設計的，壓縮效率和性能比 gzip 還要好，能夠再提高 20% 的壓縮密度。

上述 HTTP 請求頭中的 Accept-Encoding 字段，用于將客戶端能夠理解的內容編碼方式(通常是某種壓縮算法)告訴給服務端。通過內容協商的方式，服務端會選擇一個客戶端所支持的方式，并通過響應頭 Content-Encoding 來通知客戶端該選擇。

cache-control: max-age=2592000 
content-encoding: gzip 
content-type: application/x-javascript 

以上的響應頭告訴瀏覽器返回的 JS 腳本，是經過 gzip 壓縮算法處理過的。不過需要注意的是，gzip 等壓縮算法通常只對文本文件有較好的壓縮率，而圖片、音視頻等多媒體文件數據本身就已經是高度壓縮的，再用 gzip 進行壓縮也不會有好的壓縮效果，甚至還可能會出現變大的情況。

了解完 Accept-Encoding 和 Content-Encoding 字段，我們來驗證一下未開啟 gzip 和開啟 gzip 的效果。

1.1 未開啟 gzip

const fs = require("fs"); 
const http = require("http"); 
const util = require("util"); 
const readFile = util.promisify(fs.readFile); 
 
const server = http.createServer(async (req, res) => { 
  res.writeHead(200, { 
    "Content-Type": "text/plain;charset=utf-8", 
  }); 
  const buffer = await readFile(__dirname + "/big-file.txt"); 
  res.write(buffer); 
  res.end(); 
}); 
 
server.listen(3000, () => { 
  console.log("app starting at port 3000"); 
}); 

1.2 開啟 gzip

const fs = require("fs"); 
const zlib = require("zlib"); 
const http = require("http"); 
const util = require("util"); 
const readFile = util.promisify(fs.readFile); 
const gzip = util.promisify(zlib.gzip); 
 
const server = http.createServer(async (req, res) => { 
  res.writeHead(200, { 
    "Content-Type": "text/plain;charset=utf-8", 
    "Content-Encoding": "gzip" 
  }); 
  const buffer = await readFile(__dirname + "/big-file.txt"); 
  const gzipData = await gzip(buffer); 
  res.write(gzipData); 
  res.end(); 
}); 
 
server.listen(3000, () => { 
  console.log("app starting at port 3000"); 
}); 

觀察上面兩張圖，我們可以直觀感受到當傳輸 5.5 MB 的 big-file.txt 文件時，若開啟 gzip 壓縮后，文件被壓縮成 256 kB。這樣就大大加快了文件的傳輸。在實際工作場景中，我們可以使用 nginx 或 koa-static 來開啟 gzip 壓縮功能。接下來，我們來介紹另一個方案 —— 分塊傳輸編碼。

二、分塊傳輸編碼

分塊傳輸編碼主要應用于如下場景，即要傳輸大量的數據，但是在請求在沒有被處理完之前響應的長度是無法獲得的。例如，當需要用從數據庫中查詢獲得的數據生成一個大的 HTML 表格的時候，或者需要傳輸大量的圖片的時候。

要使用分塊傳輸編碼，則需要在響應頭配置 Transfer-Encoding 字段，并設置它的值為 chunked 或 gzip, chunked：

Transfer-Encoding: chunked 
Transfer-Encoding: gzip, chunked 

響應頭 Transfer-Encoding 字段的值為 chunked，表示數據以一系列分塊的形式進行發送。需要注意的是 Transfer-Encoding 和 Content-Length 這兩個字段是互斥的，也就是說響應報文中這兩個字段不能同時出現。下面我們來看一下分塊傳輸的編碼規則：

• 每個分塊包含分塊長度和數據塊兩個部分;
• 分塊長度使用 16 進制數字表示，以 \r\n 結尾;
• 數據塊緊跟在分塊長度后面，也使用 \r\n 結尾，但數據不包含 \r\n;
• 終止塊是一個常規的分塊，表示塊的結束。不同之處在于其長度為 0，即 0\r\n\r\n。

了解完分塊傳輸編碼的相關知識后，阿寶哥將使用 big-file.txt 文件的前 100 行數據來演示分塊傳輸編碼是如何實現的。

2.1 數據分塊

const buffer = fs.readFileSync(__dirname + "/big-file.txt"); 
const lines = buffer.toString("utf-8").split("\n"); 
const chunks = chunk(lines, 10); 
 
function chunk(arr, len) { 
  let chunks = [], 
    i = 0, 
    n = arr.length; 
  while (i < n) { 
    chunks.push(arr.slice(i, (i += len))); 
  } 
  return chunks; 
} 

2.2 分塊傳輸

// http-chunk-server.js 
const fs = require("fs"); 
const http = require("http"); 
 
// 省略數據分塊代碼 
http 
  .createServer(async function (req, res) { 
    res.writeHead(200, { 
      "Content-Type": "text/plain;charset=utf-8", 
      "Transfer-Encoding": "chunked", 
      "Access-Control-Allow-Origin": "*", 
    }); 
    for (let index = 0; index < chunks.length; index++) { 
      setTimeout(() => { 
        let content = chunks[index].join("&"); 
        res.write(`${content.length.toString(16)}\r\n${content}\r\n`); 
      }, index * 1000); 
    } 
    setTimeout(() => { 
      res.end(); 
    }, chunks.length * 1000); 
  }) 
  .listen(3000, () => { 
    console.log("app starting at port 3000"); 
  }); 

使用 node http-chunk-server.js 命令啟動服務器之后，在瀏覽中訪問 http://localhost:3000/ 地址，你將看到以下輸出結果：

上圖是第 1 個數據塊返回的內容，當所有數據塊都傳輸完成之后，服務器會返回終止塊，即向客戶端發送 0\r\n\r\n。此外，對于返回的分塊數據，我們也可以利用 fetch API 中的響應對象，以流的形式來讀取已返回的數據塊，即通過 response.body.getReader() 來創建讀取器，然后調用 reader.read() 方法來讀取數據。

2.3 流式傳輸

其實當使用 Node.js 向客戶端返回大文件時，我們最好使用流的形式來返回文件流，這樣能避免處理大文件時，占用過多的內存。具體實現方式如下所示：

const fs = require("fs"); 
const zlib = require("zlib"); 
const http = require("http"); 
 
http 
  .createServer((req, res) => { 
    res.writeHead(200, { 
      "Content-Type": "text/plain;charset=utf-8", 
      "Content-Encoding": "gzip", 
    }); 
    fs.createReadStream(__dirname + "/big-file.txt") 
      .setEncoding("utf-8") 
      .pipe(zlib.createGzip()) 
      .pipe(res); 
  }) 
  .listen(3000, () => { 
    console.log("app starting at port 3000"); 
  }); 

當使用流的形式來返回文件數據時，HTTP 響應頭 Transfer-Encoding 字段的值為 chunked，表示數據以一系列分塊的形式進行發送。

Connection: keep-alive 
Content-Encoding: gzip 
Content-Type: text/plain;charset=utf-8 
Date: Sun, 06 Jun 2021 01:02:09 GMT 
Transfer-Encoding: chunked 

如果你對 Node.js Stream 感興趣的話，可以閱讀阿寶哥 Github 上 semlinker/node-deep —— 深入學習 Node.js Stream 基礎篇 這篇文章。

項目地址：https://github.com/semlinker/node-deep

三、范圍請求

HTTP 協議范圍請求允許服務器只發送 HTTP 消息的一部分到客戶端。范圍請求在傳送大的媒體文件，或者與文件下載的斷點續傳功能搭配使用時非常有用。如果在響應中存在 Accept-Ranges 首部(并且它的值不為 “none”)，那么表示該服務器支持范圍請求。

在一個 Range 首部中，可以一次性請求多個部分，服務器會以 multipart 文件的形式將其返回。如果服務器返回的是范圍響應，需要使用 206 Partial Content 狀態碼。假如所請求的范圍不合法，那么服務器會返回 416 Range Not Satisfiable 狀態碼，表示客戶端錯誤。服務器允許忽略 Range 首部，從而返回整個文件，狀態碼用 200 。

3.1 Range 語法

Range: <unit>=<range-start>- 
Range: <unit>=<range-start>-<range-end> 
Range: <unit>=<range-start>-<range-end>, <range-start>-<range-end> 
Range: <unit>=<range-start>-<range-end>, <range-start>-<range-end>, <range-start>-<range-end> 

• unit：范圍請求所采用的單位，通常是字節(bytes)。
• ：一個整數，表示在特定單位下，范圍的起始值。
• ：一個整數，表示在特定單位下，范圍的結束值。這個值是可選的，如果不存在，表示此范圍一直延伸到文檔結束。

了解完 Range 語法之后，我們來看一下實際的使用示例：

3.1.1 單一范圍

$ curl http://i.imgur.com/z4d4kWk.jpg -i -H "Range: bytes=0-1023" 

3.1.2 多重范圍

$ curl http://www.example.com -i -H "Range: bytes=0-50, 100-150" 

3.2 Range 請求示例

3.2.1 服務端代碼

// http/range/koa-range-server.js 
const Koa = require("koa"); 
const cors = require("@koa/cors"); 
const serve = require("koa-static"); 
const range = require('koa-range'); 
 
const app = new Koa(); 
 
// 注冊中間件 
app.use(cors()); // 注冊CORS中間件 
app.use(range); // 注冊范圍請求中間件 
app.use(serve(".")); // 注冊靜態資源中間件 
 
app.listen(3000, () => { 
  console.log("app starting at port 3000"); 
}); 

3.2.2 客戶端代碼

<!DOCTYPE html> 
<html lang="zh-cn"> 
  <head> 
    <meta charset="UTF-8" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
    <title>大文件范圍請求示例（阿寶哥）</title> 
  </head> 
  <body> 
    <h3>大文件范圍請求示例（阿寶哥）</h3> 
    <div id="msgList"></div> 
    <script> 
      const msgList = document.querySelector("#msgList"); 
      function getBinaryContent(url, start, end, responseType = "arraybuffer") { 
        return new Promise((resolve, reject) => { 
          try { 
            let xhr = new XMLHttpRequest(); 
            xhr.open("GET", url, true); 
            xhr.setRequestHeader("range", `bytes=${start}-${end}`); 
            xhr.responseType = responseType; 
            xhr.onload = function () { 
              resolve(xhr.response); 
            }; 
            xhr.send(); 
          } catch (err) { 
            reject(new Error(err)); 
          } 
        }); 
      } 
 
      getBinaryContent( 
        "http://localhost:3000/big-file.txt", 
        0, 100, "text" 
      ).then((text) => { 
        msgList.append(`${text}`); 
      }); 
    </script> 
  </body> 
</html> 

 使用 node koa-range-server.js 命令啟動服務器之后，在瀏覽中訪問 http://localhost:3000/index.html 地址，你將看到以下輸出結果：

該示例對應的 HTTP 請求頭和響應頭(只包含部分頭部信息)分別如下所示：

3.2.3 HTTP 請求頭

GET /big-file.txt HTTP/1.1 
Host: localhost:3000 
Connection: keep-alive 
Referer: http://localhost:3000/index.html 
Accept-Encoding: identity 
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8,id;q=0.7 
Range: bytes=0-100 

3.2.4 HTTP 響應頭

HTTP/1.1 206 Partial Content 
Vary: Origin 
Accept-Ranges: bytes 
Last-Modified: Sun, 06 Jun 2021 01:40:19 GMT 
Cache-Control: max-age=0 
Content-Type: text/plain; charset=utf-8 
Date: Sun, 06 Jun 2021 03:01:01 GMT 
Connection: keep-alive 
Content-Range: bytes 0-100/5243 
Content-Length: 101 

關于范圍請求的相關內容就介紹到這里，想了解它在實際工作中的應用，可以繼續閱讀 JavaScript 中如何實現大文件并行下載? 這篇文章。

四、總結

本文阿寶哥介紹了 HTTP 傳輸大文件的 3 種方案，希望了解完這些知識后，對大家今后的工作能有一些幫助。在實際使用中，大家要注意 Transfer-Encoding 和 Content-Encoding 之間的區別。Transfer-Encoding 在傳輸后會被自動解碼還原出原始數據，而 Content-Encoding 則必須由應用自行解碼。

五、參考資源

透視 HTTP 協議

MDN - HTTP 請求范圍

MDN - Accept-Encoding