IPFS (межпланетная файловая система) обещает лучший и более эффективный способ обмена файлами. Например, вместо того, чтобы все в классе загружали файл из Dropbox, почему бы не от кого-то еще в классе? Это устраняет большие накладные расходы на сеть. А как насчет передачи файлов в сеть IPFS? Я рассмотрю пример, когда файл выгружается из браузера напрямую в IPFS.

Зрительская аудитория:

Это в основном для разработчиков, которые хотят интегрировать IPFS в свой стек. Требуются некоторые элементарные знания HTML и JavaScript.

Праймер IPFS:

Нормальная загрузка:

Чтобы создать функцию загрузки, разработчику необходимо получить данные из браузера, а затем где-то их сохранить. Это может быть сервис вроде Amazon Web Service S3 или другой файловый хостинг. При желании они также могли сделать его сами. Но это может быть не лучшее использование времени для команды разработчиков с ограниченным бюджетом.

В этой структуре нет ничего плохого. Это позволяет разработчику написать серверный код, например, для изменения изображения. Также может быть несколько решений для хранения. Все эти решения увеличивают пропускную способность, используемую приложением. Выгрузка размером 1 МБ становится 2 МБ, потому что серверу необходимо загрузить его в решение для хранения. Пропускная способность дешевая, но может быть и дешевле!

Браузер в IPFS:

Мы могли бы написать код сервера, принимающий данные и помещающий их в IPFS. Но что, если бы браузер мог закачивать прямо в IPFS? Тогда предыдущие закачанные 2 МБ снова станут 1 МБ!

Это приятно, потому что мы экономим на сетевых расходах. Это также возможно с текущими платформами хранения. От них может потребоваться выполнить несколько запросов на аутентификацию, но это все еще выполнимо. Вы увидите, насколько легко будет загружать файлы напрямую в IPFS.

Настройка проекта:

Для запуска примера вам понадобится узел IPFS, работающий на вашем локальном компьютере. Чтобы упростить руководство, вы также настроите CORS на своем локальном узле. Следуйте инструкциям по установке IPFS для вашей операционной системы, а затем выполните следующие действия:

  1. ipfs init
  2. ipfs daemon

Это запустит ваш сервер IPFS локально. Наконец, нам нужно настроить IPFS, чтобы разрешить CORS. Нам нужно будет остановить ipfs (ctrl- c) и изменить несколько вещей:

  1. Остановить IPFS с помощью ctrl-c
  2. ipfs config -- json API.HTTPHeaders.Access-Control-Allow-Methods ‘[“PUT”, “GET”, “POST”, “OPTIONS”]’
  3. ipfs config — json API.HTTPHeaders.Access-Control-Allow-Origin ‘[“*”]’
  4. ipfs daemon

Мы настраиваем ipfs для возврата заголовков, необходимых для работы CORS. Последняя команда просто перезапускает службу ipfs локально.

Хостинг веб-сайта:

Есть несколько способов разместить веб-сайт на своем ноутбуке. Вы можете использовать сервер, например node-http, SimpleHTTPServer, или просто перетащить index.html в браузер. Суть здесь. Сохраните файл в выбранном вами каталоге.

Использование узла для размещения веб-сайта:

Если вы хотите использовать узел, запустите в терминале следующее:

  1. npm install http-server -g
  2. http-server -p 1337

Использование Python для размещения веб-сайта:

Если вы используете OSX, скорее всего, у вас по умолчанию установлен Python. Это приятно, потому что ничего устанавливать не нужно. В терминале запустите следующее:

  1. python -m SimpleHTTPServer 1337

Вышеупомянутый запускает HTTP-сервер на порту 1337 в локальном каталоге.

Использование файловой системы для размещения веб-сайта:

Самый простой способ разместить ваш сайт - перетащить index.html в любой браузер. Не нужно устанавливать или запускать какие-либо команды.

Независимо от того, где вы размещаете файл index.html, вы должны увидеть следующее:

Пример:

Примером является браузер для загрузчика изображений IPFS. Если браузер напрямую загружает изображение в IPFS, для разработчиков уменьшается пропускная способность. Обычно для загрузки изображения клиент загружает на сервер, который, в свою очередь, сохраняет его в другом месте. Зачем нужен клиент → сервер → каталог, если у вас может быть клиент → каталог.

  1. Создать поле ввода HTML с id="photo"
  2. Создать кнопку HTML с onclick="upload()"
  3. upload() создает экземпляр const reader = new FileReader()
  4. Дайте reader.readAsArrayBuffer файл внутри id="photo" элемента
  5. Привязать к reader методу генератора событий onloaded
  6. Инициализировать объект ipfs, привязанный к локальному узлу IPFS на порту 5001
  7. Создать буфер изображения, прочитанного из reader.result
  8. Вызов ipfs.files.add с буфером с функцией обратного вызова
  9. Прочитать result переменную
  10. Создайте строку url
  11. Изменять данные в DOM напрямую

Детали API:

Легко создать службу, которая получает данные из браузера и затем хранит их на платформе хранения. Как разработчик вы можете писать код, чтобы делать то, что хотите. И наоборот, интерфейсный разработчик имеет больше ограничений, потому что их код работает в браузерах. Иногда это добавляет сложности.

Мы воспользуемся FileReader для доступа к данным файла, создадим поддерживаемый браузером буферный массив, а затем, наконец, загрузим изображение в IPFS с помощью js-ipfs-api.

FileReader:

Браузер не имеет прямого доступа к файлам каталога. Фактически, FileReader предоставит вам поддельный каталог для выбранного файла (C:/fakedir/some/path.png). Это большое отличие от серверного кода, где чтение файла выполняется легко и доступно. Но это нормально, потому что FileReader позволяет читать файлы в разных форматах: readAsArrayBuffer, readAsBinaryString, readAsDataUrl, readAsText. В примере мы используем readAsArrayBuffer.

Буфер:

В Node.js у вас есть доступ к собственному модулю required('buffer').Buffer. Это означает, что нам нужно искать совместимую функцию буфера. К счастью, другие сделали свою работу! Я нашел модуль буфер, совместимый с браузером от feross. В примере кода я добавил тег async html script, чтобы включить buffer javascript. Это создало объект глобальной переменной buffer. Если бы я использовал Webpack, я мог бы включить буфер как require('buffer/').Buffer. В любом случае, пока доступен буферный код, это будет работать.

JS-IPFS-API:

IPFS имеет две разные библиотеки. Есть JS-IPFS, реализующий протокол IPFS в javascript. Затем идет JS-IPFS-API, который обращается к узлу IPFS. В нашем примере выше мы используем JS-IPFS-API для загрузки данных в IPFS.

Соображения:

Когда пользователи загружают файлы напрямую в IPFS, это хорошо, потому что это устраняет необходимость в некотором серверном коде. Одним из недостатков является то, что от пользователя требуется, чтобы IPFS работала локально. Большинство пользователей не знают, зачем и как его устанавливать. Плагин Chrome есть, но через него все еще сложно прыгнуть. Еще один недостаток заключается в том, что изображения не реплицируются между узлами. Они существуют на узлах только в том случае, если к файлу был осуществлен доступ. Это просто означает, что если сервер A получает изображение, только сервер A знает об этом. Нам нужно скопировать файл на несколько серверов, чтобы повысить доступность файла.

Один из способов решить вышеуказанные проблемы - изменить порты localhost и 5001 и разместить свой собственный узел IPFS. Это означает, что вам нужно управлять несколькими серверами, но, по крайней мере, у вас нет сервера, обрабатывающего изображения между загрузками. Но если ваш сервер выключится, то изображение снова станет недоступным. Чтобы выжить после перезапуска, вы можете использовать ipfs.pin, чтобы указать IPFS хранить изображение в каталоге, а не в памяти. Это работает для одного сервера, но не для всех остальных узлов, которые вы размещаете.

Управляя серверами, вы можете думать о них как о домашних животных или скот. Сервер для домашних животных нелегко заменить, в то время как сервер для крупного рогатого скота. Использование такого инструмента, как Ansible, снижает рабочую нагрузку, необходимую для управления серверами.

Вернемся к теме наличия изображений в IPFS после уничтожения серверов. Цель - разместить загруженное изображение на как можно большем количестве серверов, чтобы оно стало более доступным. После того, как изображение загружено на один узел IPFS, возможно, этот узел снова загрузит его на другие серверы. Поэтому один и тот же образ живет на многих серверах IPFS. Другой способ - сохранить его на облачной платформе, такой как AWS или GCE. Затем при доступе к изображениям, если IPFS работает медленно или не возвращается, используйте URL-адрес изображения AWS или GCE.

Этот вопрос о доступности файлов на данный момент открыт. IPFS сама по себе не работает. Доступность можно записать поверх IPFS. Они работают над FileCoin, чтобы стимулировать людей хранить данные. Люди, загружающие данные, выигрывают, если люди сохраняют данные, а хосты выигрывают, получая FileCoin за свою работу. Существуют также другие протоколы, такие как SaiCoin, StorJ и MainSafe.

Заключение:

Вы должны увидеть общую структуру загрузки изображения из браузера в IPFS. Есть несколько недостатков, таких как доступность, скорость и простота использования. Еще рано, и, надеюсь, можно будет проделать еще больше работы, чтобы продвинуть технологию вперед!