От автора: в этом 15-минутном руководстве мы создадим простое децентрализованное приложение для чата, которое полностью работает в веб-браузере. Все, что потребует от вас создание чата, это текстовый редактор, веб-браузер и базовые знания о том, как сохранять HTML-файлы и открывать их в браузере.
Мы собираемся использовать Bugout, библиотеку JavaScript, которая занимается одноранговыми сетями и криптографией. Если вам нужны только файлы, скачайте index.html из этого репозитория. Хорошо, давайте приступим!
Начните с шаблона HTML
Для простоты, мы собираемся сделать все в одном файле .html, используя чистый Javascript. Мы не будем использовать какие-либо инструменты сборки, минимизаторы, транспиллеры и т. д. Вам, вероятно, понадобятся эти вещи, когда вы будете создавать что-то более сложное, но для целей этого руководства мы будем придерживаться старого доброго HTML и JavaScript.
Первое, что нам нужно, это базовая веб-страница шаблона, на которой мы можем приступить к созданию приложения. Нам также нужна простая функция для вывода текста на экран. Вот HTML-код, который вы можете использовать для старта:
<!DOCTYPE html>
<html>
<head> <meta charset="utf-8"> <meta content="width=device-width, initial-scale=1" name="viewport"> <title>Bugout chat tutorial</title> <style> body { background-color: #333; font-size: 1.5em; padding: 0em 0.25em; } span { color: #fff; white-space: pre-wrap; word-wrap: break-word; text-shadow: 0 0 10px #ccc; } </style> <script> function log(message) { document.getElementById("log").textContent += message + "\n"; } </script>
</head>
<body> <span id="log"></span>
</body>
<script> log("Hello world!"); /***** Your code goes here! *****/ </script>
</html>Сохраните приведенный выше фрагмент кода в файл с именем index.html, а затем откройте этот файл в веб-браузере. Вы должны увидеть в верхней части экрана слова «Hello world!» белыми буквами.
Отлично, у нас есть базовая веб-страница и функция log(), которая будет выводить текст на экран.
Импорт Bugout
Теперь давайте импортируем библиотеку Bugout, чтобы мы могли использовать ее для соединения браузеров людей в одноранговом стиле. Мы загрузим библиотеку прямо со страницы GitHub. Добавьте этот тег script в раздел HTML head непосредственно перед закрывающимся тегом head:
<script src="https://chr15m.github.io/bugout/bugout.min.js" type="application/javascript"></script>
Сохраните файл index.html и нажмите «Обновить» в браузере. Если вы знаете, как использовать консоль разработчика, вы можете проверить вкладку «Сеть», чтобы убедиться, что файл bugout.min.js загружается. Если вы этого не сделаете, не беспокойтесь, просто пропустите этот шаг и продолжайте.
Создание объекта Bugout
Давайте создадим объект Bugout, который мы сможем использовать для общения с другими браузерами. Добавьте следующий код в конец файла в теге script после строки: «Ваш код будет здесь!»:
var b = Bugout(); log(b.address() + " [ me ]");
Теперь, когда вы нажмете «Обновить», вы должны увидеть «Hello world!» как и раньше, а в следующей строке вы должны увидеть адрес этого экземпляра Bugout. Это будет выглядеть примерно так:
Вы можете заметить, что этот адрес немного похож на биткойн-адрес. Это связано с тем, что Bugout использует криптографический метод аналогичного типа для создания своего адреса из внутренней криптографической пары ключей. Криптография — это то, с помощью чего узлы Bugout обеспечивают получение информации от узла, от которого они ожидают. В сети узлы Bugout могут найти и идентифицировать друг друга, используя эти адреса.
Подключение экземпляра Bugout
Теперь, когда у нас есть экземпляр Bugout, запущенный на веб-странице, как мы можем подключить его к другим экземплярам Bugout, работающим на страницах на компьютерах других людей?
В реальной жизни, когда вы хотите встретиться с кем-то, вы делитесь адресом места встречи. У компьютеров так же. Каждый раз, когда вы хотите соединить две компьютерные программы по сети, вам понадобится адрес определенного типа. Например, чтобы попасть на эту веб-страницу, вы перешли по ссылке на ее URL-дрес, и ваш компьютер загрузил эту страницу с этого адреса.
Экземпляры Bugout подключаются к адресам, называемым «идентификаторами», которые можно рассматривать как имена комнат. Первым аргументом, передаваемым экземпляру Bugout() , является идентификатор или имя комнаты, к которой вы хотите подключиться.
Если вы не предоставите аргумент имени комнаты, экземпляр Bugout .address() по умолчанию подключится к своему. Это означает, что он будет прослушивать другие экземпляры Bugout, подключающиеся к нему. Другие экземпляры могут подключаться, передавая ваш экземпляр Bugout .address() в качестве первого аргумента.
Для нашего чата мы хотим соединить все экземпляры Bugout вместе в одной комнате. Мы делаем это, используя то же имя комнаты, что и в первом аргументе.
Обновите код, чтобы передать аргумент в «bugout-chat-tutorial» качестве имени комнаты. Мы также установим обработчик событий, который будет запускаться каждый раз, когда мы видим, что другой экземпляр Bugout подключается к той же комнате, используя b.on(«seen»).
Замените строку var b = Bugout(); следующим кодом. Оставьте строку регистрации адресов.
var b = Bugout("bugout-chat-tutorial");
b.on("seen", function(address) { log(address + " [ seen ]"); });Когда вы сейчас обновите страницу, вы можете увидеть, как подключаются другие экземпляры Bugout — это другие люди, которые следуют тому же руководству! Вы можете открыть index.html в другой вкладке или браузере, и через несколько секунд в обоих окнах вы увидите, как два экземпляра Bugout обнаруживают друг друга и выводят …ADDRESS… [ seen ] с адресом друг друга.
Получение сообщений
Теперь, когда у нас есть подключающиеся экземпляры Bugout, мы можем отправлять данные между ними. Давайте сначала обработаем получение сообщений. Когда наш экземпляр Bugout получает сообщение, мы хотим добавить его прямо в журнал, чтобы видеть, какие сообщения люди отправляют в комнату.
Добавьте этот фрагмент JavaScript под кодом экземпляра Bugout, который вы добавили ранее:
b.on("message", function(address, message) { log(address + ": " + message);
});Этот код будет регистрировать каждое сообщение, которое получает наш экземпляр Bugout, с адресом отправителя. Если вы в этот момент обновите страницу, то можете начать видеть сообщения, поступающие от кого-либо еще, кто прошел это руководство и отправляет сообщения, поскольку вы находитесь в той же комнате, в которой вы вызываете «bugout-chat-tutorial».
Отправка сообщений
Отправка сообщения также проста. Мы можем использовать b.send(«Hello world!»); для отправки сообщения в комнату или b.send(address, «Hello you.»); для отправки в конкретный экземпляр Bugout. Если вы используете второй метод, передача будет зашифрована ключом, предоставленным получающим экземпляром (если другая сторона подключена к сети).
Но прежде чем мы добавим функцию отправки, нам нужно, чтобы пользователи могли вводить сообщения, которые они хотят отправить, поэтому давайте немного отклонимся от пользовательского интерфейса.
Получение пользовательского ввода
Нам нужен какой-то элемент ввода для пользователей, чтобы они могли набирать сообщения, которые хотят отправить. Сначала создайте элемент ввод. Добавьте следующий тег чуть ниже тега <pre id=»log»>:
<span id="input" contenteditable="true"></span>
Теперь добавьте стили, чтобы было ясно, что это элемент ввода. Добавьте это в раздел style заголовка:
#input { border-bottom: 1px solid #ccc; background-color: #383838; padding: 0.25em; outline: 0; } #input::before { content: "> "; }Наконец, мы можем подключить все это. Мы добавим обработчик событий, который отправит сообщение, введенное пользователем, как только он нажмет клавишу ввода. Добавьте это к тегу JavaScript после другого кода, который вы добавили:
document.getElementById("input").onkeydown = function(ev) { if (ev.keyCode == 13) { if (b.lastwirecount) { b.send(ev.target.textContent); ev.target.textContent = ""; } ev.preventDefault(); } }Здесь нужно отметить пару моментов. Мы проверяем код ключа 13 (ключ ввода) и также проверяем lastwirecount, чтобы убедиться, что мы отправляем сообщение только после того, как увидели другой экземпляр Bugout. Таким образом, вам нужно иметь две разные копии index.html загруженных в разных вкладках или браузерах, чтобы это сработало.
Обновите страницу и, когда вы увидите сообщения [ seen ], вы можете начать вводить собственные сообщения в разных окнах. Вы можете даже увидеть сообщения от других людей, изучающих это руководство.
Итак, наш супер минималистичный децентрализованный чат-клиент готов. Наслаждайтесь!
Автор: Chris McCormick
Источник: https://davidwalsh.name
Редакция: Команда webformyself.