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

Для того чтобы создать такой AJAX чат мы будем использовать PHP, MySQL и jQuery. Для начала мы рассмотрим разметку HTML, документ которого строится в соответствии с HTML5, что позволяет использовать новый, более короткий синтаксис DOCTYPE, и опускать атрибут type в тегах script.

index.html

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

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

Примечание! Определения таблиц имеются в файле tables.sql в исходниках. Вы можете использовать текст запросов для создания таблиц. Также, при установке чата на свой хост, нужно поменять установки в ajax.php на ваши данные для соединения с базой MySQL.

Когда Вы создали таблицу и сделали все, что сказано в примечании то давайте обсудим скрипт PHP, который управляет чатом. Первый файл, который мы рассмотрим, ajax.php. Он обрабатывает запросы AJAX от клиентской части из jQuery и выводит данные в формате JSON.

ajax.php

Для удобства используется оператор switch для определения  действий, которые обрабатывает скрипт. Здесь реализованы подсистемы чата, функциональность входа/выхода и действия по запросу списка реплик и пользователей в режиме онлайн.

Вывод осуществляется в форме сообщений JSON (которые удобно обрабатывать с помощью jQuery), ошибки генерируют исключения. Оператор switch распределяет все запросы соответствующим статическим методам класса Chat, который будет обсуждаться позже в данном разделе.

DB.class.php

Класс DB - менеджер базы данных. Конструктор объявлен как private, таким образом, объект не может быть создан вне пределов класса, и инициализация возможна только из статического метода init(). Он берет массив с параметрами соединения с MySQL и создает экземпляр класса, который содержится в статической переменной self::$instance. Таким образом, обеспечивается существование единственного соединения с базой данных в  конкретный момент времени.

Остальная часть класса реализует коммуникацию с базой данных, в основе которой лежит статический метод query().

ChatBase.class.php

Это простой базовый класс. Его основное назначение - определить конструктор, который получает массив параметров, но сохраняет только те, которые определены в классе.

ChatLine.class.php

Класс ChatLine является производным классом от ChatBase. Объект данного класса может быть легко создан с помощью передачи конструктору массива с текстом, именем автора и элементом gravatar. Свойство класса gravatar содержит хэш md5 email адреса. Оно нужно для получения пользовательского аватара, соответствующего email адресу,  с сайта gravatar.com.

Данный класс также определяет метод save, который сохраняет объект в базе данных. Так как метод возвращает объект MySQLi, содержащийся в классе DB, вы можете проверить успешность завершения операции с помощью свойства affected_rows.

ChatUser.class.php

Класс имеет свойства name и gravatar (обратите внимание на модификатор доступа  protected  – свойства доступны в классе ChatBase, и мы можем устанавливать их значения в конструкторе).

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

Chat.class.php

Этот код выполняет всю работу. В операторе switch в файле ajax.php выбирались действия, которые соответствовали методам данного класса. Каждый из этих методов возвращает массив, который затем конвертируется в объект JSON с помощью функции json_encode() (это происходит внизу в файле ajax.php).

Когда пользователь входит в систему, его имя и gravatar сохраняются как элементы массива$_SESSION и становятся доступны в последующих запросах.

Chat.class.php

В методе getChats() используется функция gmdate вывода времени в формате GMT. В клиентской части мы используем значения часов и минут для установки в объекте JavaScript, а в результате время отображается в соответствии с часовым поясом пользователя.

Стили чата содержатся в файле chat.css. Стили не зависят от остальной страницы и их легко встроить в уже существующий сайт. Нужно только включить разметку  HTML, стили и файлы JavaScript.

chat.css

Начинается все с задания стилей для div #chatContainer. Он центрируется горизонтально с помощью свойства margin:100px auto; . Данный div разделяется на верхнюю панель, область чата, область пользователей и нижнюю панель.

Верхняя панель выводит информацию о зарегистрированном пользователе. Она получает относительное позиционирование, так что аватар, имя и кнопка "выйти" располагаются соответственно.

Затем следует div, который содержит все строки чата – #chatLineHolder. Данный div имеет фиксированную высоту и ширину, а в части данного урока, которая посвящена jQuery, мы используем плагин jScrollPane для превращения его в область с прокруткой контента с боковым слайдером.

chat.css

Во второй части файла стилей мы оформляем контейнер #chatUsers и элементы div для пользователя. Каждый активный пользователь чата представлен изображением gravatar размером 32 на 32 пикселя. Изображение по умолчанию используется в качестве фона, и когда реальное изображение загружается с сервера  gravatar.com, оно выводится сверху.  Так предотвращается раздражающее мерцание, которое обычно появляется в момент загрузки изображения.

Остальная часть кода связана с нижней панелью и формой отправки. Элемент div .tipстановится треугольником, сделанным с использованием CSS, за счет установки нулевой высоты и ширины, при этом ширина обводки устанавливается большой.

chat.css

Перейдем к последней части нашего урока - коду jQuery. Чат работает, получая события от форм регистрации и отправки сообщения, а также от кнопки "Выйти", а также по расписанию отправляются запросы AJAX к серверу для проверки наличия новых сообщений и пользователей.

PHP часть обрабатывает запросы AJAX в файле ajax.php. jQuery генерирует следующие запросы AJAX:

  • Вход пользователя в систему: один запрос POST;
  • Выход пользователя из системы: один запрос POST;
  • Проверка пользователей, которые находятся в режиме онлайн: выполняется каждые 15 секунд;
  • Проверка новых записей: запрос GET генерируется каждую секунду. Такое функционирование может привести к очень высокой нагрузке на веб сервер, поэтому скрипт оптимизирован, и в зависимости от активности чата, период генерации запроса может быть увеличен до 15 секунд.

Мы определили пользовательские функции-обертки для функций AJAX jQuery $.get и $.post, которые помогают заполнять длинные параметры для генерации запроса.

Также весь код чата организован в один объект chat. Он содержит несколько удобных методов.

script.js

Метод init() предназначен для привязки обработчиков событий к чату и запуску функций таймера, которые используются для проверки по расписанию наличия новых записей в чате и списка пользователей в режиме онлайн. Мы используем собственные функции-обертки –$.tzGET и $.tzPOST. Они принимают на себя всю тяжесть работы по заданию длинного списка параметров для запросов AJAX.

script.js

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

В конце данного куска кода запускаются две именованные самовыполняющиеся функции. Данные функции будут передаваться как параметры методам chat.getChats() илиchat.getUsers() соответственно, таким образом, могут быть установлены дополнительные таймауты.

script.js

В данной части кода внимания требует метод render(). Он собирает шаблон в зависимости от параметра template. Метод затем создает и возвращает запрашиваемый код HTML, встраивая в него значения второго параметра объекта params.

script.js

Метод addChat() получает в качестве параметра объект, который содержит строку чата, имя автора и gravatar, и вставляет строку чата в соответствующее место в контейнере  div#chatContainer. Каждая строка чата (если она не является временной) имеет уникальный ID, который назначается MySQL. Данный id как имя класса для строки чата в формате chat-123.

Когда метод addChat() выполняется, он проверяет существование предыдущей строки (дляchat-123 будет проверяться наличие chat-122). Если она существует, метод вставляет новую строку после нее. Если нет, то просто добавляет новую строку к div. Такая простая техника управляет вставкой строк в правильном порядке и поддерживает его на протяжении всей работы чата.

script.js

В данной части кода происходит управление запросами AJAX.  В методе getChats() определяется, когда будет снова выполняться функция в зависимости от свойства noActivityлокального объекта данных. При каждом запросе, который не возвращает новых строк чата, мы увеличиваем счетчик. Если он достигает определенного порога, следующий запрос будет генерироваться с задержкой.

script.js

В последней части кода определяются вспомогательные функции и методы. МетодdisplayError() показывает красную строку вверху экрана, если происходит ошибка. Затем определяются функции-обертки $.tzGET и $.tzPOST, и плагин defaultText, который выводит заполняющий текст для полей ввода текста.

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.

Читайте также: