【HTTP】989- HTTP 传输大文件的几种方案

亦凉 2022-10-07 03:55 169阅读 0赞

在 [JavaScript 中如何实现大文件并发上传？][JavaScript] 和 [JavaScript 中如何实现大文件并行下载？][JavaScript 1] 这两篇文章中，阿宝哥介绍了如何利用 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");
    });

![a05d97650881beb4f3dd2a19a735815e.png][]

#### 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");
    });

![386c1cf6b87241f3b6c764ed93ad0132.png][]

观察上面两张图，我们可以直观感受到当传输 **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/ 地址，你将看到以下输出结果：

![890f1e914b3f78e1edc0b45977e89606.png][]

上图是第 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 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 地址，你将看到以下输出结果：

![7dd6483d5f93b1c6f7610b55dac9c48a.png][]

该示例对应的 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 中如何实现大文件并行下载？][JavaScript 1] 这篇文章。

### 四、总结 ###

本文阿宝哥介绍了 HTTP 传输大文件的 3 种方案，希望了解完这些知识后，对大家今后的工作能有一些帮助。在实际使用中，大家要注意 `Transfer-Encoding` 和 `Content-Encoding` 之间的区别。`Transfer-Encoding` 在传输后会被自动解码还原出原始数据，而 `Content-Encoding` 则必须由应用自行解码。

### 五、参考资源 ###

*  透视 HTTP 协议
 *  MDN - HTTP 请求范围
 *  MDN - Accept-Encoding

![352e5495c7e9df9c6953111013b58aa7.gif][]

[1. JavaScript 重温系列（22篇全）][1. JavaScript _22]

[2. ECMAScript 重温系列（10篇全）][2. ECMAScript _10]

[3. JavaScript设计模式 重温系列（9篇全）][3. JavaScript_ _9]

4. [正则 / 框架 / 算法等 重温系列（16篇全）][_ _ _ _ _16]

5. [Webpack4 入门（上）][Webpack4]|| [Webpack4 入门（下）][Webpack4 1]

6. [MobX 入门（上）][MobX] || [MobX 入门（下）][MobX 1]

7. 120[\+篇原创系列汇总][Link 1]

![3182fc1427dd21959223c490fe8bcfa2.gif][]

回复“**加群**”与大佬们一起交流学习~

点击“**阅读原文**”查看 120+ 篇原创文章

[JavaScript]: https://mp.weixin.qq.com/s?__biz=MzI2MjcxNTQ0Nw%3D%3D&idx=1&mid=2247491853&scene=21&sn=aa59ee95df84a81f7b4700fa4fec9436#wechat_redirect
[JavaScript 1]: https://mp.weixin.qq.com/s?__biz=MzI2MjcxNTQ0Nw%3D%3D&idx=1&mid=2247490849&scene=21&sn=9d062c04baeb629d9b69a9fb4e7c3599#wechat_redirect
[a05d97650881beb4f3dd2a19a735815e.png]: /images/20221005/733f53ccec7f46128b80b3c849194db7.png
[386c1cf6b87241f3b6c764ed93ad0132.png]: /images/20221005/4816beed788946bd91c261098d30d4ab.png
[890f1e914b3f78e1edc0b45977e89606.png]: /images/20221005/281bfaadd31a48c0991b29165c4a56f4.png
[7dd6483d5f93b1c6f7610b55dac9c48a.png]: /images/20221005/a1009822026e4c9dab5d1a09fe83dacb.png
[352e5495c7e9df9c6953111013b58aa7.gif]: /images/20221005/c8c00e47d85d4458a1b7c3a8c93f4798.png
[1. JavaScript _22]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224ea86b5adfc10c3aa1841be3879b9360d671e98cc73391c2490246f1348857b9821d32c&idx=1&mid=2458453187&scene=21&sn=a69b4d7d991867a07a933f86e66b9f55#wechat_redirect
[2. ECMAScript _10]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e086b5adf6dad41a0d36b77a9bfb4bc9f0d29a816266b3e28c892e54274967dbce380b&idx=1&mid=2458453193&scene=21&sn=e5392cb77bc17c9e94b6c826b5f52a83#wechat_redirect
[3. JavaScript_ _9]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e386b5adf554ab928cdeaf7ee16dbb2d895be17f2a12a59054a75b913470ca7649bbc7&idx=1&mid=2458453194&scene=21&sn=e7f0734b04484bee5e10a85a7cbb85c1#wechat_redirect
[_ _ _ _ _16]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e286b5adf432850f82db18cc8647d639836798cf16b478d9a6f7c81df87c6da5257684&idx=1&mid=2458453195&scene=21&sn=1e0c8b7ea8ddc207b523ec0a636a5254#wechat_redirect
[Webpack4]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2251f86b5ac09dbbbb7c8e1d80c6cbd793a523cdfa690f8734def57812e616b9906aeec79&idx=1&mid=2458453302&scene=21&sn=904e40a421024ea0d394e9850b674012#wechat_redirect
[Webpack4 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2251e86b5ac08464872cd880811423e0d1bbcebbe11dcac9d99fa38c5332c089c06d65d95&idx=1&mid=2458453303&scene=21&sn=422f2b5e22c3b0e91a8353ee7e53fed9#wechat_redirect
[MobX]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2264c86b5af5aa7300a04d55efead6223e310d68e10222cd3577a25c783d3429f00767960&idx=1&mid=2458453605&scene=21&sn=0a506769d5eeb7953f676e93fb4d18eb#wechat_redirect
[MobX 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2264086b5af5611524eedb0d409afe86d859dce6ceff1c17ddab49d353c385e45611a73fa&idx=1&mid=2458453609&scene=21&sn=f0c22e82f2537204d9b173161bae6b82#wechat_redirect
[Link 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224dd86b5adcbd98189315e60de6a0106993690b69927cc1c1f19fd8f591fefce4e3db51f&idx=2&mid=2458453236&scene=21&sn=daf00392f960c115463c5aaf980620b4#wechat_redirect
[3182fc1427dd21959223c490fe8bcfa2.gif]: /images/20221005/0260d24dc3b147c18252f28444b129a4.png