node实现分片下载的示例代码


Posted in Javascript onOctober 17, 2018

本文基于http Range Requests协议,实现了分片下载的功能。

使用场景包括基于浏览器的流文件片段传输、基于客户端的分片下载等。

原理

http通过Range Requests相关的header,可以与服务器进行协商,实现分部分的请求。

这里就不细说具体协议内容了,具体可以参考这两篇文章,解释的非常详细:

  1. https://tools.ietf.org/html/rfc7233
  2. https://3water.com/article/68284.htm

下面贴一下实现过程。

服务端代码

服务端用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 ? end : size - 1}/${size}`);
 ctx.body = fs.createReadStream(file, { start, end });
});

app.listen(3000, () => console.log('partial content server start'));

function getRange(range) {
 var match = /bytes=([0-9]*)-([0-9]*)/.exec(range);
 const requestRange = {};
 if (match) {
  if (match[1]) requestRange.start = Number(match[1]);
  if (match[2]) requestRange.end = Number(match[2]);
 }
 return requestRange;
}

代码实现的功能逻辑大致是:

  • 对请求的资源做检查,不存在则响应404
  • 对于HEAD请求,返回资源大小
  • 如果GET请求没有告知range,返回Content-Length,告知浏览器可以进行分片请求
  • 如果请求设置了range,则检查range是否合法,不合法返回合法的rangge
  • 一切正常,获取文件range范围部分,做流响应

代码很简单,把Range Requests协议对应实现一遍就ok了,当然这里没有完全实现协议的内容,但已经满足了这里演示的需求。

服务端代码ok了,用一个浏览器的demo来检验一下。

浏览器例子

现代浏览器基本都实现了Range Requests,这里用audio标签作为例子。

<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="http:127.0.0.1:3000/source.mp3" controls></audio>
  <button onclick="jump()">切到30s</button>
 </body>
</html>

最终的效果是这样的:

node实现分片下载的示例代码

node实现分片下载的示例代码

对比两张图,当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 ? (i + 1) * SINGLE - 1 : size - 1;
  request({
   method: 'GET',
   uri: SOURCE,
   headers: {
    'range': `bytes=${start}-${end}`
   },
  }).on('response', (resp) => {
   const range = resp.headers['content-range'];
   const match = /bytes ([0-9]*)-([0-9]*)/.exec(range);
   start = match[1];
   end = match[2];
  }).pipe(fs.createWriteStream(file, {start, end}));
 }
});

代码比较简单,就是开启多个http请求,并发的下载资源,然后根据响应的content-range,写到文件的对应位置。

参考文章:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript在IE和FireFox中的不同表现简析
Dec 03 Javascript
js+CSS实现模拟华丽的select控件下拉菜单效果
Sep 01 Javascript
JS+HTML5手机开发之滚动和惯性缓动实现方法分析
Jun 12 Javascript
微信小程序 地图(map)实例详解
Nov 16 Javascript
详解vue-cli 接口代理配置
Dec 13 Javascript
vue.js整合mint-ui里的轮播图实例代码
Dec 27 Javascript
vue解决使用webpack打包后keep-alive不生效的方法
Sep 01 Javascript
全面分析JavaScript 继承
May 30 Javascript
微信小程序实现页面跳转传递参数(实体,对象)
Aug 12 Javascript
基于JS实现table导出Excel并保留样式
May 19 Javascript
vue 实现把路由单独分离出来
Aug 13 Javascript
JavaScript语句错误throw、try及catch实例解析
Aug 18 Javascript
在小程序开发中使用npm的方法
Oct 17 #Javascript
浅谈HTTP 缓存的那些事儿
Oct 17 #Javascript
使用angular-cli webpack创建多个包的方法
Oct 16 #Javascript
element-ui的回调函数Events的用法详解
Oct 16 #Javascript
基于vue-upload-component封装一个图片上传组件的示例
Oct 16 #Javascript
Postman的下载及安装教程详解
Oct 16 #Javascript
Vue.js 时间转换代码及时间戳转时间字符串
Oct 16 #Javascript
You might like
PHP循环获取GET和POST值的代码
2008/04/09 PHP
php 接口类与抽象类的实际作用
2009/11/26 PHP
PHP连接操作access数据库实例
2015/03/30 PHP
PHP使用CURL实现下载文件功能示例
2019/06/03 PHP
线路分流自动跳转代码;希望对大家有用!
2006/12/02 Javascript
javascript 利用Image对象实现的埋点(某处的点击数)统计
2012/12/28 Javascript
showModalDialog在谷歌浏览器下会返回Null的解决方法
2013/11/27 Javascript
jQuery使用fadeout实现元素渐隐效果的方法
2015/03/27 Javascript
在JavaScript中操作时间之getYear()方法的使用教程
2015/06/11 Javascript
jquery实现简单实用的弹出层效果代码
2015/10/15 Javascript
jquery checkbox无法用attr()二次勾选问题的解决方法
2016/07/22 Javascript
Bootstrap CSS布局之列表
2016/12/15 Javascript
Angular2搜索和重置按钮过场动画
2017/05/24 Javascript
vue环形进度条组件实例应用
2018/10/10 Javascript
基于form-data请求格式详解
2019/10/29 Javascript
Vue中jsx不完全应用指南小结
2019/11/01 Javascript
vue获取data数据改变前后的值方法
2019/11/07 Javascript
vue实现拖拽进度条
2021/03/01 Vue.js
[00:37]DOTA2上海特级锦标赛 Secert 战队宣传片
2016/03/03 DOTA
python进行文件对比的方法
2018/12/24 Python
Python generator生成器和yield表达式详解
2019/08/08 Python
Python sorted排序方法如何实现
2020/03/31 Python
python中scrapy处理项目数据的实例分析
2020/11/22 Python
python 模拟登陆github的示例
2020/12/04 Python
python中re模块知识点总结
2021/01/17 Python
CSS3解决移动页面上点击链接触发色块的问题
2016/06/03 HTML / CSS
CSS3属性box-sizing使用指南
2014/12/09 HTML / CSS
HTML5去掉输入框type为number时的上下箭头的实现方法
2020/01/03 HTML / CSS
HEMA英国:荷兰原创设计
2018/08/28 全球购物
华美博弈C/VC工程师笔试试题
2012/07/16 面试题
园长自我鉴定
2013/10/06 职场文书
优秀班干部事迹材料
2014/01/26 职场文书
团队经理竞聘书
2014/03/31 职场文书
小学课外阅读总结
2014/07/09 职场文书
社会实践活动总结
2015/02/05 职场文书
检察院起诉书
2015/05/20 职场文书