# 實例:Http分塊下載
Http協議定義了分塊傳輸的響應header字段,但具體是否支持取決于Server的實現,我們可以指定請求頭的"range"字段來驗證服務器是否支持分塊傳輸。例如,我們可以利用curl命令來驗證:
```
bogon:~ duwen$ curl -H "Range: bytes=0-10" http://download.dcloud.net.cn/HBuilder.9.0.2.macosx_64.dmg -v
# 請求頭
> GET /HBuilder.9.0.2.macosx_64.dmg HTTP/1.1
> Host: download.dcloud.net.cn
> User-Agent: curl/7.54.0
> Accept: */*
> Range: bytes=0-10
#響應頭
< HTTP/1.1 206 Partial Content
< Content-Type: application/octet-stream
< Content-Length: 11
< Connection: keep-alive
< Date: Thu, 21 Feb 2019 06:25:15 GMT
< Content-Range: bytes 0-10/233295878
```
我們在請求頭中添加"Range: bytes=0-10"的作用是,告訴服務器本次請求我們只想獲取文件0-10(包括10,共11字節)這塊內容。如果服務器支持分塊傳輸的話,則響應狀態碼為206,表示“部分內容”,并且同時響應頭中變會包含”Content-Range“字段,如果不支持則不會包含,我們看看上面"Content-Range"的內容:
```
Content-Range: bytes 0-10/233295878
```
0-10表示本次返回的區塊,233295878代表文件的總長度,單位都是byte, 也就是該文件大概233M多一點。
基于此,我們可以設計一個簡單的多線程的文件分塊下載器,實現的思路是:
1. 先檢測是否支持分塊傳輸,如果不支持,則直接下載;若支持,則將剩余內容分塊下載。
2. 各個分塊下載時保存到各自臨時文件,等到所有分塊下載完后合并臨時文件。
3. 刪除臨時文件。
下面是整體的流程:
```
// 通過第一個分塊請求檢測服務器是否支持分塊傳輸
Response response = await downloadChunk(url, 0, firstChunkSize, 0);
if (response.statusCode == 206) { //如果支持
//解析文件總長度,進而算出剩余長度
total = int.parse(
response.headers.value(HttpHeaders.contentRangeHeader).split("/").last);
int reserved = total -
int.parse(response.headers.value(HttpHeaders.contentLengthHeader));
//文件的總塊數(包括第一塊)
int chunk = (reserved / firstChunkSize).ceil() + 1;
if (chunk > 1) {
int chunkSize = firstChunkSize;
if (chunk > maxChunk + 1) {
chunk = maxChunk + 1;
chunkSize = (reserved / maxChunk).ceil();
}
var futures = <Future>[];
for (int i = 0; i < maxChunk; ++i) {
int start = firstChunkSize + i * chunkSize;
//分塊下載剩余文件
futures.add(downloadChunk(url, start, start + chunkSize, i + 1));
}
//等待所有分塊全部下載完成
await Future.wait(futures);
}
//合并文件文件
await mergeTempFiles(chunk);
}
```
下面我們使用dio的`download` API 實現`downloadChunk`:
```
//start 代表當前塊的起始位置,end代表結束位置
//no 代表當前是第幾塊
Future<Response> downloadChunk(url, start, end, no) async {
progress.add(0); //progress記錄每一塊已接收數據的長度
--end;
return dio.download(
url,
savePath + "temp$no", //臨時文件按照塊的序號命名,方便最后合并
onReceiveProgress: createCallback(no), // 創建進度回調,后面實現
options: Options(
headers: {"range": "bytes=$start-$end"}, //指定請求的內容區間
),
);
}
```
接下來實現`mergeTempFiles`:
```
Future mergeTempFiles(chunk) async {
File f = File(savePath + "temp0");
IOSink ioSink= f.openWrite(mode: FileMode.writeOnlyAppend);
//合并臨時文件
for (int i = 1; i < chunk; ++i) {
File _f = File(savePath + "temp$i");
await ioSink.addStream(_f.openRead());
await _f.delete(); //刪除臨時文件
}
await ioSink.close();
await f.rename(savePath); //合并后的文件重命名為真正的名稱
}
```
下面我們看一下完整實現:
```
/// Downloading by spiting as file in chunks
Future downloadWithChunks(
url,
savePath, {
ProgressCallback onReceiveProgress,
}) async {
const firstChunkSize = 102;
const maxChunk = 3;
int total = 0;
var dio = Dio();
var progress = <int>[];
createCallback(no) {
return (int received, _) {
progress[no] = received;
if (onReceiveProgress != null && total != 0) {
onReceiveProgress(progress.reduce((a, b) => a + b), total);
}
};
}
Future<Response> downloadChunk(url, start, end, no) async {
progress.add(0);
--end;
return dio.download(
url,
savePath + "temp$no",
onReceiveProgress: createCallback(no),
options: Options(
headers: {"range": "bytes=$start-$end"},
),
);
}
Future mergeTempFiles(chunk) async {
File f = File(savePath + "temp0");
IOSink ioSink= f.openWrite(mode: FileMode.writeOnlyAppend);
for (int i = 1; i < chunk; ++i) {
File _f = File(savePath + "temp$i");
await ioSink.addStream(_f.openRead());
await _f.delete();
}
await ioSink.close();
await f.rename(savePath);
}
Response response = await downloadChunk(url, 0, firstChunkSize, 0);
if (response.statusCode == 206) {
total = int.parse(
response.headers.value(HttpHeaders.contentRangeHeader).split("/").last);
int reserved = total -
int.parse(response.headers.value(HttpHeaders.contentLengthHeader));
int chunk = (reserved / firstChunkSize).ceil() + 1;
if (chunk > 1) {
int chunkSize = firstChunkSize;
if (chunk > maxChunk + 1) {
chunk = maxChunk + 1;
chunkSize = (reserved / maxChunk).ceil();
}
var futures = <Future>[];
for (int i = 0; i < maxChunk; ++i) {
int start = firstChunkSize + i * chunkSize;
futures.add(downloadChunk(url, start, start + chunkSize, i + 1));
}
await Future.wait(futures);
}
await mergeTempFiles(chunk);
}
}
```
現在可以進行分塊下載了:
```
main() async {
var url = "http://download.dcloud.net.cn/HBuilder.9.0.2.macosx_64.dmg";
var savePath = "./example/HBuilder.9.0.2.macosx_64.dmg";
await downloadWithChunks(url, savePath, onReceiveProgress: (received, total) {
if (total != -1) {
print("${(received / total * 100).floor()}%");
}
});
}
```
### 思考
1. 分塊下載真的能提高下載速度嗎?
其實下載速度的主要瓶頸是取決于網絡速度和服務器的出口速度,如果是同一個數據源,分塊下載的意義并不大,因為服務器是同一個,出口速度確定的,主要取決于網速,而上面的例子正式同源分塊下載,讀者可以自己對比一下分塊和不分塊的的下載速度。如果有多個下載源,并且每個下載源的出口帶寬都是有限制的,這時分塊下載可能會更快一下,之所以說“可能”,是由于這并不是一定的,比如有三個源,三個源的出口帶寬都為1G/s,而我們設備所連網絡的峰值假設只有800M/s,那么瓶頸就在我們的網絡。即使我們設備的帶寬大于任意一個源,下載速度依然不一定就比單源單線下載快,試想一下,假設有兩個源A和B,速度A源是B源的3倍,如果采用分塊下載,兩個源各下載一半的話,讀者可以算一下所需的下載時間,然后再算一下只從A源下載所需的時間,看看哪個更快。
分塊下載的最終速度受設備所在網絡帶寬、源出口速度、每個塊大小、以及分塊的數量等諸多因素影響,實際過程中很難保證速度最優。在實際開發中,讀者可可以先測試對比后再決定是否使用。
2. 分塊下載有什么實際的用處嗎?
分塊下載還有一個比較使用的場景是斷點續傳,可以將文件分為若干個塊,然后維護一個下載狀態文件用以記錄每一個塊的狀態,這樣即使在網絡中斷后,也可以恢復中斷前的狀態,具體實現讀者可以自己嘗試一下,還是有一些細節需要特別注意的,比如分塊大小多少合適?下載到一半的塊如何處理?要不要維護一個任務隊列?
- 緣起
- 起步
- 移動開發技術簡介
- Flutter簡介
- 搭建Flutter開發環境
- 常見配置問題
- Dart語言簡介
- 第一個Flutter應用
- 計數器示例
- 路由管理
- 包管理
- 資源管理
- 調試Flutter APP
- Dart線程模型及異常捕獲
- 基礎Widgets
- Widget簡介
- 文本、字體樣式
- 按鈕
- 圖片和Icon
- 單選框和復選框
- 輸入框和表單
- 布局類Widgets
- 布局類Widgets簡介
- 線性布局Row、Column
- 彈性布局Flex
- 流式布局Wrap、Flow
- 層疊布局Stack、Positioned
- 容器類Widgets
- Padding
- 布局限制類容器ConstrainedBox、SizeBox
- 裝飾容器DecoratedBox
- 變換Transform
- Container容器
- Scaffold、TabBar、底部導航
- 可滾動Widgets
- 可滾動Widgets簡介
- SingleChildScrollView
- ListView
- GridView
- CustomScrollView
- 滾動監聽及控制ScrollController
- 功能型Widgets
- 導航返回攔截-WillPopScope
- 數據共享-InheritedWidget
- 主題-Theme
- 事件處理與通知
- 原始指針事件處理
- 手勢識別
- 全局事件總線
- 通知Notification
- 動畫
- Flutter動畫簡介
- 動畫結構
- 自定義路由過渡動畫
- Hero動畫
- 交錯動畫
- 自定義Widget
- 自定義Widget方法簡介
- 通過組合現有Widget實現
- 實例:TurnBox
- CustomPaint與Canvas
- 實例:圓形漸變進度條(自繪)
- 文件操作與網絡請求
- 文件操作
- Http請求-HttpClient
- Http請求-Dio package
- 實例:Http分塊下載
- WebSocket
- 使用Socket API
- Json轉Model
- 包與插件
- 開發package
- 插件開發:平臺通道簡介
- 插件開發:實現Android端API
- 插件開發:實現IOS端API
- 系統能力調用
- 國際化
- 讓App支持多語言
- 實現Localizations
- 使用Intl包
- Flutter核心原理
- Flutter UI系統
- Element和BuildContext
- RenderObject與RenderBox
- Flutter從啟動到顯示