快速入门
将demo拷贝到IDE并打开2个页面查看效果。
绑定域名
在使用P2P服务之前,需要先绑定域名。
TIP
Localhost 已加入白名单,无需绑定,用于本地调试。
准备工作
跨域配置
请确保文件服务器已做好跨域配置
允许 OPTIONS 请求
OPTIONS 请求是在跨域环境下 RANGE 请求的前置请求,一般情况下可以在 HTTP 响应头中添加:
Access-Control-Allow-Methods: GET, OPTIONS
允许 RANGE 请求
本SDK需要用到 RANGE 请求,一般情况下可以在 HTTP 响应头中添加:
Access-Control-Allow-Headers: Range
兼容 Firefox
某些浏览器如 Firefox 需要在响应头设置 Access-Control-Expose-Headers 才能获取到文件大小:
Access-Control-Expose-Headers: Content-Length
引入插件
Script标签引入
通过script标签引入最新版本:
html
<script src="https://cdn.jsdelivr.net/npm/@swarmcloud/file"></script>
文件引入
Browserify / Webpack
shell
npm install --save @swarmcloud/file
通过 require 引入@swarmcloud/file:
javascript
var P2PEngineFile = require('@swarmcloud/file');
或者使用ES6的 import 语法:
javascript
import P2PEngineFile from '@swarmcloud/file';
使用插件
实例化 P2PEngineFile 并将文件下载地址作为参数传入。
javascript
var downloader = new P2PEngineFile('path/to/your.file');
downloader.on('finished', function (file) {
file.save('name.file');
file.revokeBlobURL(); // 释放file占用的記憶體
});
downloader.on('failed', function (e) {
// fallback to normal download
});
downloader.on('progress', function (e) {
// show progress to user
});
downloader.start();
流式下载
如果不想等文件下载完成再保存到磁盘,可以采用流式下载的方法(基于ServiceWorker实现),需要用到一个特殊的iFrame来安装ServiceWorker并触发浏览器下载文件,默认iFrame托管在github,也可以通过配置来自行托管:
javascript
var downloader = new P2PEngineFile('path/to/your.file',{
// mitm: './mitm.html', // https://github.com/cdnbye/file-p2p-engine/blob/master/demo/mitm.html
});
if (downloader.isSaveByStreamSupported()) {
downloader.saveByServiceWorkerStream("filename")
.catch(err => {
console.error(err)
// you need to make the fallback strategy by yourself
});
} else {
// you need to make the fallback strategy by yourself
}
downloader.start();
参考流式下载demo