создание чата на php

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

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

Введение

создание чата на php. Смотреть фото создание чата на php. Смотреть картинку создание чата на php. Картинка про создание чата на php. Фото создание чата на phpсоздание чата на php. Смотреть фото создание чата на php. Смотреть картинку создание чата на php. Картинка про создание чата на php. Фото создание чата на php создание чата на php. Смотреть фото создание чата на php. Смотреть картинку создание чата на php. Картинка про создание чата на php. Фото создание чата на php

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

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

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

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

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

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

создание чата на php. Смотреть фото создание чата на php. Смотреть картинку создание чата на php. Картинка про создание чата на php. Фото создание чата на phpсоздание чата на php. Смотреть фото создание чата на php. Смотреть картинку создание чата на php. Картинка про создание чата на php. Фото создание чата на php создание чата на php. Смотреть фото создание чата на php. Смотреть картинку создание чата на php. Картинка про создание чата на php. Фото создание чата на php

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

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

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

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

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

создание чата на php. Смотреть фото создание чата на php. Смотреть картинку создание чата на php. Картинка про создание чата на php. Фото создание чата на phpсоздание чата на php. Смотреть фото создание чата на php. Смотреть картинку создание чата на php. Картинка про создание чата на php. Фото создание чата на php создание чата на php. Смотреть фото создание чата на php. Смотреть картинку создание чата на php. Картинка про создание чата на php. Фото создание чата на php

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

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

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

создание чата на php. Смотреть фото создание чата на php. Смотреть картинку создание чата на php. Картинка про создание чата на php. Фото создание чата на phpсоздание чата на php. Смотреть фото создание чата на php. Смотреть картинку создание чата на php. Картинка про создание чата на php. Фото создание чата на php создание чата на php. Смотреть фото создание чата на php. Смотреть картинку создание чата на php. Картинка про создание чата на php. Фото создание чата на php

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

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

создание чата на php. Смотреть фото создание чата на php. Смотреть картинку создание чата на php. Картинка про создание чата на php. Фото создание чата на phpсоздание чата на php. Смотреть фото создание чата на php. Смотреть картинку создание чата на php. Картинка про создание чата на php. Фото создание чата на php создание чата на php. Смотреть фото создание чата на php. Смотреть картинку создание чата на php. Картинка про создание чата на php. Фото создание чата на php

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

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

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

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

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

jQuery

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

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

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

И наконец, мы закрываем наш файл с помощью fclose().

Шаг 5: Отображение содержимого лога чата (log.html)

Чтобы сэкономить нам немного времени, мы предварительно загрузим лог чата в блок #chatbox div, как если бы он что-то содержал.

Мы используем процедуру, похожую на ту, что мы использовали в файле post.php, но на этот раз мы только читаем и выводим содержимое файла.

Запрос jQuery.ajax

Мы завернем наш ajax запрос в функцию. Вы увидите, зачем, прямо сейчас. Как вы можете видеть выше, мы использовали только три из объектов запроса jQuery ajax.

Как вы видите, затем мы перемещаем запрошенные нами данные (html) в блок #chatbox div.

Автопрокрутка

Как мы, возможно, видели в других приложениях чатов, содержимое автоматически прокручивается вниз, если контейнер лога чата (#chatbox) переполняется. Мы воплотим простую и похожую возможность, которая будет сравнивать высоту полосы прокрутки контейнера до и после того, как мы выполним ajax запрос. Если высота полосы прокрутки стала больше после запроса, мы используем эффект анимации jQuery, чтобы прокрутить блок #chatbox div.

Постоянное обновление лога чата

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

Ответ на наш вопрос находится в функции setInterval. Эта функция будет запускать нашу функцию loadLog() каждые 2,5 секунды, которая будет запрашивать обновленный файл и делать автопрокрутку блока.

создание чата на php. Смотреть фото создание чата на php. Смотреть картинку создание чата на php. Картинка про создание чата на php. Фото создание чата на phpсоздание чата на php. Смотреть фото создание чата на php. Смотреть картинку создание чата на php. Картинка про создание чата на php. Фото создание чата на php создание чата на php. Смотреть фото создание чата на php. Смотреть картинку создание чата на php. Картинка про создание чата на php. Фото создание чата на php

Закончили

Ниже привожу несколько ссылок, которые вы возможно захотите посмотреть, если задумаетесь о расширении этого приложения чата:

Источник

Создание мини-чата на PHP и jQuery

Дата публикации: 2015-04-28

создание чата на php. Смотреть фото создание чата на php. Смотреть картинку создание чата на php. Картинка про создание чата на php. Фото создание чата на php

От автора: В данной обучающей статье мы с вами научимся создавать мини-чат на PHP и jQuery, который позволит посетителям вашего сайта оставлять друг другу небольшие комментарии. Сообщения будут храниться на стороне сервера в виде файлов, никакой базы данных, например, MySQL не потребуется. Для облегчения работы мы будем использовать две PHP библиотеки – Flywheel для хранения сообщений в виде файлов в формате JSON и RelativeTime для создания относительных временных меток в удобочитаемом для человека виде. Для установки данных библиотек будет использоваться Composer.

создание чата на php. Смотреть фото создание чата на php. Смотреть картинку создание чата на php. Картинка про создание чата на php. Фото создание чата на phpсоздание чата на php. Смотреть фото создание чата на php. Смотреть картинку создание чата на php. Картинка про создание чата на php. Фото создание чата на php

На стороне клиента мы будем использовать обычный jQuery код и библиотеку Emoji One, которая является бесплатной и служит для добавления симпатичных смайликов-эмоджи в веб-приложения. Давайте начинать!

Запускаем мини-чат

Вы можете скачать исходники по вышеприведенной ссылке. В исходном коде содержится много комментариев, и весь код легко читается. Для запуска нужно загрузить исходный код на хостинг или добавить его в папку htdocs сервера Apache, если вы пользуетесь чем-нибудь вроде XAMPP или MAMP. Затем наберите в вашем браузере адрес localhost (или адрес вашего сайта, если вы загрузили исходники на хостинг). Вот несколько моментов, на которые следует обратить внимание:

В zip архивах уже содержатся необходимые зависимости, поэтому вам не нужно устанавливать Composer. Так гораздо проще начать работать с кодом – просто загрузите и используйте!

создание чата на php. Смотреть фото создание чата на php. Смотреть картинку создание чата на php. Картинка про создание чата на php. Фото создание чата на php

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

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

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

Источник

Создаем чат для сайта: HTML, JS, PHP и AJAX

Когда обычных комментариев становится недостаточно, приходит время создать чат.

С помощью чата пользователи общаются друг с другом, повышая интерес к сайту. Это важный элемент для вебинарных площадок, порталов со службой поддержки и страниц, где необходимо более живое, нефорумное общение. Гайд поможет на практике скомбинировать знания по HTML, JS, PHP и AJAX и создать готовый продукт.

Если знаний ещё недостаточно, обратите внимание на курс «Веб-разработчик c нуля до PRO».

создание чата на php. Смотреть фото создание чата на php. Смотреть картинку создание чата на php. Картинка про создание чата на php. Фото создание чата на php

Пишет о программировании, в свободное время создает игры. Мечтает открыть свою студию и выпускать ламповые RPG.

Каким должен быть чат

Удобство для пользователей превыше всего. Позаботьтесь, чтобы чат соответствовал современным требованиям:

Каркас чата на HTML

В первую очередь создаём форму отправки и контейнер для отображения сообщений:

Задаём стили

Первый этап пройден:

создание чата на php. Смотреть фото создание чата на php. Смотреть картинку создание чата на php. Картинка про создание чата на php. Фото создание чата на php

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

Основная часть чата
на JS + PHP

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

Создаем переменные на JS

Создаем функцию для запросов

Она получает переменную act, в которой хранится одно из трёх значений: auth (авторизация), load (загрузка) и send (отправка). От них зависит, какая информация будет передана в PHP-файл.

Создаём функцию обновления чата

И укажем для нашей функции интервал выполнения:

После отлавливается событие отправки формы — это поможет отказаться от обновления страницы:

Теперь займёмся самим обработчиком. В первую очередь с помощью функции session_start () запускается сессия, затем подключается база данных:

Создаём функцию авторизации

Создаём функцию загрузки

Создаём функцию отправки сообщений

В функции уже присутствует несложная валидация, но можно добавить и другие меры защиты от инъекций и спама:

Теперь, когда все функции готовы, пропишем их вызов.

Вызываем функции

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

создание чата на php. Смотреть фото создание чата на php. Смотреть картинку создание чата на php. Картинка про создание чата на php. Фото создание чата на php

Теперь, когда чат работает, пора добавить авторизацию. Для этого можно создать отдельную форму во фронте, но можно обойтись и модальными окнами. В функции send_request () дополним отправку запроса:

Вот как это выглядит:

создание чата на php. Смотреть фото создание чата на php. Смотреть картинку создание чата на php. Картинка про создание чата на php. Фото создание чата на php

Дополнительные функции

Минимальные возможности чата у нас есть, и продукт можно запускать в релиз, но добавим ещё несколько полезных штук.

Смайлики

Создадим свой набор смайликов чата. Работать это будет так:

Для начала добавим контейнер со смайликами и кнопку для его открытия:

Добавим скрипт для загрузки смайликов и открытия меню с ними:

А теперь и функцию добавления смайлика в поле:

После этого укажем, когда вызываются функции:

Приступим к загрузке смайликов и их преобразованию на PHP:

Эта функция сканирует папку со смайликами, а потом проверяет расширение файлов. Она очень удобна, потому что отображает в формате PNG все смайлики, которые мы добавили.

Чтобы вызвать её, добавим ещё один case в функцию switch () в конце обработчика:

Теперь с помощью регулярных выражений можно заменять код смайлика на изображение:

Вызывается эта функция при загрузке сообщений:

Вот как это выглядит:

создание чата на php. Смотреть фото создание чата на php. Смотреть картинку создание чата на php. Картинка про создание чата на php. Фото создание чата на php

Ответ на сообщения

Чтобы добавить возможность отвечать кому-то конкретному, изменим функцию addEmoji (). При нажатии на ник собеседника будет меняться текст в поле ввода.

Для этого в load () изменим формат сообщений, добавив span к нику:

Пишем саму функцию:

И вызываем функцию:

Заключение

Одной статьи недостаточно, чтобы охватить все возможности PHP и JS для разработки чатов. С помощью этих языков легко добавить:

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

Веб-разработчик c нуля до PRO

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

Источник

Простой чат на JavaScript и PHP

Как же работает этот скрипт? Сначала, подключается к базе данных. После подключения, смотрим, что запришивает клиент.
Если он запрашивает сообщения, то генерируем сколько сообщений не хватает клиенту. Затем, запрашиваем в безе все необходимые сообщения, добавляем их в массив, генерируем JSON и посылаем все это дело клиенту.

Теперь, у нас есть основа для чата. Все, что нам осталось сделать, так это обновление чата на стороне клиента и добавление новых сообщений в чат. Для всего этого, мы будем использовать Ajax запросы.
Давайте, создадим в файле index.php скрипт для обработки и добавления сообщений.
Добавим между тегов head >. head > наш Javascript:

Разберем этот скрипт…
Строка (3). Если в куках есть имя пользователя, то заполняем форму с именем. Для чего это сделано? Если пользователь обновил страничку с чатом или зашел заново на страницу с чатом, то ему не придется вводить свое имя заново.
Строка (7). Функция обновления чата. Чат обновляется не полностью, а присылаются только те сообщения, которых нет в чате.
Строка (9). Генерируем Ajax запрос. Для чего нужно отправлять лишнюю переменную «t=»+(new Date).getTime()? Если не отправить, то некоторые браузеры кэшируют одинаковые Ajax запросы. А нам это не нужно! т.к. не смогут обновляться сообщения. Функция (new Date).getTime() возвращает время в миллисекундах. Таким образом, браузер не кэширует запрос, т.к. при каждой отправке, генерируется разная строка.
Строка (16). Почему именно больше двух символов? Да потому что если все сообщения в чате есть, то сервер присылает не пустую строку, а «[]». т.к. ответ генерируется в JSON.
Строка (37). Запрос новых сообщений раз в две секунды. Мне очень понравился плагин jQuery Timers. С помощью него можно очень гибко сделать повторение определенных действий любое количество раз.

В общем-то, и всё. Вот и готов наш чат. Проверку имени на валидность и смайлы оставляю для домашнего задания.

Источник

unboxIT

Если информация была полезной для вас, вы можете поблагодарить за труды Яндекс деньгами: 41001164449086 или пластиковой картой:

Пишем PHP чат ООП MVC Ajax JavaScript

Сразу надо сказать что я не пытаюсь изобрести велосипед, или правильнее сказать чат, благо на сегодня их написано огромное количество. Скорее это проверка собственных навыков приобретённых после прохождения ряда курсов по PHP ООП, программированию, а также изучения JavaScript, помноженных на концепцию MVC. Всё написанное ниже является моим виденьем архитектуры построения web приложения, а именно чата, которое возможно поможет начинающим программистам.

Вступление. Структура приложения чата.

Итак, чат мы будем писать на PHP с использованием ООП в концепции MVC. При отправка сообщений и получение новых будет осуществляться динамически при помощи Ajax POST запросов.
Но прежде чем начать мне бы хотелось сразу показать структуру чата, архитектуру которая у нас выстроится в следующих частях.
Я не буду строить UML диаграммы, поскольку не все с ними знакомы, да и иллюстрация ниже более чем понятна:

создание чата на php. Смотреть фото создание чата на php. Смотреть картинку создание чата на php. Картинка про создание чата на php. Фото создание чата на php

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

Часть 1. MVC и файловая структура.

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

Опишу концепцию MVC коротко, своими словами.
При таком подходе приложение разбивается на три части каждая из которых отвечает за свою сферу, а именно:

Model (Модель) – выполняет обработку данных, вычисления, и т.д.
View (Вид) – отвечает за вид, форму, в общем интерфейс отображаемый пользователю, на основании данных от модели
Controller(Контроллер) – получает данные от пользователя (от интерфейса) и передаёт их соответствующим образом модели.

В соответствие с MVC, и некоторыми другими соображениями структура папок чата будет выглядеть следующим образом:

Часть 2. Начало работы и автозагрузка файлов.

Поскольку я буду использовать PHP ООП подход, то за место скучного подключения нужных файлов через include (require), можно написать функцию которая будет подгружать нужные файлы при инстанцировании класса:

При попытке создать объект класса cMain из пространства имён (namespace) controllers (об этом чуть позже) мы автоматически выполним:

Важно заметить, что функция, str_replace в функции автозагрузчика автоматически заменит ‘\’ на ‘/’, таким образом происходит согласование пространства имён с файловой структурой приложения. Это очень важный момент.
Т.е создавая объект new controllers\cMain, мы фактически выполняем require_once controllers/cMain.

Красиво и изящно, а главное нет длинных имён классов, сложной функции автозагрузки, и файловая структура согласована с пространством имён.

Далее мы выполняем единственный метод request(), который инициализирует работу чата.

Мы только что разобрали работу файла index.php

Небольшое отступление.
Я думаю вы заметили приставку ‘c’ перед названием класса cMain, это говорит о том, что перед нами контроллер. Соответственно ‘m’ – будет означать модель. Для большей простоты и наглядности построения пользовательского интерфейса при помощи шаблонов я не буду использовать ООП, поэтому классов с ‘v’ у меня не будет.
Приставки в виде буквы в названии класса я сделал умышлено, для большей наглядности, и в действительности в этом нет никакой необходимости, поскольку пространство имён однозначно определяют принадлежность того или иного класса в концепции MVC.

Часть 3. Контроллеры.

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

namespace controllers;
class cMain<
public function __construct() <
>

Как я говорил ранее, структура папок и пространство имён согласованны, по этому контроллер находится в пространстве имён (namespace) controllers, находясь при этом в папке controllers.

Выполняя в index.php единственный метод request(), мы проверяем наличие POST запросов.

Если POST запроса нет, то, это пользователь первый раз зашёл на страницу, и мы должны показать ему интерфейс, или проще говорят вывести собственно наш чат.
Для этого мы создаём объект сообщений класса mMessagesCheck, передавая в конструктор null (поскольку отсутствует POST запрос). После чего сам объект с сообщениями передаём в конструктор класса mChat, который и отвечает за построение пользовательского интерфейса.

Если же есть POST запрос, то это Ajax запросы, инициированные JavaScript составляющей чата.
Запросы POST могут быть двух видов ‘transmit’ и ‘receive’. Для этого мы просто проверяем наличие соответствующих ключей в глобальном массиве $_POST. Названия ‘transmit‘ и ‘receive‘ выдуманные, но довольно неплохо отражают суть происходящего.

Первый запрос, ‘transmit’, говорит о необходимости добавить новое сообщение, для чего мы выполним в контроллере метод add().

Второй запрос ‘receive’, говорит о желании получить новые сообщения из БД. Здесь мы выполним метод showJson().

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

В обоих случаях нам потребуется создать объект с сообщениями new mMessagesCheck($_POST). Запрос POST мы передаём в конструктор, поскольку именно в нём будет содержатся информация о вновь добавляемом сообщении от пользователя в БД, либо о желании получить новые сообщения от БД к пользователю.

Крайне важно не возлагать работу моделей (обработку данных, вычисления) на контроллеры. Всё что должен сделать контроллер, это управлять процессом, но не более. В противном случае мы рискуем скатиться к чрезмерному разрастанию контроллера, или говоря научно к Fat Stupid Ugly Controllers (Толстые, тупые, уродливые контроллеры).

Ну да ладно, я отвлёкся, думаю, теперь настало самое время детально рассмотреть, классы модели с сообщениями mMessagesCheck и mMessages.

Часть 4. Модели mMessagesCheck и mMessages.

Сразу хочу сказать, что это самый сложный класс для понимания, поэтому, следует запастись терпением.

mMessagesCheck является прокси для класса mMessages, и оба они по паттерну GOF Proxy реализуют один и тот же интерфейс:

namespace lib;
interface iMessages <
public function __construct($post);
public function get();
public function add();
public function showJson();
>

В конструктор бы будем передавать POST запросы (если они есть).

Метод get() будет возвращать массив сообщений которые есть в БД, для дальнейшей обработки моделью класса mChat.
Метод add() будет добавлять новые сообщения в БД, руководствуясь тем что находиться в POST.
Метод showJson() будет выводить JSON представление сообщений, на основании некоторых параметров, которые опять же находятся в POST.

mMessagesCheck осуществляет проверку данных полученных методом POST, и если они корректны, то передаёт их mMessages для дальнейшего взаимодействия с БД. Таким образом mMessagesCheck как бы защищает mMessages являясь кеширующим защитником. Но оба класса реализуют один и тот же интерфейс.

Итак mMessagesCheck, имеет следующий вид:

Начнём с самого простого, метода get().
Напомню, этот метод вызывается контроллером, если запрос исходит непосредственно от пользователя, т.е. не идёт речи о в взаимодействии данных от пользователя с БД. Поэтому этот метод абсолютно безопасен, и его можно переадресовать дальше объекту класса mMessages:

Важно не забывать вернуть результат полученный непосредственно от модели mMessages с сообщениями, который мы будем позднее использовать в модели класса mChat.

Несколько сложнее работает метод showJson().
В нём проверяется что запрос не пустой, и если это так, то из последовательности символов переданных JavaScript, мы делаем полноценный объект:

В этом объекте при помощи регулярного выражения мы проверяем на корректность одно единственное свойство last. В этом свойстве храниться порядковый номер последнего сообщения которое есть у пользователя. Если это только число, то всё в порядке, и мы также переадресовываем POST запрос объекту класса mMessages.

Здесь нам нет необходимости возвращать запрос, поскольку showJson(), вызывается для того чтобы вывести, показать данные. Именно эти данные увидит JavaScript при соответствующем запросе.

Метод add() работает практически аналогичным образом.
Он принимает POST запрос, делает из него объект. У этого объекта есть 2 свойства user и message, в которых содержится информации о имени пользователя и тексте сообщения которые отправляет пользователь.
Поскольку именно эти свойства (данные) мы будем записывать в БД, их необходимо хорошенько проверить на предмет всевозможных атак, что и делается регулярными выражениями строчками ниже.

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

Теперь настало самое время рассмотреть класс mMessages.
Именно он занимается взаимодействием (правда через посредников) с БД. Фактически, его основная задача, это подготовить POST данные для записи/получения данных в/из БД в виде SQL запросов и вернуть либо вывести результат.

Итак, собcтвенно код:

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

В конструкторе этого класса:

В переменной $dbConfig будет храниться объект со свойствами, параметрами которые необходимы для подключения непосредственно к БД. Эти свойства мы передадим в конструктор класса mMySQL, который имеет единственный метод request($query), целью которого является выполнение соответствующего SQL запроса $query и возвращение результата.

Также не вижу смысла детально рассказывать о моделях классов mConfigIni и mMySQL, они более чем просты и понятны.

Первый класс mConfigIni, читает конфигурацию из файлов вида ‘свойство=значение’, и формирует объект с искомыми свойствами, которые позднее удобно использовать.

Второй класс mMySQL на основании данных конструктора осуществляет соединение с БД и выполняет запрос при вызове метода request($query).

Хочу обратить внимание на особенность метода add() класса mMessages.
В случае если добавление сообщения прошло успешно, мы отправим сообщение ‘success’.

Это сообщение будет принимать JS, понимая тем самым что сообщение было успешно добавлено в БД.

Почти также работает метод showJson() он берёт сообщения из БД, номера которых больше чем отправил JS (об этом чуть позже). Если таких сообщений нет, то выводиться ‘no’, если есть, то они выводятся в JSON формате для последующей интерпретацией JS:

Часть 5. Модели для создания интерфеса чата, mChat и mTemplate.

Здесь я предлагаю начать с последнего, а именно mTemplate, класс прост и изящен.

Целью данного класса является создание объектов на основании файлов с шаблонами.

Наиболее интересен здесь конструктор. Мы передаём ему 2 параметра, а именно файл с шаблоном на основании какого будет создан объект, и переменные с значениями в виде массива которые будем использовать внутри этого шаблона:

С первым параметром всё понятно, а вот назначение второго параметра в виде массива может несколько озадачить.

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

Проще всего понять это на примере.
Рассмотрим, что произойдёт в конструкторе класса при:

$obj = new mTemplate(‘templates/messages.php’, array(‘messages’=> ‘Много сообщений’)

При выполнение цикла foreach показанного выше в переменную $messages будет записано значение ‘Много сообщений’. Далее мы стартуем буферезованный вывод, состоящий из include файла messages.php.
Для большей простоты, предположим что этот файл представляет из себя что-то вроде:

В этом файле при выполнении переменная $messages получит описанное выше значение.

Т.е. в свойстве готовый HTML код который можно либо использовать дальше, либо показать пользователю. От сюда следуют 2 основных метода:

get() – который вернёт готовый HTML код для последующего использования, например вставки в другой более общий шаблон.
show() – выведет готовый HTML, тем самым передав его браузеру пользователя.

Собственно, именно так и работает mChat:

Этот класс принимает в конструктор единственный параметр – объект сообщений, который мы передали ранее в контроллере cMain.

Далее следует рассмотреть метод show().
В первой строке, мы записываем в переменную $htmlMessages объект с готовым HTML кодом, построенный на основании шаблона ‘templates/messages.php’ и массива сообщений (полученного в результате вызова метода messages->get()).
В messages.php находится шаблон для построения сообщений чата.
Теперь $htmlMessages содержится объект в свойстве html которого, что-то вроде:

Почему в переменную мы не записываем непосредственно HTML код, а объект с свойством, станет понятно чуть ниже.

Аналогично мы поступаем с шаблоном popup.php, который нужен для включения на страницу HTML кода для всплывающих сообщений. А также send.php в котором содержится шаблон для формы отправки данных, в чат.

Самое интересное происходит в предпоследней строке метода:

Здесь мы производим окончательную сборку.
В общий шаблон main.php мы включаем все составные части HTML. Именно для этого мы вызываем методы get(), у соответствующих объектов. Таким образом мы передаём в шаблон main.php составные части HTML кода, но ещё не показываем его пользователю. А вот строка:

Мы показали, отправили готовый HTML код, который будет обработан браузером пользователя.

Схематично иерархию шаблонов можно представить так:

main.php(messages.php + send.php + popup.php)

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

Об этом мы и поговорим далее.

Часть 6. JavaScript Ajax

На данный момент у нас есть полностью готовая HTML страница, с сообщениями которые есть БД, формой отправки и т.д. Но она полностью статична. Передавать свои сообщения и получать новые от сервера мы будем с использованием JavaScript.

Для этого в шаблонах ранее подключены 3 js файла:

Первый это библиотека Jquery.
По большому счёту она потребуется нам лишь для более удобного формирования Ajax запросов, и для некоторой анимации. Всё это можно сделать и голыми средствами JavaScript, однако Jquery значительно упростит нашу JS составляющую.

Прежде чем переходить непосредственно к рассмотрению JS файлов, надо понимать что у нас в данный происходит в браузере.
А в нем у нас примерно такой HTML код полученный от сервера:

Источник

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *