Вот самый быстрый способ создать чат-приложение для Nodejs, ориентированное прежде всего на офлайн.

Процитируя offlinefirst.org, мы живем в мире отключенных и работающих от батарей, но наши технологии и передовой опыт - это пережиток прошлого, когда мы всегда были на связи и стабильно работали. В Textile мы думаем о новом подход к разработке приложений, который охватывает современные децентрализованные веб-технологии и в то же время продвигает ориентированный на пользователя контроль данных, - это путь вперед. Но децентрализованная разработка приложений все еще находится в зачаточном состоянии, и начать с нее было заведомо сложно. Именно здесь вступает в игру расширяющийся набор инструментов разработчика Textile, который упрощает разработчикам создание децентрализованных, автономных и сохраняющих конфиденциальность приложений с использованием тех же инструментов, которые они привыкли ожидать от более традиционных централизованных фреймворков.

Чтобы показать вам, насколько легко создавать полезные приложения с помощью Textile, в сегодняшнем посте будет рассказано о создании минималистичного приложения для чата с командной строкой, которое полностью децентрализовано, поддерживает автономный обмен сообщениями, обнаружение одноранговых узлов и многое другое. И мы собираемся сделать это менее чем с помощью 100 строк «клиентского» кода. Что касается примеров приложений "hello world", то это действительно очень полезно. Звучит слишком хорошо, чтобы быть правдой? Давайте разберемся?!

Для нетерпеливых: вот код полностью.

Начиная

Итак, во-первых, мы собираемся создать наше приложение на основе экосистемы децентрализованных инструментов разработчика Textile. В частности, мы собираемся использовать приложение Textile desktop tray для запуска нашего узла Textile / IPFS, библиотеку js-http-client для взаимодействия с указанным узлом и несколько других библиотек Nodejs, чтобы помочь избавиться от терминального пользователя. интерфейс. Итак, давайте начнем с загрузки и установки последней версии настольного приложения на ваш компьютер. Для целей этой демонстрации вы также можете создать новую учетную запись Textile, пока вы в ней. Экраны в приложении должны помочь вам начать работу. Но прежде чем углубляться в подробности, я настоятельно рекомендую ознакомиться с Экскурсией по текстилю. Мы будем ссылаться на некоторые разделы этого документа в этой записи блога, плюс в нем объясняется, что вообще такое кошелек Textile? Почему вы можете захотеть его создать? И как с ним взаимодействовать…

Настраивать

Теперь, когда вы являетесь экспертом в текстильных технологиях и скачали и установили приложение Tray, давайте приступим к созданию. Прежде всего, мы создадим минимальный проект Nodejs и установим некоторые начальные зависимости:

mkdir txtl
cd txtl
yarn init

Следуйте инструкциям по созданию вашего package.json файла, мой выглядит так:

{
  "name": "txtl",
  "version": "1.0.0",
  "description": "A simple cli chat app using Textile",
  "main": "index.js",
  "author": "Textile",
  "license": "MIT"
}

Если вы хотите управлять версиями этого проекта, вы также можете git init и curl https://www.gitignore.io/api/node > .gitignore, чтобы инициализировать репо с помощью полезного .gitignore файла.

Зависимости

Затем давайте добавим некоторые зависимости. Мы упоминали js-http-client ранее (именно так мы получим доступ к API приложения Textile tray), поэтому давайте возьмем его вместе с тремя дополнительными библиотеками, которые упрощают создание приложений cmd-line в Nodejs (cac - для создания нашего интерфейса cmd-line, chalk —Для стилей и цветов терминальной строки и node-emoji — потому что нам нужны смайлы!):

yarn add @textile/js-http-client cac chalk node-emoji

Хорошо, разобравшись с этим, давайте подумаем, что мы собираемся построить. По сути, мы собираемся подражать разделу Начать чат в Tour of Textile, за исключением того, что в нашем случае один (или оба) партнера будут использовать наш пользовательский интерфейс чата Nodejs. Итак, если вы посмотрите на эту часть тура, вы увидите, что у нас есть очень простое приложение для чата с cmd-строкой, которое вы начинаете с textile chat и которое принимает ввод на стандартный ввод и записывает выходные данные в стандартный вывод с некоторыми приятными цветами. и многое другое, чтобы было немного веселее. Довольно просто, правда? Итак, приступим.

Настройте интерфейс

Сначала мы создадим интерфейс cmd-line, затем добавим фактический код на основе Textile, а затем добавим несколько цветов и настроек. Мы будем добавлять требуемый импорт по ходу дела, чтобы вы могли видеть, откуда происходит каждое изменение. Итак, начните с создания index.js файла в основной папке проекта (я использую VSCode, но вы можете придерживаться любого редактора, который вам нравится):

Ничего особенного, мы просто скопировали из cac документов! Мы имитируем интерфейс клиента go-textile cmd-line, поэтому здесь мы также добавили параметр --thread. Хорошо, теперь мы собираемся добавить интерактивности в наш инструмент cmd-line с помощью модуля readline. Вот что нам нужно сделать:

Мы просто указываем наш readline интерфейс, а затем выводим наш ввод на терминал каждый раз, когда вводим новую строку. Пока не очень полезно… так что давайте добавим в микс некоторые функции Textile, чтобы сделать его полезным! Мы предполагаем, что у вас уже есть go-textile одноранговое приложение или одноранговое приложение на панели задач, поэтому мы сразу перейдем к взаимодействию с одноранговым узлом.

Взаимодействие с текстилем

Хорошо, эта часть здесь не совсем завершена, но вот что происходит:

  • В строке 9 мы импортировали экземпляр textile по умолчанию из библиотеки Textile. Этот экземпляр предполагает, что вы используете Textile REST API на http://127.0.0.1:40600 (что по умолчанию). Если вы работаете на каком-то другом порту, вам нужно будет импортировать Textile (класс) и создать новый экземпляр с чем-то вроде const textile = new Textile({ url: …, port: …, version: 0 }).
  • В строке 27 мы указали, что при каждом новом вводе с терминала мы будем отправлять сообщение в наш указанный поток, а затем распечатывать красивое приглашение на следующей строке.
  • Строки 31–42 просто выбирают наш локальный профиль и используют наше отображаемое имя (если оно существует, в противном случае - первую часть нашего адреса) в качестве приглашения для ввода. Затем мы подписываемся на все события TEXT в указанном потоке и ... пока что ничего не делаем.

Подпишитесь на обновления

Итак, теперь, когда у нас это в основном настроено, давайте действительно что-нибудь сделаем с этим API подписки, чтобы мы могли получать уведомления, когда в поток добавляются новые сообщения чата.

Это, безусловно, самый сложный шаг, и обратите внимание, что мы не выполняли никаких проверок ошибок или чего-либо подобного, чтобы упростить задачу. Мы добавим это чуть позже… А пока обратите внимание, что все js-http-client конечные точки потоковой передачи возвращают ReadableStream (в Nodejs и браузере благодаря некоторой изоморфной магии!). Этот поток можно передать по конвейеру в поток преобразования или любой доступный для записи поток, и вы можете захватить средство чтения для чтения обновлений из потока, что мы и делаем здесь. В приведенном выше примере (который очень похож на пример веб-документации MDN) мы просто рекурсивно вызываем read, пока поток не станет done (который должен оставаться открытым, пока работает ваш партнер). Каждый раз, когда у нас появляется новое обновление, мы получаем его, выясняем, кто его добавил, и, если это был не мы, мы очищаем текущую строку, добавляем новое сообщение и регистрируем новое приглашение. Простой!

Сделай это Purdy…

Приведенный выше пример готов к работе, но если мы действительно хотим эмулировать (и развивать) версию go-textile, нам нужно сделать несколько последних штрихов:

Итак, теперь у нас есть возможности смайликов и несколько приятных цветов, чтобы улучшить наш чат! Теперь у вас должна быть возможность запустить пример. Так что вернитесь к примеру Начать чат в Tour of Textile, и на шаге, когда вы запускаете сеанс чата по умолчанию (textile chat --thread=”12D3K…), используйте вместо этого ваше новое пользовательское приложение чата: ./index.js --thread="12D3K… (после запуска chmod +x .index.js).

Хотите добавить еще больше возможностей своему новому приложению cmd-line? Добавьте в файл package.json следующее, чтобы указать инструмент двоичной строки cmd:

  "bin": {
    "txtl": "index.js"
  }

Замечательно, теперь, когда вы запустите что-то вроде yarn add -g txtl, в вашем распоряжении будет удобный инструмент чата с командной строкой! Но подождите, это еще не все! Хотите вместо этого сделать все это в Typescript? Легкий.

Машинописные суперсилы!

Начните с добавления немного devDependencies:

yarn add --dev typescript @types/node @types/node-emoji

А затем, когда установка будет завершена, продолжайте и инициализируйте пакет с помощью файла tsconfig.json:

yarn tsc --init

Вероятно, вы можете оставить значения по умолчанию, но я бы рекомендовал хотя бы включить declaration и sourceMap и установить для outDir значение "./dist".

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

Теперь просто запустите yarn tsc, и у вас будет только что сгенерированный код Javascript в стиле commonjs вместе с (заглушками) файлами объявлений. Если вы действительно хотите опубликовать этот проект, вы, вероятно, захотите обновить запись bin и добавить какой-нибудь сценарий prepare в свой package.json файл, но я оставлю это в качестве упражнения для читателя.

Что насчет офлайн в первую очередь?

Мы еще не упомянули оффлайн, не так ли? Во-первых, почему сначала офлайн? На это есть множество веских причин, в частности, большая часть повседневного использования Интернета в мире по-прежнему определяется мобильными устройствами, взаимодействием с ограниченной пропускной способностью и питанием от батарей. Но в качестве примера из первых рук ... я пишу этот пост, когда работаю удаленно в части мира с чрезвычайно неоднородным Интернетом. Веб-интерфейс Medium на самом деле неприменим, поэтому я пишу это в VSCode и в конечном итоге загружу файл на Medium для публикации. Не идеально. Приложения для чата и другие инструменты для совместной работы страдают от этой проблемы еще больше! Что делать, если собеседник, с которым вы разговариваете, не в сети? Или ваш Интернет прерывает разговор? Что, если вы оба подключены к одной локальной ячеистой сети, но без внешнего доступа в Интернет? Разве вы не должны по-прежнему иметь возможность с кем-нибудь поболтать?

Вот тут-то и вступает в игру оффлайн, и мой местный коллега из Textile (благодаря IPFS) справляется с этим за меня как чемпион. Если я пишу сообщение в автономном режиме, мой локальный партнер добавит сообщение в мой локальный экземпляр IPFS, и в следующий раз, когда я буду в сети, он объявит об этом моим коллегам (что касается UX, это похоже на сообщение было «отправлено»). Еще лучше, если мои сверстники зарегистрировались в кафе, оно отправит мое сообщение в почтовые ящики моих сверстников, чтобы они могли получить его в следующий раз, они будут онлайн. В то же время все ожидающие меня сообщения будут автоматически извлечены и готовы к чтению и взаимодействию. Для таких вещей, как чат, фотографии и файлы, это может означать оставаться на связи с друзьями и семьей, даже если ваше интернет-соединение в лучшем случае ненадежно.

Лучшая часть? Вышеупомянутый сценарий происходит полностью децентрализованно. Централизованные серверы не требуются (даже кафе - это просто дополнительные узлы, подключенные к децентрализованной сети IPFS). Это сработало бы даже в областях без доступа к более широкому Интернету. Используя Textile в качестве серверной части чата, вы получаете все эти функции, ориентированные на офлайн, бесплатно. Просто работает. Ознакомьтесь с Документацией по текстилю, чтобы узнать больше о подходе Textile к офлайн-режиму и о том, как он может работать для вашего следующего приложения.

Следующие шаги

Если вам это понравилось, не забудьте ознакомиться с некоторыми другими нашими библиотеками, которые построены на основе приложения Textile и нашего js-http-client, например photos-desktop и desktop. У нас также есть отличное сообщество конструкторов на нашем слабом канале сообщества, так что присоединяйтесь, если у вас есть какие-либо вопросы об использовании IPFS в ваших настольных приложениях.