クイックスタート
デモをIDEにコピーし、2つのページを開いて効果を確認してください。
ドメインの紐付け
P2Pサービスを利用する前に、まずドメインを紐付ける必要があります。
TIP
Localhostはホワイトリストに登録済みのため、紐付け不要でローカルデバッグに利用できます。
事前準備
クロスオリジン設定
ファイルサーバー側でクロスオリジン設定が済んでいることを確認してください
OPTIONSリクエストを許可する
OPTIONSリクエストは、クロスオリジン環境でRANGEリクエストを送信する前のプリフライトリクエストです。通常はHTTPレスポンスヘッダーに以下を追加するだけです:
Access-Control-Allow-Methods: GET, OPTIONSRANGEリクエストを許可する
本SDKはRANGEリクエストを使用します。通常はHTTPレスポンスヘッダーに以下を追加するだけです:
Access-Control-Allow-Headers: RangeFirefoxとの互換性
Firefoxなど一部のブラウザでは、ファイルサイズを取得するためにレスポンスヘッダーに Access-Control-Expose-Headers を設定する必要があります:
Access-Control-Expose-Headers: Content-Lengthプラグインの導入
scriptタグでの導入
scriptタグで最新バージョンを導入:
html
<script src="https://cdn.jsdmirror.com/npm/@swarmcloud/file"></script>ファイルでの導入
Browserify / Webpack
shell
npm install --save @swarmcloud/filerequire を使って@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ベースで実装)を利用できます。ServiceWorkerをインストールしブラウザのファイルダウンロードをトリガーするために、特殊なiFrameが必要です。デフォルトの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();ストリーミングダウンロードのデモを参照してください
