Створення міні-чату на PHP, jQuery

23

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

Створення міні-чату на PHP, jQueryСтворення міні-чату на PHP, jQuery

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

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

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

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

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

HTML

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

index.html

Shout box Створення міні-чату на PHP, jQuery

    Write a message ×

    nickname
    message

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

    Створення міні-чату на PHP, jQuery

    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’);
    // Замінюємо Створення міні-чату на PHP, jQuery на смайлики-эмоджи:
    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(‘

  • ‘+
    ‘ + d.name + ‘‘+

    ‘+ emojione.toImage(d.text) + ‘

    ‘+

    REPLY‘+
    ‘ + d.timeAgo + ‘

    ‘+

  • ‘);
    });
    }
    });

    У бібліотеки 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.

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