Пишем чат на html

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

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

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

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

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

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

Онлайн курс по JavaScript

Научитесь создавать приложения со сложными интерфейсами

Это основной язык для современной веб-разработки — почти 100% сайтов работает на JavaScript. Освойте его с нуля всего за 4 месяца, и вы сможете зарабатывать от 70 000 рублей.

Сохраните приведенный выше фрагмент кода в файл с именем 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(); следующим кодом. Оставьте строку регистрации адресов.

Источник

Как создать простое приложение веб-чата

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

Введение

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

Шаг 1: HTML разметка

Мы начнем этот урок с создания нашего первого файла index.php.

 xmlns="http://www.w3.org/1999/xhtml"> 

 type="text/css" rel="stylesheet" href="style.css" /> 

 class="logout"> id="exit" href="#">Exit Chat
  

 name="usermsg" type="text" id="usermsg" size="63" /> 

 name="submitmsg" type="submit" id="submitmsg" value="Send" /> 

 type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"> 

• Мы начнем наш html с обычных DOCTYPE, html, head, и body тагов. В таг head мы добавим наш заголовок и ссылку на нашу таблицу стилей css (style.css).
• Внутри тага body, мы структурируем наш макет внутри блока — обертки #wrapper div. У нас будет три главных блока: простое меню, окно чата и поле ввода нашего сообщения; каждый со своим соответствующим div и id.
  • Блок меню #menu div будет состоять из двух абзацев. Первый будет приветствием пользователю и поплывет налево, а второй будет ссылкой на выход и поплывет направо. Мы также включим блок div для очистки элементов.
  • Блок чата #chatbox div будет содержать лог нашего чата. Мы будем загружать наш лог из внешнего файла с использованием ajax-запроса jQuery.
  • Последним пунктом в нашем блоке-обертке #wrapper div будет наша форма, которая будет включать в себя текстовое поле ввода для сообщения пользователя и кнопку отправки.

  Шаг 2: Создание стиля CSS

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

  a:hover  text-decoration:underline; > 

  #loginform  padding-top:18px; > 

  #menu  padding:12.5px 25px 12.5px 25px; > 

  В вышеуказанном css нет ничего особенного, кроме того факта, что некоторые id или классы, для которых мы устанавливаем стиль, будут добавлены немного позже.

  

  Как вы можете видеть выше, мы закончили строить пользовательский интерфейс чата.

  Шаг 3: Используем PHP, чтобы создать форму входа.

  Теперь мы реализуем простую форму, которая будет спрашивать у пользователя его имя, перед тем, как пустить его дальше.

   
  Please enter your name to continue:
    

  $_SESSION['name'] = stripslashes(htmlspecialchars($_POST['name'])); 

  echo 'Please type in a name'; 

  Функция loginForm(), которую мы создали, состоит из простой формы входа, которая спрашивает у пользователя его/ее имя. Затем мы используем конструкцию if else, чтобы проверить, ввел ли пользователь имя. Если человек ввел имя, мы устанавливаем его, как $_SESSION[‘имя’]. Так как мы используем сессию, основанную на cookie, чтобы хранить имя, мы должны вызвать session_start() перед тем, как что-нибудь выводить в браузер.

  Есть одна вещь, на которую вы возможно захотите обратить особое внимание — то, что мы использовали функцию htmlspecialchars(), которая конвертирует специальные символы в HTML сущности, тем самым защищая имя переменной, чтобы оно не стало жертвой межсайтового скриптинга (XSS). Мы также добавим эту функцию позже к текстовой переменной, которая будет опубликована в логе чата.

  Отображение формы входа

  Для того, чтобы показать форму логина в случае, если пользователь не вошел в систему, и следовательно, не сессия не создалась, мы используем другую инструкцию if else вокруг блока-обертки #wrapper div и тагов скрипта в нашем исходном коде. В противоположном случае, если пользователь вошел в систему и создал сессию, этот код спрячет форму входа и покажет окно чата.

   class="welcome">Welcome,  echo $_SESSION['name']; ?> 
   

   class="logout"> id="exit" href="#">Exit Chat
    

   name="usermsg" type="text" id="usermsg" size="63" /> 

   name="submitmsg" type="submit" id="submitmsg" value="Send" /> 

   type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"> 

  

  Приветствие и меню выхода из системы

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

  Прежде всего, давайте добавим имя пользователя в сообщение приветствия. Мы сделаем это, выводя сессию имени пользователя.

   class="welcome">Welcome,  echo $_SESSION['name']; ?> 
   

  

  Для того, чтобы позволить пользователю выйти из системы и завершить сессию, мы прыгнем выше головы и кратко используем jQuery.

  //If user wants to end session

  var exit = confirm("Are you sure you want to end the session?");

  Код jquery, приведенный выше просто показывает диалог подтверждения, если пользователь кликнет по ссылке выхода #exit. Если пользователь подтвердит выход, тем самым решив закончить сессию, мы отправим его в index.php?logout=true. Это просто создаст переменную с именем logout со значением true. Мы должны перехватить эту переменную с помощью PHP:

  

  fwrite($fp, "User ". $_SESSION['name'] ." has left the chat session. "); 

  header("Location: index.php"); //Redirect the user 

  Теперь мы увидим, существует ли get переменная ‘logout’, используя функцию isset(). Если переменная была передана через url, такой, как ссылка, упомянутая выше, мы переходим к завершению сессии пользователя с текущим именем.

  Перед уничтожением сессии пользователя с текущим именем с помощью функции session_destroy() мы хотим выводить простое сообщение о выходе в лог чата. В нем будет сказано, что пользователь покинул сессию чата. Мы сделаем это, используя функции fopen(), fwrite() и fclose(), чтобы манипулировать нашим файлом log.html, который, как мы увидим позднее, будет создан в качестве лога нашего чата. Пожалуйста, обратите внимание, что мы добавили класс ‘msgln’ в блок div. Мы уж определили стиль css для этого блока.

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

  Шаг 4: Поддержка пользовательского ввода данных

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

  jQuery

  Практически все, что мы собираемся делать с jQuery для обработки наших данных, будет вращаться вокруг запроса на jQuery post.

  Источник