|
|
|
|
公众号矩阵

HTTP 传输大文件的几种方案

当使用 HTTP 进行大文件传输时,我们可以考虑对大文件进行压缩。通常浏览器在发送请求时,都会携带 accept 和 accept-* 请求头信息,用于告诉服务器当前浏览器所支持的文件类型、支持的压缩格式列表和支持的语言。

作者:阿宝哥 来源:全栈修仙之路|2021-06-07 00:03

本文转载自微信公众号「全栈修仙之路」,作者阿宝哥。转载本文请联系全栈修仙之路公众号。

JavaScript 中如何实现大文件并发上传?JavaScript 中如何实现大文件并行下载? 这两篇文章中,阿宝哥介绍了如何利用 async-pool 这个库来优化传输大文件的功能。本文阿宝哥将为大家介绍一下 HTTP 传输大文件的几种方案。不过在介绍具体的方案之前,我们先使用 Node.js 的 fs 模块来生成一个 “大” 文件。

  1. const fs = require("fs"); 
  2.  
  3. const writeStream = fs.createWriteStream(__dirname + "/big-file.txt"); 
  4. for (let i = 0; i <= 1e5; i++) { 
  5.   writeStream.write(`${i} 我是阿宝哥,欢迎关注全栈修仙之路\n`, "utf8"); 
  6.  
  7. writeStream.end(); 

以上代码成功运行后,在当前的执行目录下将会生成一个大小为 5.5 MB 的文本文件,该文件将作为以下方案的 “素材”。准备工作完成之后,我们先来介绍第一种方案 —— 数据压缩。

一、数据压缩

当使用 HTTP 进行大文件传输时,我们可以考虑对大文件进行压缩。通常浏览器在发送请求时,都会携带 accept 和 accept-* 请求头信息,用于告诉服务器当前浏览器所支持的文件类型、支持的压缩格式列表和支持的语言。

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

gzip 的压缩率通常能够超过 60%,而 br 算法是专门为 HTML 设计的,压缩效率和性能比 gzip 还要好,能够再提高 20% 的压缩密度。

上述 HTTP 请求头中的 Accept-Encoding 字段,用于将客户端能够理解的内容编码方式(通常是某种压缩算法)告诉给服务端。通过内容协商的方式,服务端会选择一个客户端所支持的方式,并通过响应头 Content-Encoding 来通知客户端该选择。

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

以上的响应头告诉浏览器返回的 JS 脚本,是经过 gzip 压缩算法处理过的。不过需要注意的是,gzip 等压缩算法通常只对文本文件有较好的压缩率,而图片、音视频等多媒体文件数据本身就已经是高度压缩的,再用 gzip 进行压缩也不会有好的压缩效果,甚至还可能会出现变大的情况。

了解完 Accept-Encoding 和 Content-Encoding 字段,我们来验证一下未开启 gzip 和开启 gzip 的效果。

1.1 未开启 gzip

  1. const fs = require("fs"); 
  2. const http = require("http"); 
  3. const util = require("util"); 
  4. const readFile = util.promisify(fs.readFile); 
  5.  
  6. const server = http.createServer(async (req, res) => { 
  7.   res.writeHead(200, { 
  8.     "Content-Type""text/plain;charset=utf-8"
  9.   }); 
  10.   const buffer = await readFile(__dirname + "/big-file.txt"); 
  11.   res.write(buffer); 
  12.   res.end(); 
  13. }); 
  14.  
  15. server.listen(3000, () => { 
  16.   console.log("app starting at port 3000"); 
  17. }); 

1.2 开启 gzip

  1. const fs = require("fs"); 
  2. const zlib = require("zlib"); 
  3. const http = require("http"); 
  4. const util = require("util"); 
  5. const readFile = util.promisify(fs.readFile); 
  6. const gzip = util.promisify(zlib.gzip); 
  7.  
  8. const server = http.createServer(async (req, res) => { 
  9.   res.writeHead(200, { 
  10.     "Content-Type""text/plain;charset=utf-8"
  11.     "Content-Encoding""gzip" 
  12.   }); 
  13.   const buffer = await readFile(__dirname + "/big-file.txt"); 
  14.   const gzipData = await gzip(buffer); 
  15.   res.write(gzipData); 
  16.   res.end(); 
  17. }); 
  18.  
  19. server.listen(3000, () => { 
  20.   console.log("app starting at port 3000"); 
  21. }); 

观察上面两张图,我们可以直观感受到当传输 5.5 MB 的 big-file.txt 文件时,若开启 gzip 压缩后,文件被压缩成 256 kB。这样就大大加快了文件的传输。在实际工作场景中,我们可以使用 nginx 或 koa-static 来开启 gzip 压缩功能。接下来,我们来介绍另一个方案 —— 分块传输编码。

二、分块传输编码

分块传输编码主要应用于如下场景,即要传输大量的数据,但是在请求在没有被处理完之前响应的长度是无法获得的。例如,当需要用从数据库中查询获得的数据生成一个大的 HTML 表格的时候,或者需要传输大量的图片的时候。

要使用分块传输编码,则需要在响应头配置 Transfer-Encoding 字段,并设置它的值为 chunked 或 gzip, chunked:

  1. Transfer-Encoding: chunked 
  2. 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 数据分块

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

2.2 分块传输

  1. // http-chunk-server.js 
  2. const fs = require("fs"); 
  3. const http = require("http"); 
  4.  
  5. // 省略数据分块代码 
  6. http 
  7.   .createServer(async function (req, res) { 
  8.     res.writeHead(200, { 
  9.       "Content-Type""text/plain;charset=utf-8"
  10.       "Transfer-Encoding""chunked"
  11.       "Access-Control-Allow-Origin""*"
  12.     }); 
  13.     for (let index = 0; index < chunks.length; index++) { 
  14.       setTimeout(() => { 
  15.         let content = chunks[index].join("&"); 
  16.         res.write(`${content.length.toString(16)}\r\n${content}\r\n`); 
  17.       }, index * 1000); 
  18.     } 
  19.     setTimeout(() => { 
  20.       res.end(); 
  21.     }, chunks.length * 1000); 
  22.   }) 
  23.   .listen(3000, () => { 
  24.     console.log("app starting at port 3000"); 
  25.   }); 

使用 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 向客户端返回大文件时,我们最好使用流的形式来返回文件流,这样能避免处理大文件时,占用过多的内存。具体实现方式如下所示:

  1. const fs = require("fs"); 
  2. const zlib = require("zlib"); 
  3. const http = require("http"); 
  4.  
  5. http 
  6.   .createServer((req, res) => { 
  7.     res.writeHead(200, { 
  8.       "Content-Type""text/plain;charset=utf-8"
  9.       "Content-Encoding""gzip"
  10.     }); 
  11.     fs.createReadStream(__dirname + "/big-file.txt"
  12.       .setEncoding("utf-8"
  13.       .pipe(zlib.createGzip()) 
  14.       .pipe(res); 
  15.   }) 
  16.   .listen(3000, () => { 
  17.     console.log("app starting at port 3000"); 
  18.   }); 

当使用流的形式来返回文件数据时,HTTP 响应头 Transfer-Encoding 字段的值为 chunked,表示数据以一系列分块的形式进行发送。

  1. Connection: keep-alive 
  2. Content-Encoding: gzip 
  3. Content-Type: text/plain;charset=utf-8 
  4. Date: Sun, 06 Jun 2021 01:02:09 GMT 
  5. 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 语法

  1. Range: <unit>=<range-start>- 
  2. Range: <unit>=<range-start>-<range-end
  3. Range: <unit>=<range-start>-<range-end>, <range-start>-<range-end
  4. Range: <unit>=<range-start>-<range-end>, <range-start>-<range-end>, <range-start>-<range-end
  • unit:范围请求所采用的单位,通常是字节(bytes)。
  • :一个整数,表示在特定单位下,范围的起始值。
  • :一个整数,表示在特定单位下,范围的结束值。这个值是可选的,如果不存在,表示此范围一直延伸到文档结束。

了解完 Range 语法之后,我们来看一下实际的使用示例:

3.1.1 单一范围

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

3.1.2 多重范围

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

3.2 Range 请求示例

3.2.1 服务端代码

  1. // http/range/koa-range-server.js 
  2. const Koa = require("koa"); 
  3. const cors = require("@koa/cors"); 
  4. const serve = require("koa-static"); 
  5. const range = require('koa-range'); 
  6.  
  7. const app = new Koa(); 
  8.  
  9. // 注册中间件 
  10. app.use(cors()); // 注册CORS中间件 
  11. app.use(range); // 注册范围请求中间件 
  12. app.use(serve(".")); // 注册静态资源中间件 
  13.  
  14. app.listen(3000, () => { 
  15.   console.log("app starting at port 3000"); 
  16. }); 

3.2.2 客户端代码

  1. <!DOCTYPE html> 
  2. <html lang="zh-cn"
  3.   <head> 
  4.     <meta charset="UTF-8" /> 
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
  7.     <title>大文件范围请求示例(阿宝哥)</title> 
  8.   </head> 
  9.   <body> 
  10.     <h3>大文件范围请求示例(阿宝哥)</h3> 
  11.     <div id="msgList"></div> 
  12.     <script> 
  13.       const msgList = document.querySelector("#msgList"); 
  14.       function getBinaryContent(url, start, end, responseType = "arraybuffer") { 
  15.         return new Promise((resolve, reject) => { 
  16.           try { 
  17.             let xhr = new XMLHttpRequest(); 
  18.             xhr.open("GET", url, true); 
  19.             xhr.setRequestHeader("range", `bytes=${start}-${end}`); 
  20.             xhr.responseType = responseType; 
  21.             xhr.onload = function () { 
  22.               resolve(xhr.response); 
  23.             }; 
  24.             xhr.send(); 
  25.           } catch (err) { 
  26.             reject(new Error(err)); 
  27.           } 
  28.         }); 
  29.       } 
  30.  
  31.       getBinaryContent( 
  32.         "http://localhost:3000/big-file.txt"
  33.         0, 100, "text" 
  34.       ).then((text) => { 
  35.         msgList.append(`${text}`); 
  36.       }); 
  37.     </script> 
  38.   </body> 
  39. </html> 

使用 node koa-range-server.js 命令启动服务器之后,在浏览中访问 http://localhost:3000/index.html 地址,你将看到以下输出结果:

该示例对应的 HTTP 请求头和响应头(只包含部分头部信息)分别如下所示:

3.2.3 HTTP 请求头

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

3.2.4 HTTP 响应头

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

关于范围请求的相关内容就介绍到这里,想了解它在实际工作中的应用,可以继续阅读 JavaScript 中如何实现大文件并行下载? 这篇文章。

四、总结

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

五、参考资源

透视 HTTP 协议

MDN - HTTP 请求范围

MDN - Accept-Encoding

【编辑推荐】

  1. 鸿蒙官方战略合作共建——HarmonyOS技术社区
  2. HTTPS配置符合PCI DSS合规标准
  3. 什么是 HTTP/3,它为什么重要?
  4. 推动安全浏览:微软为Edge浏览器引入自动HTTPS切换功能
  5. 严重的Windows HTTP漏洞也会影响WinRM服务器
  6. .NET Core HttpClient请求异常思考
【责任编辑:武晓燕 TEL:(010)68476606】

点赞 0
分享:
大家都在看
猜你喜欢

订阅专栏+更多

带你轻松入门 RabbitMQ

带你轻松入门 RabbitMQ

轻松入门RabbitMQ
共4章 | loong576

9人订阅学习

数据湖与数据仓库的分析实践攻略

数据湖与数据仓库的分析实践攻略

助力现代化数据管理:数据湖与数据仓库的分析实践攻略
共3章 | 创世达人

9人订阅学习

云原生架构实践

云原生架构实践

新技术引领移动互联网进入急速赛道
共3章 | KaliArch

40人订阅学习

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊

51CTO服务号

51CTO官微