Вот самый быстрый способ создать чат-приложение для 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 в ваших настольных приложениях.