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

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

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

скачать исходникидемо

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

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

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

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

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

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

HTML

Давайте начнем с файла index.html. Это обычный HTML5 документ, который включает в себя наши JavaScript библиотеки, скрипты и таблицы стилей. Вот код, относящийся непосредственно к мини-чату:

index.html

С помощью JavaScript мы поместим опубликованные сообщения внутрь элемента ul. По умолчанию форма скрыта и появляется только при клике на заголовок “Write a message” («Написать сообщение»).

JavaScript

А вот наш файл script.js, который заставляет работать вышеприведенный HTML:

assets/js/script.js

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

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

У библиотеки Emoji One есть версии и для JavaScript и для PHP. В методе appendComments мы используем функцию emojione.toImage(), чтобы сконвертировать все напечатанные смайлы в смайлики-эмоджи. Загляните на этот полезный сайт emoji.codes. Теперь фронтенд готов. Давайте переходить к бэкенду.

PHP

У нас есть два файла – publish.php и load.php. Первый принимает POST запрос, чтобы сохранить сообщения в базе данных, а второй возвращает 20 последних сообщений. Эти файлы не вызываются напрямую посетителями сайта, а только обрабатывают AJAX запросы.

publish.php

Здесь мы напрямую используем упомянутую вначале библиотеку Flywheel. Как только она будет настроена, вы можете хранить любые типы данных, которые будут записаны в виде JSON файла в директории data/shouts. Чтение данных сообщений происходит в load.php:

load.php

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

Теперь наш мини-чат готов! Вы можете добавить его на ваш веб-сайт, настроить или переделать его так, как вам захочется. Надеемся, что он вам понравился!

Автор: Nick Anastasov

Источник: http://tutorialzine.com/

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

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

Разработка веб-приложения на PHP

Создайте веб-приложение на PHP на примере приема платежей на сайте

Получить

Метки:

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

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

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

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

  1. Kirill

    Не отправляются сообщения, и вообщеничего не происходит при нажатии на кнопку, что делать?

  2. Дмитрий

    Также не работает. Не помогли также рекомендации и из этой статьи: tutorialzine.com/2015/01/shoutbox-php-jquery/

  3. Александр

    Спасибо за ответ!
    В дополнение к написанному. Проверил в фаербаге: данные отправляются из фрейма методом Get, хотя в форме прописан POST:

    Нашёл ошибку. Ну бывает же так переклинит…
    нужно писать method=»POST», а у меня было написано metod=»post». Так как в коделобстере не разбирает html если он отформатирован в php тегах, то не заметил описки.

    Спасибо! :-)

  4. Викто

    Интересно увидеть реализацию на mysql… тогда можно будет отказаться от библиотеки JamesMoss\Flywheel

  5. Викто

    Смог переписать на mysql и в строить в модель и контроллер на larave, теперь выглядит как ichat 7 от dle :)

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree