From 1ad67671ab783e460673da189e8741a0bab9c4d3 Mon Sep 17 00:00:00 2001 From: dignifiedquire Date: Mon, 4 Sep 2017 17:35:57 +0200 Subject: [PATCH] docs(example): improve exchange example Always stream incoming data through pull streams and use browserify-aes directly from master now. I was able to add a 300Mb sized file with this quite quickly. --- .../exchange-files-in-browser/package.json | 3 + .../public/index.html | 2 +- .../public/js/app.js | 120 ++++++------------ 3 files changed, 40 insertions(+), 85 deletions(-) diff --git a/examples/exchange-files-in-browser/package.json b/examples/exchange-files-in-browser/package.json index 84ea13b2a4..75a56c0489 100644 --- a/examples/exchange-files-in-browser/package.json +++ b/examples/exchange-files-in-browser/package.json @@ -12,6 +12,9 @@ "http-server": "^0.10.0" }, "dependencies": { + "browserify-aes": "crypto-browserify/browserify-aes#master", + "pull-filereader": "^1.0.1", + "pull-stream": "^3.6.0", "stream-buffers": "^3.0.1" } } diff --git a/examples/exchange-files-in-browser/public/index.html b/examples/exchange-files-in-browser/public/index.html index 7b4da10591..6602f7c52e 100644 --- a/examples/exchange-files-in-browser/public/index.html +++ b/examples/exchange-files-in-browser/public/index.html @@ -62,7 +62,7 @@

Peers

- + diff --git a/examples/exchange-files-in-browser/public/js/app.js b/examples/exchange-files-in-browser/public/js/app.js index 8d14ce7c6d..5e7f037816 100644 --- a/examples/exchange-files-in-browser/public/js/app.js +++ b/examples/exchange-files-in-browser/public/js/app.js @@ -1,5 +1,4 @@ 'use strict' -/* global self */ const $startButton = document.querySelector('#start') const $stopButton = document.querySelector('#stop') @@ -20,7 +19,9 @@ const $details = document.querySelector('#details') const $allDisabledButtons = document.querySelectorAll('button:disabled') const $allDisabledInputs = document.querySelectorAll('input:disabled') const $filesList = document.querySelector('.file-list') -const streamBuffers = require('stream-buffers') +const Ipfs = require('../../../../src/core') +const pullFilereader = require('pull-filereader') +const pull = require('pull-stream') let node let peerInfo @@ -33,7 +34,7 @@ function start () { if (!node) { updateView('starting', node) - node = new self.Ipfs({repo: 'ipfs-' + Math.random()}) + node = new Ipfs({repo: 'ipfs-' + Math.random()}) node.on('start', () => { node.id().then((id) => { @@ -119,93 +120,44 @@ function onDrop (event) { onError('IPFS must be started before files can be added') return } - const dt = event.dataTransfer - const files = dt.files - - function readFileContents (file) { - return new Promise((resolve) => { - const reader = new window.FileReader() - reader.onload = (event) => resolve(event.target.result) - reader.readAsArrayBuffer(file) - }) - } - let filesArray = [] - for (let i = 0; i < files.length; i++) { - filesArray.push(files[i]) + let files = [] + for (let i = 0; i < event.dataTransfer.files.length; i++) { + files.push(event.dataTransfer.files[i]) } - filesArray.map((file) => { - readFileContents(file) - .then((buffer) => { - let fileSize = buffer.byteLength - - if (fileSize < 50000000) { - return node.files.add([{ - path: file.name, - content: new node.types.Buffer(buffer) - }]) - } else { - // use createAddStream and chunk the file. - let progress = 0 - - let myReadableStreamBuffer = new streamBuffers.ReadableStreamBuffer({ - // frequency: 10, // in milliseconds. - chunkSize: 32048 // in bytes. - }) - - node.files.createAddStream((err, stream) => { - if (err) throw err - - stream.on('data', (file) => { - $multihashInput.value = file.hash - $filesStatus.innerHTML = `Added ${file.path} as ${file.hash}` - - if (progressbar) { - clearInterval(progressbar) - progress = 0 - } - }) - - myReadableStreamBuffer.on('data', (chunk) => { - progress += chunk.byteLength - }) - - if (!myReadableStreamBuffer.destroy) { - myReadableStreamBuffer.destroy = () => {} - } - - stream.write({ - path: file.name, - content: myReadableStreamBuffer - }) - - myReadableStreamBuffer.put(Buffer.from(buffer)) - myReadableStreamBuffer.stop() - - myReadableStreamBuffer.on('end', () => { - stream.end() - }) - - myReadableStreamBuffer.resume() - - // progress. - let progressbar = setInterval(() => { - console.log('progress: ', progress, '/', fileSize, ' = ', Math.floor((progress / fileSize) * 100), '%') - }, 5000) - }) + pull( + pull.values(files), + pull.through((file) => console.log('Adding %s', file)), + pull.asyncMap((file, cb) => pull( + pull.values([{ + path: file.name, + content: pullFilereader(file) + }]), + node.files.createAddPullStream(), + pull.collect((err, res) => { + if (err) { + return cb(err) } - }) - .then((files) => { - if (files && files.length) { - $multihashInput.value = files[0].hash - $filesStatus.innerHTML = files + const file = res[0] + console.log('Adding %s finished', file.path) + + $multihashInput.value = file.hash + $filesStatus.innerHTML = `Added ${file.path} as ${file.hash}` + cb(null, file) + }))), + pull.collect((err, files) => { + if (err) { + return onError(err) + } + if (files && files.length) { + $multihashInput.value = files[0].hash + $filesStatus.innerHTML = files .map((e) => `Added ${e.path} as ${e.hash}`) .join('
') - } - }) - .catch(onError) - }) + } + }) + ) } /*