Как создать чат для сайта – обзор и пошаговый план

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

Стандартные требования к чату для сайта

Эффективное функционирование чата предполагает обязательное выполнение нескольких условий. Ключевыми из них выступают такие:

1. Корректное отображение сообщений на любых видах устройств – от персонального компьютера до смартфона.
2. Быстрая и четкая загрузка переписки без необходимости каждый раз обновлять страницу.
3. Интеграция с социальными сетями и/или популярными мессенджерами.
4. Доступность для пользователей дополнительных опций, способных разнообразить общение и сделать его более интересным, например, смайлики, стикеры, изображения или возможность записать аудио.

Этап №1. Программирование каркаса чата с помощью HTML

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

<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%;

}

Курс «Fullstack-разработчик на Python» от Нетология

Курс «Frontend-разработчик» от Skillfactory

Курс «Фронтенд-разработчик» от Skillbox

Этап №2. Программирование основной части чата посредством JS и PHP

На втором и главном этапе создания чата формируется его функционал. Необходимые для этого действия разбиваются на несколько отдельных стадий – по количеству функций. Для отправки и загрузки сообщений целесообразно задействовать AJAX. Основной функционал интерфейса и обмен данными с сервером программируется на JavaScript. Взаимодействие с базами данных и методы обработки последних пишутся на языке PHP.

Переменные на JavaScript

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

var messages__container = document.getElementById('messages'); 

//Контейнер сообщений — скрипт будет добавлять в него сообщения

var interval = null; //Переменная с интервалом подгрузки сообщений

var sendForm = document.getElementById('chat-form'); //Форма отправки

var messageInput = document.getElementById('message-text'); //Инпут для текста сообщения

Запросы

Назначение функции запросов – получение переменной act, которая используется для хранения одного из трех возможных значений:

• авторизация (auth);
• загрузка (load);
• отправка (send).

Далее указанное программой значение направляется в PHP-файл. Исходный код функции занимает больше места и выглядит так.

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 = '';

}

});

}

Обновление

Как было отмечено выше, обновление чата должно происходить автоматически, то есть без участия пользователя. Решение задачи достигается за счет написания кода, состоящего из трех частей: задание интервала выполнения функции обновления, отлавливание отправки формы и создание обработчика информации. Итоговый результат выглядит так.

function update() {

send_request('load');

}

interval = setInterval(update,500);

sendForm.onsubmit = function () {

send_request('send');

return false; //Возвращаем ложь, чтобы остановить классическую отправку формы

};

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); //Вызываем функцию загрузки сообщений

}

Данный формат функции обладает минимальными возможностями отправки сообщений.

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

Вызов функций

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

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

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

• открытием специального кона и выбором из списка доступных нужного изображения;
• добавлением кода смайлика в поле ввода сообщения;
• заменой кода на изображение при выводе сообщения на экране получателя.

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

Быстрое создание чата – обзор готовых решений

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

1. Carrot quest. Обладает обширным функционалом, включающим: интеграцию с социальными сетями и мессенджерами, а также WordPress, детальную статистику, опцию сохранения переписки, версию для мобильных устройств и т.д.
   
   
   
2. LiveTex. Простой и удобный готовый онлайн-чат, который приспосабливается под нужды пользователя посредством множества настроек. Имеют мобильную версию, быстро и без проблем интегрируется с социальными сетями, обладает функцией приема платежей.
3. МультиЧат. Многофункциональный чат со стандартным набором возможностей – от обратного звонка доя автоматического сбора статистики. Бонусом становится специально разработанная форма заявки, которая используется для оформления заказа.
4. JivoSite. Лаконичный по оформлению и требуемым ресурсам онлайн-чат. Обладает обычным для подобных сервисов функционалом. В качестве дополнительной предоставляется опция для сбора лидов.

Что почитать и посмотреть по теме?

1. Учебник HTML для начинающих.
2. Руководство пользователя JavaScript.
3. Руководство пользователя по PHP.
4. М. В. Акулич «Чат-боты и маркетинг».
5. Срини Джанарсанам «Разработка чат-ботов и разговорных интерфейсов».
6. Видео ролик на YouTube «Создадим онлайн-чат на PHP и JavaScript».
7. Видео ролик на YouTube «Создание чата».
8. Видео ролик на YouTube «Простой чат на PHP. Часть 1».

FAQ

Для чего создаются онлайн-чаты?

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

Какие требования предъявляются к чату в современных условиях?

Качественно разработанный онлайн-чат должен соответствовать трем обязательным требованиям: корректная работа на любых устройствах, отображение новых сообщений без необходимости обновления страницы, достаточный для удобного и интересного общения функционал.

Как создать онлайн-чат самостоятельно?

Чтобы сделать это, необходимо сначала написать каркаса чата (обычно – с применением HTML), а затем добавить к нему функционал (в этом случае чаще всего используются PHP и JavaScript).

Можно ли воспользоваться готовыми решениями?

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

Подведем итоги

1. Онлайн-чат – удобный, доступный и бюджетный способ создать новый канал связи с посетителями сайта, благодаря чему повысить продажи, поднять уровень трафика или увеличить лояльность к интернет-ресурсу.
2. Современные требования к чату – корректная работа на разных устройствах, интеграция с социальными сетями и мессенджерами, появление новых сообщений без необходимости обновлять страницу, дополнительные опции в виде смайликов и т.д.
3. Простой чат вполне реально разработать самостоятельно – с использованием базовых знаний по программированию на HTML, PHP и JavaScript (возможные и другие варианты по языкам разработки).
4. Альтернативный способ решения задачи – приобретение готового онлайн-чата с последующей настройкой под запросы пользователя.