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 相关文章推荐
关于jQuery中.attr()和.prop()的问题探讨
Sep 06 Javascript
js数组去重的常用方法总结
Jan 24 Javascript
全面解析Bootstrap排版使用方法(标题)
Nov 30 Javascript
继续学习javascript闭包
Dec 03 Javascript
JS 终止执行的实现方法
Nov 24 Javascript
AngularJS中使用ngModal模态框实例
May 27 Javascript
AngularJS实用基础知识_入门必备篇(推荐)
Jul 10 Javascript
Kindeditor单独调用单图上传增加预览功能的实例
Jul 31 Javascript
vue后台管理之动态加载路由的方法
Aug 13 Javascript
微信小程序动态增加按钮组件
Sep 14 Javascript
Flutter实现仿微信底部菜单栏功能
Sep 18 Javascript
在vue项目中封装echarts的步骤
Dec 25 Vue.js
在小程序开发中使用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中删除字符串中最先出现某个字符的实现代码
2013/02/03 PHP
如何使用PHP计算上一个月的今天
2013/05/23 PHP
解析strtr函数的效率问题
2013/06/26 PHP
PHP执行shell脚本运行程序不产生core文件的方法
2016/12/28 PHP
thinkPHP5.0框架应用请求生命周期分析
2017/03/25 PHP
php实现通过stomp协议连接ActiveMQ操作示例
2020/02/23 PHP
完整显示当前日期和时间的JS代码
2007/09/17 Javascript
对JavaScript的eval()中使用函数的进一步讨论
2008/07/26 Javascript
javaScript 数值型和字符串型之间的转换
2009/07/25 Javascript
Jquery通过Ajax访问XML数据的小例子
2013/11/18 Javascript
基于js实现微信发送好友如何分享到朋友圈、微博
2015/11/30 Javascript
Bootstrap树形组件jqTree的简单封装
2016/01/25 Javascript
JS 滚动事件window.onscroll与position:fixed写兼容IE6的回到顶部组件
2016/10/10 Javascript
微信小程序 定义全局数据、函数复用、模版等详细介绍
2016/10/27 Javascript
ES7中利用Await减少回调嵌套的方法详解
2017/11/01 Javascript
vue 组件的封装之基于axios的ajax请求方法
2018/08/11 Javascript
vue axios数据请求及vue中使用axios的方法
2018/09/10 Javascript
解决Vue中 父子传值 数据丢失问题
2019/08/27 Javascript
layer.msg()去掉默认时间,实现手动关闭的方法
2019/09/12 Javascript
vue-devtools的安装和使用步骤详解
2019/10/17 Javascript
vue quill editor 使用富文本添加上传音频功能
2020/01/14 Javascript
对于Python中线程问题的简单讲解
2015/04/03 Python
python实现播放音频和录音功能示例代码
2018/12/30 Python
python+django+rest框架配置创建方法
2019/08/31 Python
Python基于Dlib的人脸识别系统的实现
2020/02/26 Python
python 利用matplotlib在3D空间中绘制平面的案例
2021/02/06 Python
CSS3 media queries + jQuery实现响应式导航
2016/09/30 HTML / CSS
澳大利亚电商Catch新西兰站:Catch.co.nz
2020/05/30 全球购物
仓库保管员岗位职责
2013/12/20 职场文书
2014年助理政工师工作总结
2014/12/19 职场文书
小学少先队活动总结
2015/05/08 职场文书
总经理致辞
2015/07/29 职场文书
小学体育组工作总结
2015/08/13 职场文书
《老人与海鸥》教学反思
2016/02/16 职场文书
2019年教师节祝福语精选,给老师送上真诚的祝福
2019/09/09 职场文书
MySql按时,天,周,月进行数据统计
2022/08/14 MySQL