0 added
0 removed
Original
2026-01-01
Modified
2026-02-21
1
<p><a>#Руководства</a></p>
1
<p><a>#Руководства</a></p>
2
<ul><li>22 апр 2019</li>
2
<ul><li>22 апр 2019</li>
3
<li>0</li>
3
<li>0</li>
4
</ul><p>Когда обычных комментариев становится недостаточно, приходит время создать чат.</p>
4
</ul><p>Когда обычных комментариев становится недостаточно, приходит время создать чат.</p>
5
<p> vlada_maestro / shutterstock</p>
5
<p> vlada_maestro / shutterstock</p>
6
<p>Пишет о программировании, в свободное время создаёт игры. Мечтает открыть свою студию и выпускать ламповые RPG.</p>
6
<p>Пишет о программировании, в свободное время создаёт игры. Мечтает открыть свою студию и выпускать ламповые RPG.</p>
7
<p>С помощью чата пользователи общаются друг с другом, повышая интерес к сайту. Это важный элемент для вебинарных площадок, порталов со службой поддержки и страниц, где необходимо более живое, нефорумное общение. Гайд поможет на практике скомбинировать знания по HTML, JS, PHP и AJAX и создать готовый продукт.</p>
7
<p>С помощью чата пользователи общаются друг с другом, повышая интерес к сайту. Это важный элемент для вебинарных площадок, порталов со службой поддержки и страниц, где необходимо более живое, нефорумное общение. Гайд поможет на практике скомбинировать знания по HTML, JS, PHP и AJAX и создать готовый продукт.</p>
8
<p>Удобство для пользователей превыше всего. Позаботьтесь, чтобы чат соответствовал современным требованиям:</p>
8
<p>Удобство для пользователей превыше всего. Позаботьтесь, чтобы чат соответствовал современным требованиям:</p>
9
<ul><li>сообщения отображаются корректно на всех устройствах;</li>
9
<ul><li>сообщения отображаются корректно на всех устройствах;</li>
10
<li>их загрузка и отправка происходят без обновления страницы;</li>
10
<li>их загрузка и отправка происходят без обновления страницы;</li>
11
<li>есть дополнительный контент - изображения, аудиосообщения, смайлики, стикеры и прочее.</li>
11
<li>есть дополнительный контент - изображения, аудиосообщения, смайлики, стикеры и прочее.</li>
12
</ul><p>В первую очередь создаём форму отправки и контейнер для отображения сообщений:</p>
12
</ul><p>В первую очередь создаём форму отправки и контейнер для отображения сообщений:</p>
13
<div class='chat'> <div class='chat-messages'> <div class='chat-messages__content' id='messages'> Загрузка... </div> </div> <div class='chat-input'> <form method='post' id='chat-form'> <input type='text' id='message-text' class='chat-form__input' placeholder='Введите сообщение'> <input type='submit' class='chat-form__submit' value='=>'> </form> </div> </div>.chat { border:1px solid #333; margin:15px; width:40%; height:70%; background:#555; color:#fff; } .chat-messages { min-height:93%; max-height:93%; overflow:auto; } .chat-messages__content { padding:1px; } .chat__message { border-left:3px solid #333; margin-top:2px; padding:2px; } .chat__message_black { border-color:#000; } .chat__message_blue { border-color:blue; } .chat__message_green { border-color:green; } .chat__message_red { border-color:red; } .chat-input { min-height:6%; } input { font-family:arial; font-size:16px; vertical-align:middle; background:#333; color:#fff; border:0; display:inline-block; margin:1px; height:30px; } .chat-form__input { width:79%; } .chat-form__submit { width:18%; }<p>Первый этап пройден:</p>
13
<div class='chat'> <div class='chat-messages'> <div class='chat-messages__content' id='messages'> Загрузка... </div> </div> <div class='chat-input'> <form method='post' id='chat-form'> <input type='text' id='message-text' class='chat-form__input' placeholder='Введите сообщение'> <input type='submit' class='chat-form__submit' value='=>'> </form> </div> </div>.chat { border:1px solid #333; margin:15px; width:40%; height:70%; background:#555; color:#fff; } .chat-messages { min-height:93%; max-height:93%; overflow:auto; } .chat-messages__content { padding:1px; } .chat__message { border-left:3px solid #333; margin-top:2px; padding:2px; } .chat__message_black { border-color:#000; } .chat__message_blue { border-color:blue; } .chat__message_green { border-color:green; } .chat__message_red { border-color:red; } .chat-input { min-height:6%; } input { font-family:arial; font-size:16px; vertical-align:middle; background:#333; color:#fff; border:0; display:inline-block; margin:1px; height:30px; } .chat-form__input { width:79%; } .chat-form__submit { width:18%; }<p>Первый этап пройден:</p>
14
<p>В первую очередь уделим внимание главным функциям чата, а после доработаем внешний вид.</p>
14
<p>В первую очередь уделим внимание главным функциям чата, а после доработаем внешний вид.</p>
15
<p>Сообщения будут отправляться и загружаться с помощью AJAX. На JavaScript пишем функции работы с интерфейсом и связи с серверной частью, а на PHP - методы обработки полученных данных и взаимодействия с базой данных.</p>
15
<p>Сообщения будут отправляться и загружаться с помощью AJAX. На JavaScript пишем функции работы с интерфейсом и связи с серверной частью, а на PHP - методы обработки полученных данных и взаимодействия с базой данных.</p>
16
var messages__container = document.getElementById('messages'); //Контейнер сообщений - скрипт будет добавлять в него сообщения var interval = null; //Переменная с интервалом подгрузки сообщений var sendForm = document.getElementById('chat-form'); //Форма отправки var messageInput = document.getElementById('message-text'); //Инпут для текста сообщения<p>Она получает переменную<em>act</em>, в которой хранится одно из трёх значений:<em>auth (авторизация), load (загрузка) и send (отправка)</em>. От них зависит, какая информация будет передана в PHP-файл.</p>
16
var messages__container = document.getElementById('messages'); //Контейнер сообщений - скрипт будет добавлять в него сообщения var interval = null; //Переменная с интервалом подгрузки сообщений var sendForm = document.getElementById('chat-form'); //Форма отправки var messageInput = document.getElementById('message-text'); //Инпут для текста сообщения<p>Она получает переменную<em>act</em>, в которой хранится одно из трёх значений:<em>auth (авторизация), load (загрузка) и send (отправка)</em>. От них зависит, какая информация будет передана в PHP-файл.</p>
17
function send_request(act, login = null, password = null) {//Основная функция //Переменные, которые будут отправляться var var1 = null; var var2 = null; if(act == 'auth') { //Если нужно авторизоваться, получаем логин и пароль, которые были переданы в функцию var1 = login; var2 = password; } else if(act == 'send') { //Если нужно отправить сообщение, то получаем текст из поля ввода var1 = messageInput.value; } $.post('includes/chat.php',{ //Отправляем переменные act: act, var1: var1, var2: var2 }).done(function (data) { //Заносим в контейнер ответ от сервера messages__container.innerHTML = data; if(act == 'send') { //Если нужно было отправить сообщение, очищаем поле ввода messageInput.value = ''; } }); }<p>И укажем для нашей функции интервал выполнения:</p>
17
function send_request(act, login = null, password = null) {//Основная функция //Переменные, которые будут отправляться var var1 = null; var var2 = null; if(act == 'auth') { //Если нужно авторизоваться, получаем логин и пароль, которые были переданы в функцию var1 = login; var2 = password; } else if(act == 'send') { //Если нужно отправить сообщение, то получаем текст из поля ввода var1 = messageInput.value; } $.post('includes/chat.php',{ //Отправляем переменные act: act, var1: var1, var2: var2 }).done(function (data) { //Заносим в контейнер ответ от сервера messages__container.innerHTML = data; if(act == 'send') { //Если нужно было отправить сообщение, очищаем поле ввода messageInput.value = ''; } }); }<p>И укажем для нашей функции интервал выполнения:</p>
18
function update() { send_request('load'); } interval = setInterval(update,500);<p>После отлавливается событие отправки формы - это поможет отказаться от обновления страницы:</p>
18
function update() { send_request('load'); } interval = setInterval(update,500);<p>После отлавливается событие отправки формы - это поможет отказаться от обновления страницы:</p>
19
sendForm.onsubmit = function () { send_request('send'); return false; //Возвращаем ложь, чтобы остановить классическую отправку формы };<p>Теперь займёмся самим обработчиком. В первую очередь с помощью функции<em>session_start ()</em>запускается сессия, затем подключается база данных:</p>
19
sendForm.onsubmit = function () { send_request('send'); return false; //Возвращаем ложь, чтобы остановить классическую отправку формы };<p>Теперь займёмся самим обработчиком. В первую очередь с помощью функции<em>session_start ()</em>запускается сессия, затем подключается база данных:</p>
20
session_start();//Подключение должно быть на первой строчке в коде, иначе появится ошибка $db = mysqli_connect("localhost","login","password"); mysqli_select_db($db,"chat"); //Заносим данные админа в сессию $_SESSION['login'] = 'admin'; $_SESSION['password'] = 'admin'; $_SESSION['id'] = 1;function auth($db,$login,$pass) { //Находим совпадение в базе данных $result = mysqli_query($db,"SELECT * FROM userlist WHERE login='$login' AND password='$pass'"); if($result) { if(mysqli_num_rows($result) == 1) {//Проверяем, одно ли совпадение $user = mysqli_fetch_array($result); //Получаем данные пользователя и заносим их в сессию $_SESSION['login'] = $login; $_SESSION['password'] = $pass; $_SESSION['id'] = $user['id']; return true; //Возвращаем true, потому что авторизация успешна } else { unset($_SESSION); //Удаляем все данные из сессии и возвращаем false, если совпадений нет или их больше 1 return false; } } else { return false; //Возвращаем ложь, если произошла ошибка } } function load($db) { $echo = ""; if(auth($db,$_SESSION['login'],$_SESSION['password'])) {//Проверяем успешность авторизации $result = mysqli_query($db,"SELECT * FROM messages"); //Запрашиваем сообщения из базы if($result) { if(mysqli_num_rows($result) >= 1) { while($array = mysqli_fetch_array($result)) {//Выводим их с помощью цикла $user_result = mysqli_query($db,"SELECT * FROM userlist WHERE id='$array[user_id]'");//Получаем данные об авторе сообщения if(mysqli_num_rows($user_result) == 1) { $user = mysqli_fetch_array($user_result); $echo .= "<div class='chat__message chat__message_$user[nick_color]'><b>$user[login]:</b> $array[message]</div>"; //Добавляем сообщения в переменную $echo } } } else { $echo = "Нет сообщений!";//В базе ноль записей } } } else { $echo = "Проблема авторизации";//Авторизация не удалась } return $echo;//Возвращаем результат работы функции } function send($db,$message) { if(auth($db,$_SESSION['login'],$_SESSION['password'])) {//Если авторизация удачна $message = htmlspecialchars($message);//Заменяем символы ‘<’ и ‘>’на ASCII-код $message = trim($message); //Удаляем лишние пробелы $message = addslashes($message); //Экранируем запрещенные символы $result = mysqli_query($db,"INSERT INTO messages (user_id,message) VALUES ('$_SESSION[id]','$message')");//Заносим сообщение в базу данных } return load($db); //Вызываем функцию загрузки сообщений }<p>В функции уже присутствует несложная валидация, но можно добавить и другие меры защиты от инъекций и спама:</p>
20
session_start();//Подключение должно быть на первой строчке в коде, иначе появится ошибка $db = mysqli_connect("localhost","login","password"); mysqli_select_db($db,"chat"); //Заносим данные админа в сессию $_SESSION['login'] = 'admin'; $_SESSION['password'] = 'admin'; $_SESSION['id'] = 1;function auth($db,$login,$pass) { //Находим совпадение в базе данных $result = mysqli_query($db,"SELECT * FROM userlist WHERE login='$login' AND password='$pass'"); if($result) { if(mysqli_num_rows($result) == 1) {//Проверяем, одно ли совпадение $user = mysqli_fetch_array($result); //Получаем данные пользователя и заносим их в сессию $_SESSION['login'] = $login; $_SESSION['password'] = $pass; $_SESSION['id'] = $user['id']; return true; //Возвращаем true, потому что авторизация успешна } else { unset($_SESSION); //Удаляем все данные из сессии и возвращаем false, если совпадений нет или их больше 1 return false; } } else { return false; //Возвращаем ложь, если произошла ошибка } } function load($db) { $echo = ""; if(auth($db,$_SESSION['login'],$_SESSION['password'])) {//Проверяем успешность авторизации $result = mysqli_query($db,"SELECT * FROM messages"); //Запрашиваем сообщения из базы if($result) { if(mysqli_num_rows($result) >= 1) { while($array = mysqli_fetch_array($result)) {//Выводим их с помощью цикла $user_result = mysqli_query($db,"SELECT * FROM userlist WHERE id='$array[user_id]'");//Получаем данные об авторе сообщения if(mysqli_num_rows($user_result) == 1) { $user = mysqli_fetch_array($user_result); $echo .= "<div class='chat__message chat__message_$user[nick_color]'><b>$user[login]:</b> $array[message]</div>"; //Добавляем сообщения в переменную $echo } } } else { $echo = "Нет сообщений!";//В базе ноль записей } } } else { $echo = "Проблема авторизации";//Авторизация не удалась } return $echo;//Возвращаем результат работы функции } function send($db,$message) { if(auth($db,$_SESSION['login'],$_SESSION['password'])) {//Если авторизация удачна $message = htmlspecialchars($message);//Заменяем символы ‘<’ и ‘>’на ASCII-код $message = trim($message); //Удаляем лишние пробелы $message = addslashes($message); //Экранируем запрещенные символы $result = mysqli_query($db,"INSERT INTO messages (user_id,message) VALUES ('$_SESSION[id]','$message')");//Заносим сообщение в базу данных } return load($db); //Вызываем функцию загрузки сообщений }<p>В функции уже присутствует несложная валидация, но можно добавить и другие меры защиты от инъекций и спама:</p>
21
<ul><li>проверку на дублирование прошлого сообщения;</li>
21
<ul><li>проверку на дублирование прошлого сообщения;</li>
22
<li>удаление внешних ссылок;</li>
22
<li>удаление внешних ссылок;</li>
23
<li>цензуру мата;</li>
23
<li>цензуру мата;</li>
24
<li>премодерацию сообщений у некоторых групп пользователей и так далее.</li>
24
<li>премодерацию сообщений у некоторых групп пользователей и так далее.</li>
25
</ul><p>Теперь, когда все функции готовы, пропишем их вызов.</p>
25
</ul><p>Теперь, когда все функции готовы, пропишем их вызов.</p>
26
//Получаем переменные из супермассива $_POST //Тут же их можно проверить на наличие инъекций if(isset($_POST['act'])) {$act = $_POST['act'];} if(isset($_POST['var1'])) {$var1 = $_POST['var1'];} if(isset($_POST['var2'])) {$var2 = $_POST['var2'];} switch($_POST['act']) {//В зависимости от значения act вызываем разные функции case 'load': $echo = load($db); //Загружаем сообщения break; case 'send': if(isset($var1)) { $echo = send($db,$var1); //Отправляем сообщение } break; case 'auth': if(isset($var1) && isset($var2)) {//Авторизуемся if(auth($db,$var1,$var2)) { $echo = load($db); } } break; } echo $echo;//Выводим результат работы кода<p>Со стороны фронтенда мы ещё не реализовали авторизацию, но уже можем проверить чат, потому что в самом начале данные администратора были занесены в сессию. Вот как это выглядит:</p>
26
//Получаем переменные из супермассива $_POST //Тут же их можно проверить на наличие инъекций if(isset($_POST['act'])) {$act = $_POST['act'];} if(isset($_POST['var1'])) {$var1 = $_POST['var1'];} if(isset($_POST['var2'])) {$var2 = $_POST['var2'];} switch($_POST['act']) {//В зависимости от значения act вызываем разные функции case 'load': $echo = load($db); //Загружаем сообщения break; case 'send': if(isset($var1)) { $echo = send($db,$var1); //Отправляем сообщение } break; case 'auth': if(isset($var1) && isset($var2)) {//Авторизуемся if(auth($db,$var1,$var2)) { $echo = load($db); } } break; } echo $echo;//Выводим результат работы кода<p>Со стороны фронтенда мы ещё не реализовали авторизацию, но уже можем проверить чат, потому что в самом начале данные администратора были занесены в сессию. Вот как это выглядит:</p>
27
<p>Теперь, когда чат работает, пора добавить авторизацию. Для этого можно создать отдельную форму во фронте, но можно обойтись и модальными окнами. В функции<em>send_request ()</em>дополним отправку запроса:</p>
27
<p>Теперь, когда чат работает, пора добавить авторизацию. Для этого можно создать отдельную форму во фронте, но можно обойтись и модальными окнами. В функции<em>send_request ()</em>дополним отправку запроса:</p>
28
$.post('includes/chat.php',{ act: act, var1: var1, var2: var2 }).done(function (data) { messages__container.innerHTML = data; if(data == 'Проблема авторизации') { clearInterval(interval); //Если проблема авторизации, отключаем автообновление if(login == null && password == null) { login = prompt('Введите логин: ');//Запрашиваем логин if(login != null) { password = prompt('Введите пароль: ');//Запрашиваем пароль send_request('auth',login,password); //Отправляем еще один запрос } } } if(act == 'auth') { interval = setInterval(update,500); //Заново запускаем автообновление } if(act == 'send') { messageInput.value = ''; } });<p>Вот как это выглядит:</p>
28
$.post('includes/chat.php',{ act: act, var1: var1, var2: var2 }).done(function (data) { messages__container.innerHTML = data; if(data == 'Проблема авторизации') { clearInterval(interval); //Если проблема авторизации, отключаем автообновление if(login == null && password == null) { login = prompt('Введите логин: ');//Запрашиваем логин if(login != null) { password = prompt('Введите пароль: ');//Запрашиваем пароль send_request('auth',login,password); //Отправляем еще один запрос } } } if(act == 'auth') { interval = setInterval(update,500); //Заново запускаем автообновление } if(act == 'send') { messageInput.value = ''; } });<p>Вот как это выглядит:</p>
29
<p>Минимальные возможности чата у нас есть, и продукт можно запускать в релиз, но добавим ещё несколько полезных штук.</p>
29
<p>Минимальные возможности чата у нас есть, и продукт можно запускать в релиз, но добавим ещё несколько полезных штук.</p>
30
<p>Создадим свой набор смайликов чата. Работать это будет так:</p>
30
<p>Создадим свой набор смайликов чата. Работать это будет так:</p>
31
<ul><li>пользователь открывает специальное окошко и кликает по смайлику;</li>
31
<ul><li>пользователь открывает специальное окошко и кликает по смайлику;</li>
32
<li>в поле ввода добавляется код смайлика (например, : sad: или: crazy:);</li>
32
<li>в поле ввода добавляется код смайлика (например, : sad: или: crazy:);</li>
33
<li>при выводе сообщения код смайлика заменяется на изображение.</li>
33
<li>при выводе сообщения код смайлика заменяется на изображение.</li>
34
</ul><p>Для начала добавим контейнер со смайликами и кнопку для его открытия:</p>
34
</ul><p>Для начала добавим контейнер со смайликами и кнопку для его открытия:</p>
35
<form method='post' id='chat-form'> <div class='emojis-container emojis-container_hidden' id='emojis'></div> <img src='/images/emojis/happy.png' class='emoji-img' id='emoji-button'> <input type='text' id='message-text' class='chat-form__input' placeholder='Введите сообщение'> <input type='submit' class='chat-form__submit' value='=>'> </form><p>Зададим стили:</p>
35
<form method='post' id='chat-form'> <div class='emojis-container emojis-container_hidden' id='emojis'></div> <img src='/images/emojis/happy.png' class='emoji-img' id='emoji-button'> <input type='text' id='message-text' class='chat-form__input' placeholder='Введите сообщение'> <input type='submit' class='chat-form__submit' value='=>'> </form><p>Зададим стили:</p>
36
.emojis-container { position:absolute; z-index:100; background:#555; border:1px solid #333; padding:2px; max-width:38%; top:20px; } .emojis-container_hidden { left:-9999999999999999px; } .emoji-img { vertical-align:middle; width:20px; margin:1px; cursor:pointer; }<p>Добавим скрипт для загрузки смайликов и открытия меню с ними:</p>
36
.emojis-container { position:absolute; z-index:100; background:#555; border:1px solid #333; padding:2px; max-width:38%; top:20px; } .emojis-container_hidden { left:-9999999999999999px; } .emoji-img { vertical-align:middle; width:20px; margin:1px; cursor:pointer; }<p>Добавим скрипт для загрузки смайликов и открытия меню с ними:</p>
37
//Создаем переменные var emojis__container = document.getElementById('emojis'); var emojis__button = document.getElementById('emoji-button'); var showed = false; function getEmojis() {//Получаем смайлики из PHP-файла $.post('/includes/chat.php',{act: 'load-emojis'}).done(function (data) { emojis__container.innerHTML = data; }); } function showEmojis() {//Добавляем отображение и скрытие окна if(showed) { emojis__container.setAttribute('class','emojis-container emojis-container_hidden'); showed = false; } else { emojis__container.setAttribute('class','emojis-container'); showed = true; } }<p>А теперь и функцию добавления смайлика в поле:</p>
37
//Создаем переменные var emojis__container = document.getElementById('emojis'); var emojis__button = document.getElementById('emoji-button'); var showed = false; function getEmojis() {//Получаем смайлики из PHP-файла $.post('/includes/chat.php',{act: 'load-emojis'}).done(function (data) { emojis__container.innerHTML = data; }); } function showEmojis() {//Добавляем отображение и скрытие окна if(showed) { emojis__container.setAttribute('class','emojis-container emojis-container_hidden'); showed = false; } else { emojis__container.setAttribute('class','emojis-container'); showed = true; } }<p>А теперь и функцию добавления смайлика в поле:</p>
38
function addEmoji(title) { messageInput.value += " " + title + " "; //Тут же можно добавить закрытие контейнера messageInput.focus(); }<p>После этого укажем, когда вызываются функции:</p>
38
function addEmoji(title) { messageInput.value += " " + title + " "; //Тут же можно добавить закрытие контейнера messageInput.focus(); }<p>После этого укажем, когда вызываются функции:</p>
39
$(document).ready(function (){ $(".emoji-add").on("click", function () {addEmoji($(this).attr('title'));});//Добавление }); emojis__button.addEventListener('click',showEmojis); getEmojis(); //Сразу же вызываем получение смайликов<p>Приступим к загрузке смайликов и их преобразованию на PHP:</p>
39
$(document).ready(function (){ $(".emoji-add").on("click", function () {addEmoji($(this).attr('title'));});//Добавление }); emojis__button.addEventListener('click',showEmojis); getEmojis(); //Сразу же вызываем получение смайликов<p>Приступим к загрузке смайликов и их преобразованию на PHP:</p>
40
function getEmojis() { $dir = '../images/emojis'; $echo = ""; $files = scandir($dir); for($i = 0; $i != count($files); $i++) { $ext = explode('.',$files[$i]); if($ext[1] == 'png') { $echo .= "<img src='/images/emojis/".$files[$i]."' title=':"</span>.$ext[<span class="hljs-number" style="color: #ff73fd;">0</span>].<span class="hljs-string" style="color: #a8ff60;">":' class='emoji-img emoji-add'> "; } } return $echo; }<p>Эта функция сканирует папку со смайликами, а потом проверяет расширение файлов. Она очень удобна, потому что отображает в формате PNG все смайлики, которые мы добавили.</p>
40
function getEmojis() { $dir = '../images/emojis'; $echo = ""; $files = scandir($dir); for($i = 0; $i != count($files); $i++) { $ext = explode('.',$files[$i]); if($ext[1] == 'png') { $echo .= "<img src='/images/emojis/".$files[$i]."' title=':"</span>.$ext[<span class="hljs-number" style="color: #ff73fd;">0</span>].<span class="hljs-string" style="color: #a8ff60;">":' class='emoji-img emoji-add'> "; } } return $echo; }<p>Эта функция сканирует папку со смайликами, а потом проверяет расширение файлов. Она очень удобна, потому что отображает в формате PNG все смайлики, которые мы добавили.</p>
41
<p>Чтобы вызвать её, добавим ещё один case в функцию<em>switch ()</em>в конце обработчика:</p>
41
<p>Чтобы вызвать её, добавим ещё один case в функцию<em>switch ()</em>в конце обработчика:</p>
42
case 'load-emojis': $echo = getEmojis(); break;<p>Теперь с помощью регулярных выражений можно заменять код смайлика на изображение:</p>
42
case 'load-emojis': $echo = getEmojis(); break;<p>Теперь с помощью регулярных выражений можно заменять код смайлика на изображение:</p>
43
function transformEmoji($message) { $pattern = '/(\:\S*\:)/i'; //Паттерн смайлика if(preg_match($pattern,$message,$matches)) {//Ищем все совпадения для смайлика одного типа - только :happy: или только :sad: $path = explode(":",$matches[0]); if(file_exists("../images/emojis/".$path[1].".png")) {//Проверяем, существует ли такое изображение $message = preg_replace("/".$matches[0]."/","<img src='/images/emojis/$path[1].png' class='emoji-img'>",$message);//Заменяем код на изображение } $message = transformEmoji($message); //Повторяем, пока в $message есть коды смайликов } return $message; }<p>Вызывается эта функция при загрузке сообщений:</p>
43
function transformEmoji($message) { $pattern = '/(\:\S*\:)/i'; //Паттерн смайлика if(preg_match($pattern,$message,$matches)) {//Ищем все совпадения для смайлика одного типа - только :happy: или только :sad: $path = explode(":",$matches[0]); if(file_exists("../images/emojis/".$path[1].".png")) {//Проверяем, существует ли такое изображение $message = preg_replace("/".$matches[0]."/","<img src='/images/emojis/$path[1].png' class='emoji-img'>",$message);//Заменяем код на изображение } $message = transformEmoji($message); //Повторяем, пока в $message есть коды смайликов } return $message; }<p>Вызывается эта функция при загрузке сообщений:</p>
44
$array['message'] = transformEmoji($array['message']);<p>Вот как это выглядит:</p>
44
$array['message'] = transformEmoji($array['message']);<p>Вот как это выглядит:</p>
45
<p>Чтобы добавить возможность отвечать кому-то конкретному, изменим функцию<em>addEmoji ()</em>. При нажатии на ник собеседника будет меняться текст в поле ввода.</p>
45
<p>Чтобы добавить возможность отвечать кому-то конкретному, изменим функцию<em>addEmoji ()</em>. При нажатии на ник собеседника будет меняться текст в поле ввода.</p>
46
<p>Для этого в<em>load ()</em>изменим формат сообщений, добавив<em>span</em>к нику:</p>
46
<p>Для этого в<em>load ()</em>изменим формат сообщений, добавив<em>span</em>к нику:</p>
47
$echo .= "<div class='chat__message chat__message_$user[nick_color]'><b><span class='answer-span'>$user[login]</span>:</b> $array[message]</div>";<p>Пишем саму функцию:</p>
47
$echo .= "<div class='chat__message chat__message_$user[nick_color]'><b><span class='answer-span'>$user[login]</span>:</b> $array[message]</div>";<p>Пишем саму функцию:</p>
48
function addAnswer(login) { messageInput.value = login + ", " + messageInput.value; messageInput.focus(); }<p>И вызываем функцию:</p>
48
function addAnswer(login) { messageInput.value = login + ", " + messageInput.value; messageInput.focus(); }<p>И вызываем функцию:</p>
49
$(document).ready(function (){ $(".add-answer").on("click", function () {addEmoji($(this).text());}); });<p>Одной статьи недостаточно, чтобы охватить все возможности PHP и JS для разработки чатов. С помощью этих языков легко добавить:</p>
49
$(document).ready(function (){ $(".add-answer").on("click", function () {addEmoji($(this).text());}); });<p>Одной статьи недостаточно, чтобы охватить все возможности PHP и JS для разработки чатов. С помощью этих языков легко добавить:</p>
50
<ul><li>ответ на конкретные сообщения;</li>
50
<ul><li>ответ на конкретные сообщения;</li>
51
<li>форматирование текста;</li>
51
<li>форматирование текста;</li>
52
<li>отправку аудио;</li>
52
<li>отправку аудио;</li>
53
<li>разные "комнаты";</li>
53
<li>разные "комнаты";</li>
54
<li>чат-бота и многое другое.</li>
54
<li>чат-бота и многое другое.</li>
55
</ul><a><b>Бесплатный курс по Python ➞</b>Мини-курс для новичков и для опытных кодеров. 4 крутых проекта в портфолио, живое общение со спикером. Кликните и узнайте, чему можно научиться на курсе. Смотреть программу</a>
55
</ul><a><b>Бесплатный курс по Python ➞</b>Мини-курс для новичков и для опытных кодеров. 4 крутых проекта в портфолио, живое общение со спикером. Кликните и узнайте, чему можно научиться на курсе. Смотреть программу</a>