基于http Range Requests协议实现分片下载的功能

本篇文章给大家带来的内容是关于基于http range requests协议实现分片下载的功能,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

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

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

原理

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

下面贴一下实现过程,代码可以在git查看:https://github.com/keller35/partial。

服务端代码

服务端用node实现:

const fs = require('fs');const path = require('path');const Koa = require('koa');const app = new Koa();const PATH = './resource';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标签作为例子。

            分片流传输                    function jump() {                const player = document.getElementById('musicPlayer');                // 从30s开始播放                player.currentTime = 30;            }                                    

登录后复制

最终的效果是这样的:

1187993521-5bc5bda665c20_articlex.png

2484237763-5bc5bdb2e5fcc_articlex.jpg

对比两张图,当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 {            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,写到文件的对应位置。

以上就是基于http Range Requests协议实现分片下载的功能的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2738961.html

(0)
上一篇 2025年3月8日 01:56:53
下一篇 2025年3月8日 01:56:59

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 如何利用Jest测试JavaScript(Mock函数)

    本篇文章给大家带来的内容是关于如何利用jest测试javascript(mock函数),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 在本篇教程中,我们会介绍 Jest 中的三个与 Mock 函数相关的API,分别是jes…

    2025年3月8日
    200
  • Jest是什么?Jest的基本使用方法

    本篇文章给大家带来的内容是关于jest是什么?jest相关知识的介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 1 什么是 Jest? Jest Jest是 Facebook 的一套开源的 JavaScript 测试框…

    2025年3月8日
    200
  • JavaScript的数据类型有哪些?js数据类型的介绍

    本篇文章给大家带来的内容是关于javascript的数据类型有哪些?js数据类型的介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 一、JavaScript有几种类型的值? Javascript有两种数据类型,分别是基本…

    2025年3月8日
    200
  • echarts如何优化数据视图dataView中的样式(代码示例)

    本篇文章给大家带来的内容是关于echarts如何优化数据视图dataview中的样式(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 在使用echart过程中,toolbox里有个dataView视图模式,里面的…

    2025年3月8日
    200
  • ES6中对象的新功能与解构赋值的详解(代码示例)

    本篇文章给大家带来的内容是关于es6中对象的新功能与解构赋值的详解(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 ES6 通过字面量语法扩展、新增方法、改进原型等多种方式加强对象的使用,并通过解构简化对象的数据…

    编程技术 2025年3月8日
    200
  • 详解javascript浏览器的事件循环机制

    本篇文章给大家带来的内容是关于详解javascript浏览器的事件循环机制,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 抛在前面的问题: 单线程如何做到异步 事件循环的过程是怎样的 macrotask 和 microta…

    2025年3月8日 编程技术
    200
  • 解析Node.js的事件循环机制

    本篇文章给大家带来的内容是关于解析node.js的事件循环机制,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 在浏览器篇已经对事件循环机制和一些相关的概念作了详细介绍,但主要是针对浏览器端的研究,Node环境是否也一样呢?…

    2025年3月8日 编程技术
    200
  • JavaScript异步编程的详细介绍(附示例)

    本篇文章给大家带来的内容是关于php协成实现的详解(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 前言 自己着手准备写这篇文章的初衷是觉得如果想要更深入的理解 JS,异步编程则是必须要跨过的一道坎。由于这里面涉及…

    2025年3月8日
    200
  • Node Stream的运行机制讲解(附示例)

    本篇文章给大家带来的内容是关于node stream的运行机制讲解(附示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 如果你正在学习Node,那么流一定是一个你需要掌握的概念。如果你想成为一个Node高手,那么流一定…

    2025年3月8日 编程技术
    200
  • 本地node包的测试方法介绍

    本篇文章给大家带来的内容是关于本地node包的测试方法介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 当我们编写一个node包,在发布到npm上之前,需要在本地测试该包。假设我们有一个已经编写好的本地node包xcxu…

    编程技术 2025年3月8日
    200

发表回复

登录后才能评论