查看原文
其他

基于 HTTP Range 实现文件分片并发下载!

神说要有光zxg 神光的编程秘籍 2023-04-08

下载文件是一个常见的需求,只要服务端设置 Content-Disposition 为 attachment 就可以。

比如这样:

const express = require('express');
const app = express();

app.get('/aaa',(req, res, next) => {
    res.setHeader('Content-Disposition','attachment; filename="guang.txt"')
    res.end('guangguang');
})

app.listen(3000, () => {
    console.log(`server is running at port 3000`)
})

设置 Cotent-Disposition 为 attachment,指定 filename。

然后 html 里加一个 a 标签:

<!DOCTYPE html>
<html lang="en">
<body>
    <a href="http://localhost:3000/aaa">download</a>
</body>
</html>

跑起静态服务器:

点击链接就可以下载:

如果文件比较大,比如 500M,当你下载了 499M 的时候突然断网了,这时候下载就失败了,你就要从头再重新下载一次。

体验就很不爽。

能不能基于上次下载的地方接着下载,也就是断点续传呢?

可以的,HTTP 里有这部分协议,就是 range 相关的 header。

看下 MDN 对 range 的解释:

就是说你可以通过 Range 的 header 告诉服务端下载哪一部分内容。

比如这样:

Range: bytes=200-1000

就是下载 200-1000 字节的内容(两边都是闭区间),服务端返回 206 的状态码,并带上这部分内容。

可以省略右边部分,代表一直到结束:

Range: bytes=200-

也可以省略左边部分,代表从头开始:

Range: bytes=-1000

而且可以请求多段 range,服务端会返回多段内容:

Range: bytes=200-1000, 2000-6576, 19000-

知道了 Range header 的格式,我们来试一下吧!

添加这样一个路由:

app.get('/', (req, res, next) => {
    res.setHeader('Access-Control-Allow-Origin''*');

    res.download('index.txt', {
        acceptRangestrue
    })
})

设置允许跨域请求。

res.download 是读取文件内容返回,acceptRanges 选项为 true 就是会处理 range 请求(其实默认就是 true)。

文件 index.txt 的内容是这样的:

然后在 html 里访问一下这个接口:

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://www.unpkg.com/axios@1.3.5/dist/axios.min.js"></script>
</head>
<body>
    <script>
        axios.get('http://localhost:3000', {
            headers: {
                Range: 'bytes=0-4',
            }
        }).then((res) => {
            console.log(res.data);
        }).catch((err) => {
            console.log(err);
        })
    
</script>
</body>
</html>

访问页面,可以看到返回的是 206 的状态码!

这时候 Content-Length 就代表返回的内容的长度。

还有个 Content-Range 代表当前 range 的长度以及总长度。

当然,你也可以访问 5 以后的内容

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://www.unpkg.com/axios@1.3.5/dist/axios.min.js"></script>
</head>
<body>
    <script>
        axios.get('http://localhost:3000', {
            headers: {
                Range: 'bytes=5-',
            }
        }).then((res) => {
            console.log(res.data);
        }).catch((err) => {
            console.log(err);
        })
    
</script>
</body>
</html>

返回的是这样的:

这俩连接起来不就是整个文件的内容么?

这样就实现了断点续传!

我们再来试试如果超出 range 会怎么样:

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://www.unpkg.com/axios@1.3.5/dist/axios.min.js"></script>
</head>
<body>
    <script>
        axios.get('http://localhost:3000', {
            headers: {
                Range: 'bytes=500-600',
            }
        }).then((res) => {
            console.log(res.data);
        }).catch((err) => {
            console.log(err);
        })
    
</script>
</body>
</html>

请求 500-600 字节的内容,这时候响应是这样的:

返回的是 416 状态码,代表 range 不合法。

Range 不是还可以设置多段么?多段内容是怎么返回的呢?

我们来试一下:

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://www.unpkg.com/axios@1.3.5/dist/axios.min.js"></script>
</head>
<body>
    <script>
        axios.get('http://localhost:3000', {
            headers: {
                Range: 'bytes=0-2,4-5,7-',
            }
        }).then((res) => {
            console.log(res.data);
        }).catch((err) => {
            console.log(err);
        })
    
</script>
</body>
</html>

我分了 0-2, 4-5, 7- 这三段 range。

重新访问一下,这时候报了一个跨域的错误,说是发送预检请求失败。

浏览器会在三种情况下发送预检(preflight)请求:

  • 用到了非 GET、POST 的请求方法,比如 PUT、DELETE 等,会发预检请求看看服务端是否支持

  • 用到了一些非常规请求头,比如用到了 Content-Type,会发预检请求看看服务端是否支持

-用到了自定义 header,会发预检请求

为啥 Range 头单个 range 不会触发预检请求,而多个 range 就触发了呢?

因为多个 range 的时候返回的 Content-Type 是不一样的,是 multipart/byteranges 类型,比较特殊。

预检请求是 options 请求,那我们就支持一下:

app.options('/', (req, res, next) => {
    res.setHeader('Access-Control-Allow-Origin''*');
    res.setHeader('Access-Control-Allow-Headers''Range')
    res.end('');
});

然后重新访问:

这时候你会发现虽然是 206 状态码,但返回的是整个内容!

这是因为 express 只做了单 range 的支持,多段 range 可能它觉得没必要支持吧。

毕竟你发多个单 range 请求就能达到一样的效果。

MDN 官网的图片是支持多 range 请求的,我们用那个看看:

请求 3 个 range 的内容。

可以看到返回的 Content-Type 确实是 multipart/byteranges,然后指定了 boundary 边界线:

响应内容是这样的:

以这些 boundary 分界线隔开的每一段内容都包含 Content-Type、Content-Range 基于具体的那段 range 的内容。

这就是 multipart/byteranges 的格式,和我们常用的 multipart/form-data 很类似,只不过具体每段包含的 header 不同:

话说回来,其实 express 只支持单段 range 问题也不大,不就是多发几个请求就能达到一样的效果。

下面我们就用 range 来实现下文件的分片下载,最终合并成一个文件的功能。

我们来下载一个图片吧,分成两块下载,然后下载完合并起来。

就用这个图片好了:

app.get('/', (req, res, next) => {
    res.setHeader('Access-Control-Allow-Origin''*');
    res.download('guangguang.png', {
        acceptRangestrue
    })
})

我们写下分片下载的代码,就分两段:

这个图片是 626k,也就是 626000 字节,那我们就分成 0-300000 和 300001- 两段:

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://www.unpkg.com/axios@1.3.5/dist/axios.min.js"></script>
</head>
<body>
    <script>
        axios.get('http://localhost:3000', {
            headers: {
                Range: 'bytes=0-300000',
            }
        }).then((res) => {
        }).catch((err) => {
            console.log(err);
        })

        axios.get('http://localhost:3000', {
            headers: {
                Range: 'bytes=300001-',
            }
        }).then((res) => {
        }).catch((err) => {
            console.log(err);
        })
    
</script>
</body>
</html>

试一下,两个响应分别是这样的:

第一个响应还能看到图片的预览,确实只有一部分:

然后我们要把两段给拼起来,怎么拼呢?

操作二进制数据要用 JS 的 ArrayBuffer api 了:

浏览器还有个特有的 Blob api 也是用于操作二进制数据的。

我们指定下响应的类型为 arraybuffer:

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://www.unpkg.com/axios@1.3.5/dist/axios.min.js"></script>
</head>
<body>
    <script>
        const p1 = new Promise((resolve, reject) => {
            axios.get('http://localhost:3000', {
                headers: {
                    Range: 'bytes=0-300000',
                },
                responseType: 'arraybuffer'
            }).then((res) => {
                resolve(res.data)
            }).catch((err) => {
                reject(err)
            })
        })
        
        const p2 = new Promise((resolve, reject) => {
            axios.get('http://localhost:3000', {
                headers: {
                    Range: 'bytes=300001-',
                },
                responseType: 'arraybuffer'
            }).then((res) => {
                resolve(res.data)
            }).catch((err) => {
                reject(err)
            })
        })

        Promise.all([p1, p2]).then(res => {
            const [buffer1, buffer2] = res;
            console.log(buffer1, buffeer2)
        })
    
</script>
</body>
</html>

两个 ArrayBuffer 怎么合并呢?

ArrayBuffer 本身只是存储二进制数据的,要操作二进制数据要使用具体的 DataView 的子类。

比如我们想以字节的方式操作,那就是 Uint8Array 的方式(Uint 是 unsigned integer,无符号整数):

Promise.all([p1, p2]).then(res => {
    const [buffer1, buffer2] = res;

    const arr = new Uint8Array(buffer1.byteLength + buffer2.byteLength);

    const arr1 = new Uint8Array(buffer1);
    arr.set(arr1, 0);

    const arr2 = new Uint8Array(buffer2);
    arr.set(arr2, arr1.byteLength);

    console.log(arr.buffer)
})

每个 arraybuffer 都创建一个对应的 Uint8Array 对象,然后创建一个长度为两者之和的 Uint8Array 对象,把两个 Uint8Array 设置到不同位置。

最后输出合并的 Uint8Array 对象的 arraybuffer。

这样就完成了合并:

合并之后就是整个图片了。

那自然可以作为图片展示,也可以下载。

我添加一个 img 标签:

<img id="img"/>

然后把 ArrayBuffer 转成 Blob 设置以对象形式设置为 img 的 url

const blob = new Blob([arr.buffer]);
const url = URL.createObjectURL(blob);
img.src =url;

现在就可以看到完整的图片了:

现在我们就实现了文件的分片下载再合并!

甚至,你还可以再做一步下载:

const link = document.createElement('a');
link.href = url;
link.download = 'image.png';
document.body.appendChild(link);
link.click();
link.addEventListener('click', () => {
    link.remove();
});

现在的全部代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://www.unpkg.com/axios@1.3.5/dist/axios.min.js"></script>
</head>
<body>
    <img id="img"/>
    <script>
        const p1 = new Promise((resolve, reject) => {
            axios.get('http://localhost:3000', {
                headers: {
                    Range: 'bytes=0-300000',
                },
                responseType: 'arraybuffer'
            }).then((res) => {
                resolve(res.data)
            }).catch((err) => {
                reject(err)
            })
        })
        
        const p2 = new Promise((resolve, reject) => {
            axios.get('http://localhost:3000', {
                headers: {
                    Range: 'bytes=300001-',
                },
                responseType: 'arraybuffer'
            }).then((res) => {
                resolve(res.data)
            }).catch((err) => {
                reject(err)
            })
        })

        Promise.all([p1, p2]).then(res => {
            const [buffer1, buffer2] = res;

            const arr = new Uint8Array(buffer1.byteLength + buffer2.byteLength);
            
            const arr1 = new Uint8Array(buffer1);
            arr.set(arr1, 0);
            
            const arr2 = new Uint8Array(buffer2);
            arr.set(arr2, arr1.byteLength);

            const blob = new Blob([arr.buffer]);
            const url = URL.createObjectURL(blob);
            img.src = url;
            
            const link = document.createElement('a');
            link.href = url;
            link.download = 'image.jpg';
            document.body.appendChild(link);
            link.click();
            link.addEventListener('click', () => {
                link.remove();
            });
        })
    
</script>
</body>
</html>

当然,一般不会这么写死来用,我们可以封装一个通用的文件分片下载工具。

但分片之前需要拿到文件的大小,所以要增加一个接口:

app.get('/length',(req, res, next) => {
    res.setHeader('Access-Control-Allow-Origin''*');
    res.end('' + fs.statSync('./guangguang.png').size);
})

请求这个接口,返回文件大小:

然后我们来做分片:

async function concurrencyDownload(path, size, chunkSize) {
    let chunkNum = Math.ceil(size / chunkSize);

    const downloadTask = [];
    for(let i = 1; i <= chunkNum; i++) {
        const rangeStart = chunkSize * (i - 1);
        const rangeEnd = chunkSize * i - 1;

        downloadTask.push(axios.get(path, {
            headers: {
                Range`bytes=${rangeStart}-${rangeEnd}`,
            },
            responseType'arraybuffer'
        }))
    }
    const arrayBuffers = await Promise.all(downloadTask.map(task => {
        return task.then(res => res.data)
    }))
    return mergeArrayBuffer(arrayBuffers);
}

这部分代码不难理解:

首先根据 chunk 大小来计算一共几个 chunk,通过 Math.ceil 向上取整。

然后计算每个 chunk 的 range,构造下载任务的 promise。

Promise.all 等待所有下载完成,之后合并 arraybuffer。

这里 arraybuffer 合并也封装了一个 mergeArrayBuffer 的方法:

function  mergeArrayBuffer(arrays) {
    let totalLen = 0;
    for (let arr of arrays) {
        totalLen += arr.byteLength;
    }
    let res = new Uint8Array(totalLen)
    let offset = 0
    for (let arr of arrays) {
        let uint8Arr = new Uint8Array(arr)
        res.set(uint8Arr, offset)
        offset += arr.byteLength
    }
    return res.buffer
}

就是计算总长度,创建一个大的 Uint8Array,然后把每个 arraybuffer 转成 Uint8Array 设置到对应的位置,之后再转为 arraybuffer 就好了。

我们来测试下:

(async function() {
    const { data: len } = await axios.get('http://localhost:3000/length');
    const res = await concurrencyDownload('http://localhost:3000', len, 300000);
    console.log(res)

    const blob = new Blob([res]);
    const url = URL.createObjectURL(blob);
    img.src =url;
})();

调用分片下载的方法,每 300000 字节分一片,应该是可以分 3 片,我们看下结果:

确实,3 个 range 都对了,最后合并的结果也是对的:

至此,我们就实现了通用的分片下载功能!

全部前端代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://www.unpkg.com/axios@1.3.5/dist/axios.min.js"></script>
</head>
<body>
    <img id="img"/>
    <script>
        async function concurrencyDownload(path, size, chunkSize) {
            let chunkNum = Math.ceil(size / chunkSize);

            const downloadTask = [];
            for(let i = 1; i <= chunkNum; i++) {
                const rangeStart = chunkSize * (i - 1);
                const rangeEnd = chunkSize * i - 1;

                downloadTask.push(axios.get(path, {
                    headers: {
                        Range: `bytes=${rangeStart}-${rangeEnd}`,
                    },
                    responseType: 'arraybuffer'
                }))
            }
            const arrayBuffers = await Promise.all(downloadTask.map(task => {
                return task.then(res => res.data)
            }))
            return mergeArrayBuffer(arrayBuffers);
        }

        function  mergeArrayBuffer(arrays) {
            let totalLen = 0;
            for (let arr of arrays) {
                totalLen += arr.byteLength;
            }
            let res = new Uint8Array(totalLen)
            let offset = 0
            for (let arr of arrays) {
                let uint8Arr = new Uint8Array(arr)
                res.set(uint8Arr, offset)
                offset += arr.byteLength
            }
            return res.buffer
        }
        
        (async function() {
            const { data: len } = await axios.get('http://localhost:3000/length');
            const res = await concurrencyDownload('http://localhost:3000', len, 300000);
            console.log(res)

            const blob = new Blob([res]);
            const url = URL.createObjectURL(blob);
            img.src =url;
        })();

    
</script>
</body>
</html>

全部后端代码如下:

const express = require('express');
const fs = require('fs');
const app = express();

app.get('/length',(req, res, next) => {
    res.setHeader('Access-Control-Allow-Origin''*');
    res.end('' + fs.statSync('./guangguang.png').size);
})

app.options('/', (req, res, next) => {
    res.setHeader('Access-Control-Allow-Origin''*');
    res.setHeader('Access-Control-Allow-Headers''Range')
    res.end('');
});

app.get('/', (req, res, next) => {
    res.setHeader('Access-Control-Allow-Origin''*');
    res.download('guangguang.png', {
        acceptRangestrue
    })
})

app.listen(3000, () => {
    console.log(`server is running at port 3000`)
})

总结

文件下载是常见需求,只要设置 Content-Disposition 为 attachment 就可以。

但大文件的时候,下载中断了再重新传体验不好,或者想实现分片下载再合并的功能,这时候就可以用 Range 了。

在请求上带上 Range 的范围,如果服务器不支持,就会返回 200 加全部内容。

如果服务器支持 Range,会返回 206 的状态码和 Content-Range 的 header,表示这段内容的范围和全部内容的总长度。

如果 Range 超出了,会返回 416 的 状态码。

多段 Range 的时候,会返回 multipart/byteranges 的格式,类似 multipart/form-data 一样,都是通过 boundary 分割的,每一段都包含 Content-Range 和内容。

express 不支持多段 range,但我们可以通过发多个请求达到一样的效果。

我们基于 Range 实现了文件的分片下载,浏览器通过 ArrayBuffer 接收。

ArrayBuffer 只读,想要操作要通过 Uint8Array 来合并,之后再转为 ArrayBuffer。

这样就可以通过 URL.createObjectURL 设置为 img 的 src 或者通过 a 标签的 download 属性实现下载了。

其实分片下载用的还是挺多的,比如看视频的时候,是不是也是一段一段下载的呢?

您可能也对以下帖子感兴趣

文章有问题?点此查看未经处理的缓存