HTTP 傳輸大文件的幾種方案
在 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-start>
:一個整數,表示在特定單位下,範圍的起始值。 -
<range-end>
:一個整數,表示在特定單位下,範圍的結束值。這個值是可選的,如果不存在,表示此範圍一直延伸到文檔結束。
瞭解完 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 />
<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
本文由 Readfog 進行 AMP 轉碼,版權歸原作者所有。
來源:https://mp.weixin.qq.com/s/ZxVD29AYHG7gUL99D8uEpw