快速入門

將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標籤引入最新版本：

<script src="https://cdn.jsdmirror.com/npm/@swarmcloud/file"></script>

檔案引入

點擊

Browserify / Webpack

npm install --save @swarmcloud/file

透過 require 引入@swarmcloud/file：

var P2PEngineFile = require('@swarmcloud/file');

或使用ES6的 import 語法：

import P2PEngineFile from '@swarmcloud/file';

使用外掛程式

實例化 P2PEngineFile 並將檔案下載位址作為參數傳入。

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，也可以透過設定來自行託管：

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