(编辑:jimmy 日期: 2025/1/16 浏览:2)
本文基于http Range Requests协议,实现了分片下载的功能。
使用场景包括基于浏览器的流文件片段传输、基于客户端的分片下载等。
原理
http通过Range Requests相关的header,可以与服务器进行协商,实现分部分的请求。
这里就不细说具体协议内容了,具体可以参考这两篇文章,解释的非常详细:
下面贴一下实现过程。
服务端代码
服务端用node实现:
app.use(async ctx => { const file = path.join(__dirname, `${PATH}${ctx.path}`); // 1、404检查 try { fs.accessSync(file); } catch (e) { return ctx.response.status = 404; } const method = ctx.request.method; const { size } = fs.statSync(file); // 2、响应head请求,返回文件大小 if ('HEAD' == method) { return ctx.set('Content-Length', size); } const range = ctx.headers['range']; // 3、通知浏览器可以进行分部分请求 if (!range) { return ctx.set('Accept-Ranges', 'bytes'); } const { start, end } = getRange(range); // 4、检查请求范围 if (start >= size || end >= size) { ctx.response.status = 416; return ctx.set('Content-Range', `bytes */${size}`); } // 5、206分部分响应 ctx.response.status = 206; ctx.set('Accept-Ranges', 'bytes'); ctx.set('Content-Range', `bytes ${start}-${end "htmlcode"><html> <head> <title>分片流传输</title> <script type="text/javascript"> function jump() { const player = document.getElementById('musicPlayer'); // 从30s开始播放 player.currentTime = 30; } </script> </head> <body> <audio id="musicPlayer" src="/UploadFiles/2021-04-02/source.mp3">最终的效果是这样的:
对比两张图,当html加载完成,浏览器自动请求资源,此时header有
Range: bytes=0-
,表示从第0 byte开始加载资源;当点击跳到30s处播放时,此时header变成了Range: bytes=3145728-
。同样用这个服务端代码,还可以实现一个客户端,模拟一下分包下载。
node分包下载
这个例子演示了,对一个资源,并发的实现分部分的下载,然后再合并成一个文件。
这里也是用node实现:
import request from 'request'; import path from 'path'; import fs from 'fs'; const SINGLE = 1024 * 1000; const SOURCE = 'http://127.0.0.1:3000/source.mp3'; request({ method: 'HEAD', uri: SOURCE, }, (err, res) => { if (err) return console.error(err); const file = path.join(__dirname, './download/source.mp3'); try { fs.closeSync(fs.openSync(file, 'w')); } catch (err) { return console.error(err); } const size = Number(res.headers['content-length']); const length = parseInt(size / SINGLE); for (let i=0; i<length; i++) { let start = i * SINGLE; let end = i == length "external nofollow" target="_blank" href="https://tools.ietf.org/html/rfc7233">https://tools.ietf.org/html/rfc7233
https://www.jb51.net/article/68284.htm以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
下一篇:在小程序开发中使用npm的方法高通和谷歌日前宣布,推出首次面向搭载骁龙的Windows PC的优化版Chrome浏览器。
在对骁龙X Elite参考设计的初步测试中,全新的Chrome浏览器在Speedometer 2.1基准测试中实现了显著的性能提升。
预计在2024年年中之前,搭载骁龙X Elite计算平台的PC将面世。该浏览器的提前问世,有助于骁龙PC问世就获得满血表现。
谷歌高级副总裁Hiroshi Lockheimer表示,此次与高通的合作将有助于确保Chrome用户在当前ARM兼容的PC上获得最佳的浏览体验。