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

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

Запускаємо міні-чат

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

HTML

Давайте почнемо з файлу index.html. Це звичайний HTML5 документ, який включає в себе наші JavaScript бібліотеки, скрипти і таблиці стилів. Ось код, що відноситься безпосередньо до міні-чату:

index.html

З допомогою JavaScript ми помістимо опубліковані повідомлення всередину елемента ul. За замовчуванням форма прихована і з’являється тільки при натисканні на заголовок «Write a message» («Написати повідомлення»).

JavaScript

А ось наш файл script.js, який змушує працювати вищенаведений HTML:

assets/js/script.js

$(function(){
// Зберігаємо деякі елементи змінні для зручності
var refreshButton = $(‘h1 img’),
shoutboxForm = $(‘.shoutbox-form’),
form = shoutboxForm.find(‘form’),
closeForm = shoutboxForm.find(‘h2 span’),
nameElement = form.find(‘#shoutbox-name’),
commentElement = form.find(‘#shoutbox-comment’),
ul = $(‘ul.shoutbox-content’);
// Замінюємо на смайлики-эмоджи:
emojione.ascii = true;
// Завантажуємо коментарі.
load();
// При відправці форми, якщо все заповнено, публікуємо повідомлення у базі даних
var canPostComment = true;
form.submit(function(e){
e.preventDefault();
if(!canPostComment) return;
var name = nameElement.val().trim();
var comment = commentElement.val().trim();
if(name.length && comment.length && comment.length < 240) {
publish(name, comment);
// Блокуємо публікацію нових повідомлень
canPostComment = false;
// Дозволяємо новому коментарю бути опублікованими через 5 секунд
setTimeout(function(){
canPostComment = true;
}, 5000);
}
});
// Перемикаємо видимість форми.
shoutboxForm.on(‘click’, ‘h2’, function(e){
if(form.is(‘:visible’)) {
formClose();
}
else {
formOpen();
}
});
// При натисканні на кнопку REPLY (Відповісти) відбувається додавання в текстове поле ім’я людини, якій ви хотіли б відповісти.
ul.on(‘click’, ‘.shoutbox-comment-reply’, function(e){
var replyName = $(this).data(‘name’);
formOpen();
commentElement.val(‘@’+replyName+’ ‘).focus();
});
// При натисканні на кнопку «Оновити» відбувається спрацьовування функції load
var canReload = true;
refreshButton.click(function(){
if(!canReload) return false;
load();
canReload = false;
// Дозволяємо додаткові перезавантаження через 2 секунди
setTimeout(function(){
canReload = true;
}, 2000);
});
// Автоматично оновлюємо повідомлення кожні 20 секунд
setInterval(load,20000);
function formOpen(){
if(form.is(‘:visible’)) return;
form.slideDown();
closeForm.fadeIn();
}
function formClose(){
if(!form.is(‘:visible’)) return;
form.slideUp();
closeForm.fadeOut();
}
// Зберігаємо повідомлення у базі даних
function publish(name,comment){
$.post(‘publish.php’, {name: name, comment: comment}, function(){
nameElement.val(«»);
commentElement.val(«»);
load();
});
}
// Отримуємо останні повідомлення
function load(){
$.getJSON(‘./load.php’, function(data) {
appendComments(data);
});
}
// Обробляємо масив з повідомленнями у вигляді HTML
function appendComments(data) {
ul.empty();
data.forEach(function(d){
ul.append(‘

‘);
});
}
});

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

PHP

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

publish.php

new \JamesMoss\Flywheel\Formatter\JSON,
));
$repo = new \JamesMoss\Flywheel\Repository(‘shouts’, $config);
// Зберігаємо надійшли дані (повідомлення) у сховище даних
if(isset($_POST[«name»]) && isset($_POST[«comment»])) {
$name = htmlspecialchars($_POST[«name»]);
$name = str_replace(array(«\n», «\r»), «, $name);
$comment = htmlspecialchars($_POST[«comment»]);
$comment = str_replace(array(«\n», «\r»), «, $comment);
// Збереження нового повідомлення
$shout = new \JamesMoss\Flywheel\Document(array(
‘text’ => $comment,
‘name’ => $name,
‘createdAt’ => time()
));
$repo->store($shout);
}

Тут ми безпосередньо використовуємо згадану спочатку бібліотеку Flywheel. Як тільки вона буде налаштована, ви можете зберігати будь-які типи даних, які будуть записані у вигляді JSON файлу в директорії data/shouts. Читання даних повідомлень відбувається в load.php:

load.php

new \JamesMoss\Flywheel\Formatter\JSON,
));
$repo = new \JamesMoss\Flywheel\Repository(‘shouts’, $config);
// Видаляємо коментарі, опубліковані більше 1 години тому, якщо у змінній міститься true.
if($deleteOldComments) {
$oldShouts = $repo->query()
->where(‘createdAt’, ‘execute();
foreach($oldShouts as $old) {
$repo->delete($old->id);
}
}
// Відправляємо останні 20 повідомлень в форматі json
$shouts = $repo->query()
->orderBy(‘createdAt ASC’)
->limit(20,0)
->execute();
$results = array();
$config = array(
‘language’ => ‘\RelativeTime\Languages\English’,
‘separator’ => ‘, ‘,
‘suffix’ => true,
‘truncate’ => 1,
);
$relativeTime = new \RelativeTime\RelativeTime($config);
foreach($shouts as $shout) {
$shout->timeAgo = $relativeTime->timeAgo($shout->createdAt);
$results[] = $shout;
}
header(‘Content-type: application/json’);
echo json_encode($results);

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

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