Flutter實戰(zhàn) 實例：Http分塊下載 使用WebSockets

2021-03-09 10:11 更新

本節(jié)將通過一個“Http分塊下載”的示例演示一下 dio 的具體用法。

#原理

Http 協(xié)議定義了分塊傳輸?shù)捻憫?yīng) header 字段，但具體是否支持取決于 Server 的實現(xiàn)，我們可以指定請求頭的"range"字段來驗證服務(wù)器是否支持分塊傳輸。例如，我們可以利用 curl 命令來驗證：

  1. bogon:~ duwen$ curl -H "Range: bytes=0-10" http://download.dcloud.net.cn/HBuilder.9.0.2.macosx_64.dmg -v
  2. ## 請求頭
  3. > GET /HBuilder.9.0.2.macosx_64.dmg HTTP/1.1
  4. > Host: download.dcloud.net.cn
  5. > User-Agent: curl/7.54.0
  6. > Accept: */*
  7. > Range: bytes=0-10
  8. ## 響應(yīng)頭
  9. < HTTP/1.1 206 Partial Content
  10. < Content-Type: application/octet-stream
  11. < Content-Length: 11
  12. < Connection: keep-alive
  13. < Date: Thu, 21 Feb 2019 06:25:15 GMT
  14. < Content-Range: bytes 0-10/233295878

我們在請求頭中添加"Range: bytes=0-10"的作用是，告訴服務(wù)器本次請求我們只想獲取文件0-10(包括10，共11字節(jié))這塊內(nèi)容。如果服務(wù)器支持分塊傳輸，則響應(yīng)狀態(tài)碼為206，表示“部分內(nèi)容”，并且同時響應(yīng)頭中包含“Content-Range”字段，如果不支持則不會包含。我們看看上面“Content-Range”的內(nèi)容：

  1. Content-Range: bytes 0-10/233295878

0-10表示本次返回的區(qū)塊，233295878 代表文件的總長度，單位都是 byte, 也就是該文件大概233M多一點。

基于此，我們可以設(shè)計一個簡單的多線程的文件分塊下載器，實現(xiàn)的思路是：

  1. 先檢測是否支持分塊傳輸，如果不支持，則直接下載；若支持，則將剩余內(nèi)容分塊下載。
  2. 各個分塊下載時保存到各自臨時文件，等到所有分塊下載完后合并臨時文件。
  3. 刪除臨時文件。

#實現(xiàn)

下面是整體的流程：

  1. // 通過第一個分塊請求檢測服務(wù)器是否支持分塊傳輸  
  2. Response response = await downloadChunk(url, 0, firstChunkSize, 0);
  3. if (response.statusCode == 206) {    //如果支持
  4.     //解析文件總長度，進而算出剩余長度
  5.     total = int.parse(
  6.         response.headers.value(HttpHeaders.contentRangeHeader).split("/").last);
  7.     int reserved = total -
  8.         int.parse(response.headers.value(HttpHeaders.contentLengthHeader));
  9.     //文件的總塊數(shù)(包括第一塊)
  10.     int chunk = (reserved / firstChunkSize).ceil() + 1;
  11.     if (chunk > 1) {
  12.         int chunkSize = firstChunkSize;
  13.         if (chunk > maxChunk + 1) {
  14.             chunk = maxChunk + 1;
  15.             chunkSize = (reserved / maxChunk).ceil();
  16.         }
  17.         var futures = <Future>[];
  18.         for (int i = 0; i < maxChunk; ++i) {
  19.             int start = firstChunkSize + i * chunkSize;
  20.             //分塊下載剩余文件  
  21.             futures.add(downloadChunk(url, start, start + chunkSize, i + 1));
  22.         }
  23.         //等待所有分塊全部下載完成
  24.         await Future.wait(futures);
  25.     }
  26.     //合并文件文件  
  27.     await mergeTempFiles(chunk);
  28. }

下面我們使用 dio 的download API 實現(xiàn)downloadChunk：

  1. //start 代表當(dāng)前塊的起始位置，end代表結(jié)束位置
  2. //no 代表當(dāng)前是第幾塊
  3. Future<Response> downloadChunk(url, start, end, no) async {
  4.   progress.add(0); //progress記錄每一塊已接收數(shù)據(jù)的長度
  5.   --end;
  6.   return dio.download(
  7.     url,
  8.     savePath + "temp$no", //臨時文件按照塊的序號命名，方便最后合并
  9.     onReceiveProgress: createCallback(no), // 創(chuàng)建進度回調(diào)，后面實現(xiàn)
  10.     options: Options(
  11.       headers: {"range": "bytes=$start-$end"}, //指定請求的內(nèi)容區(qū)間
  12.     ),
  13.   );
  14. }

接下來實現(xiàn)mergeTempFiles:

  1. Future mergeTempFiles(chunk) async {
  2.   File f = File(savePath + "temp0");
  3.   IOSink ioSink= f.openWrite(mode: FileMode.writeOnlyAppend);
  4.   //合并臨時文件  
  5.   for (int i = 1; i < chunk; ++i) {
  6.     File _f = File(savePath + "temp$i");
  7.     await ioSink.addStream(_f.openRead());
  8.     await _f.delete(); //刪除臨時文件
  9.   }
  10.   await ioSink.close();
  11.   await f.rename(savePath); //合并后的文件重命名為真正的名稱
  12. }

下面我們看一下完整實現(xiàn)：

  1. /// Downloading by spiting as file in chunks
  2. Future downloadWithChunks(
  3.   url,
  4.   savePath, {
  5.   ProgressCallback onReceiveProgress,
  6. }) async {
  7.   const firstChunkSize = 102;
  8.   const maxChunk = 3;
  11.   int total = 0;
  12.   var dio = Dio();
  13.   var progress = <int>[];
  16.   createCallback(no) {
  17.     return (int received, _) {
  18.       progress[no] = received;
  19.       if (onReceiveProgress != null && total != 0) {
  20.         onReceiveProgress(progress.reduce((a, b) => a + b), total);
  21.       }
  22.     };
  23.   }
  26.   Future<Response> downloadChunk(url, start, end, no) async {
  27.     progress.add(0);
  28.     --end;
  29.     return dio.download(
  30.       url,
  31.       savePath + "temp$no",
  32.       onReceiveProgress: createCallback(no),
  33.       options: Options(
  34.         headers: {"range": "bytes=$start-$end"},
  35.       ),
  36.     );
  37.   }
  40.   Future mergeTempFiles(chunk) async {
  41.     File f = File(savePath + "temp0");
  42.     IOSink ioSink= f.openWrite(mode: FileMode.writeOnlyAppend);
  43.     for (int i = 1; i < chunk; ++i) {
  44.       File _f = File(savePath + "temp$i");
  45.       await ioSink.addStream(_f.openRead());
  46.       await _f.delete();
  47.     }
  48.     await ioSink.close();
  49.     await f.rename(savePath);
  50.   }
  53.   Response response = await downloadChunk(url, 0, firstChunkSize, 0);
  54.   if (response.statusCode == 206) {
  55.     total = int.parse(
  56.         response.headers.value(HttpHeaders.contentRangeHeader).split("/").last);
  57.     int reserved = total -
  58.         int.parse(response.headers.value(HttpHeaders.contentLengthHeader));
  59.     int chunk = (reserved / firstChunkSize).ceil() + 1;
  60.     if (chunk > 1) {
  61.       int chunkSize = firstChunkSize;
  62.       if (chunk > maxChunk + 1) {
  63.         chunk = maxChunk + 1;
  64.         chunkSize = (reserved / maxChunk).ceil();
  65.       }
  66.       var futures = <Future>[];
  67.       for (int i = 0; i < maxChunk; ++i) {
  68.         int start = firstChunkSize + i * chunkSize;
  69.         futures.add(downloadChunk(url, start, start + chunkSize, i + 1));
  70.       }
  71.       await Future.wait(futures);
  72.     }
  73.     await mergeTempFiles(chunk);
  74.   }
  75. }

現(xiàn)在可以進行分塊下載了：

  1. main() async {
  2.   var url = "http://download.dcloud.net.cn/HBuilder.9.0.2.macosx_64.dmg";
  3.   var savePath = "./example/HBuilder.9.0.2.macosx_64.dmg";
  4.   await downloadWithChunks(url, savePath, onReceiveProgress: (received, total) {
  5.     if (total != -1) {
  6.       print("${(received / total * 100).floor()}%");
  7.     }
  8.   });
  9. }

#思考

  1. 分塊下載真的能提高下載速度嗎？

其實下載速度的主要瓶頸是取決于網(wǎng)絡(luò)速度和服務(wù)器的出口速度，如果是同一個數(shù)據(jù)源，分塊下載的意義并不大，因為服務(wù)器是同一個，出口速度確定的，主要取決于網(wǎng)速，而上面的例子正式同源分塊下載，讀者可以自己對比一下分塊和不分塊的的下載速度。如果有多個下載源，并且每個下載源的出口帶寬都是有限制的，這時分塊下載可能會更快一下，之所以說“可能”，是由于這并不是一定的，比如有三個源，三個源的出口帶寬都為 1G/s，而我們設(shè)備所連網(wǎng)絡(luò)的峰值假設(shè)只有 800M/s，那么瓶頸就在我們的網(wǎng)絡(luò)。即使我們設(shè)備的帶寬大于任意一個源，下載速度依然不一定就比單源單線下載快，試想一下，假設(shè)有兩個源 A 和 B，速度 A 源是 B 源的3倍，如果采用分塊下載，兩個源各下載一半的話，讀者可以算一下所需的下載時間，然后再算一下只從 A 源下載所需的時間，看看哪個更快。

分塊下載的最終速度受設(shè)備所在網(wǎng)絡(luò)帶寬、源出口速度、每個塊大小、以及分塊的數(shù)量等諸多因素影響，實際過程中很難保證速度最優(yōu)。在實際開發(fā)中，讀者可可以先測試對比后再決定是否使用。

  1. 分塊下載有什么實際的用處嗎？

分塊下載還有一個比較使用的場景是斷點續(xù)傳，可以將文件分為若干個塊，然后維護一個下載狀態(tài)文件用以記錄每一個塊的狀態(tài)，這樣即使在網(wǎng)絡(luò)中斷后，也可以恢復(fù)中斷前的狀態(tài)，具體實現(xiàn)讀者可以自己嘗試一下，還是有一些細節(jié)需要特別注意的，比如分塊大小多少合適？下載到一半的塊如何處理？要不要維護一個任務(wù)隊列？

以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號