這篇文章帶給大家的內容是關於基於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; }
程式碼實作的函數邏輯大致是:
<title>分片流传输</title> <script> function jump() { const player = document.getElementById('musicPlayer'); // 从30s开始播放 player.currentTime = 30; } </script> <audio></audio> <button>切到30s</button>
Range: bytes=0-,表示從第0 byte開始載入資源;當點擊跳到30s處播放時,此時header變成了
Range: bytes=3145728-。
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> { 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})); } });</length>
#
以上是基於http Range Requests協定實現分片下載的功能的詳細內容。更多資訊請關注PHP中文網其他相關文章!