Создание децентрализованного веб-чата за 15 минут

Создание децентрализованного веб-чата за 15 минут

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

Мы собираемся использовать Bugout, библиотеку JavaScript, которая занимается одноранговыми сетями и криптографией. Если вам нужны только файлы, скачайте index.html из этого репозитория. Хорошо, давайте приступим!

Начните с шаблона HTML

Для простоты, мы собираемся сделать все в одном файле .html, используя чистый Javascript. Мы не будем использовать какие-либо инструменты сборки, минимизаторы, транспиллеры и т. д. Вам, вероятно, понадобятся эти вещи, когда вы будете создавать что-то более сложное, но для целей этого руководства мы будем придерживаться старого доброго HTML и JavaScript.

Первое, что нам нужно, это базовая веб-страница шаблона, на которой мы можем приступить к созданию приложения. Нам также нужна простая функция для вывода текста на экран. Вот HTML-код, который вы можете использовать для старта:

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Сохраните приведенный выше фрагмент кода в файл с именем index.html, а затем откройте этот файл в веб-браузере. Вы должны увидеть в верхней части экрана слова «Hello world!» белыми буквами.

Отлично, у нас есть базовая веб-страница и функция log(), которая будет выводить текст на экран.

Импорт Bugout

Теперь давайте импортируем библиотеку Bugout, чтобы мы могли использовать ее для соединения браузеров людей в одноранговом стиле. Мы загрузим библиотеку прямо со страницы GitHub. Добавьте этот тег script в раздел HTML head непосредственно перед закрывающимся тегом head:

Сохраните файл index.html и нажмите «Обновить» в браузере. Если вы знаете, как использовать консоль разработчика, вы можете проверить вкладку «Сеть», чтобы убедиться, что файл bugout.min.js загружается. Если вы этого не сделаете, не беспокойтесь, просто пропустите этот шаг и продолжайте.

Создание объекта Bugout

Давайте создадим объект Bugout, который мы сможем использовать для общения с другими браузерами. Добавьте следующий код в конец файла в теге script после строки: «Ваш код будет здесь!»:

Теперь, когда вы нажмете «Обновить», вы должны увидеть «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(); следующим кодом. Оставьте строку регистрации адресов.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Когда вы сейчас обновите страницу, вы можете увидеть, как подключаются другие экземпляры Bugout — это другие люди, которые следуют тому же руководству! Вы можете открыть index.html в другой вкладке или браузере, и через несколько секунд в обоих окнах вы увидите, как два экземпляра Bugout обнаруживают друг друга и выводят …ADDRESS… [ seen ] с адресом друг друга.

Получение сообщений

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

Добавьте этот фрагмент JavaScript под кодом экземпляра Bugout, который вы добавили ранее:

Этот код будет регистрировать каждое сообщение, которое получает наш экземпляр Bugout, с адресом отправителя. Если вы в этот момент обновите страницу, то можете начать видеть сообщения, поступающие от кого-либо еще, кто прошел это руководство и отправляет сообщения, поскольку вы находитесь в той же комнате, в которой вы вызываете «bugout-chat-tutorial».

Отправка сообщений

Отправка сообщения также проста. Мы можем использовать b.send(«Hello world!»); для отправки сообщения в комнату или b.send(address, «Hello you.»); для отправки в конкретный экземпляр Bugout. Если вы используете второй метод, передача будет зашифрована ключом, предоставленным получающим экземпляром (если другая сторона подключена к сети).

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

Получение пользовательского ввода

Нам нужен какой-то элемент ввода для пользователей, чтобы они могли набирать сообщения, которые хотят отправить. Сначала создайте элемент ввод. Добавьте следующий тег чуть ниже тега <pre id=»log»>:

Теперь добавьте стили, чтобы было ясно, что это элемент ввода. Добавьте это в раздел style заголовка:

Наконец, мы можем подключить все это. Мы добавим обработчик событий, который отправит сообщение, введенное пользователем, как только он нажмет клавишу ввода. Добавьте это к тегу JavaScript после другого кода, который вы добавили:

Здесь нужно отметить пару моментов. Мы проверяем код ключа 13 (ключ ввода) и также проверяем lastwirecount, чтобы убедиться, что мы отправляем сообщение только после того, как увидели другой экземпляр Bugout. Таким образом, вам нужно иметь две разные копии index.html загруженных в разных вкладках или браузерах, чтобы это сработало.

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

Итак, наш супер минималистичный децентрализованный чат-клиент готов. Наслаждайтесь!

Автор: Chris McCormick

Источник: https://davidwalsh.name

Редакция: Команда webformyself.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (1)

  1. Андрей

    Bugout chat tutorial

    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; }
    #input { border-bottom: 1px solid #ccc; background-color: #383838; padding: 0.25em; outline: 0; }
    #input::before { content: «> «; }

    function log(message) {
    document.getElementById(«log»).textContent += message + «\n»;
    }


    log(«Hello world!»);

    /***** Your code goes here! *****/
    var b = Bugout(«bugout-chat-tutorial»);
    b.on(«seen», function(address) { log(address + » [ seen ]«); });
    log(b.address() + » [ me ]«);

    ЭТО ОТДЕЛЬНЫЙ JAVASCRIPT документ

    document.getElementById(«input»).onkeydown = function(ev) {
    if (ev.keyCode == 13) {
    if (b.lastwirecount) {
    b.send(ev.target.textContent);
    ev.target.textContent = «»;
    }
    ev.preventDefault();
    }
    }

    я сделал правильно?

Добавить комментарий