Одним из самых простых и доступных способов повысить интерес к чату считается создание чата. Он выступает удобным каналом общения с посетителями, причем при должном внимании к разработке и последующим коммуникациям позволяет заметно увеличить трафик интернет-ресурса. Особенно интересным такое решение становится для онлайн-торговли, так как при минимуме трудозатрат способно обеспечить резкий рост продаж и, как следствие, прибыли. Рассмотрим подробнее, что необходимо для быстрого и беспроблемного создания чата.
Эффективное функционирование чата предполагает обязательное выполнение нескольких условий. Ключевыми из них выступают такие:
Сначала требуется создать основные элементы будущего чата. Их два: форма отправки и так называемый контейнер, необходимый для отображения переписки, состоящей из отдельных сообщений. Исходный код программы пишется на 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%;
}
На втором и главном этапе создания чата формируется его функционал. Необходимые для этого действия разбиваются на несколько отдельных стадий – по количеству функций. Для отправки и загрузки сообщений целесообразно задействовать AJAX. Основной функционал интерфейса и обмен данными с сервером программируется на JavaScript. Взаимодействие с базами данных и методы обработки последних пишутся на языке PHP.
Создание переменных происходит по стандартной схеме. Исходный код выглядит следующим образом. Для большей наглядности приводятся поясняющие комментарии к каждому типу переменных.
var messages__container = document.getElementById('messages');
//Контейнер сообщений — скрипт будет добавлять в него сообщения
var interval = null; //Переменная с интервалом подгрузки сообщений
var sendForm = document.getElementById('chat-form'); //Форма отправки
var messageInput = document.getElementById('message-text'); //Инпут для текста сообщения
Назначение функции запросов – получение переменной act, которая используется для хранения одного из трех возможных значений:
Далее указанное программой значение направляется в 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); //Вызываем функцию загрузки сообщений
}
Данный формат функции обладает минимальными возможностями отправки сообщений.
При желании пользователя могут быть добавлены дополнительные опции. Например, автоматическое удаление мата или цензура на использование внешних ссылок. Но это ведет к усложнению программного кода.
На завершающем этапе разработки чата остается объединить созданные функции в единую программу. Сделать это несложно, главное – соблюдать последовательность действий, а после дописания кода провести тестирование приложения.
Выполнение перечисленных выше действий позволяет получить на выходе вполне работоспособный чат. При желании разработчика в него могут быть добавлены дополнительные функции. Например, возможность поставить смайлик, которая реализуется посредством выполнения трех действий:
Еще одной полезной функцией выступает опция ответа на конкретное сообщение определенного пользователя. Как и в случае смайлика, ее добавление требует написания дополнительного кода, хоть и не очень сложного.
Для получения работающего онлайн-чата совсем не обязательно заниматься программированием самостоятельно. Одним из возможных путей решения задачи выступает использование готового решения, предлагаемого специализированными компаниями. К числу наиболее популярных сервисов онлайн-чатов, доступных на отечественном рынке, можно отнести такие:
Основным назначением чатов выступает создание дополнительного канала быстрой и удобной связи с посетителями сайта. В том числе – с целью увеличения трафика, объемов продаж и других подобных показателей.
Качественно разработанный онлайн-чат должен соответствовать трем обязательным требованиям: корректная работа на любых устройствах, отображение новых сообщений без необходимости обновления страницы, достаточный для удобного и интересного общения функционал.
Чтобы сделать это, необходимо сначала написать каркаса чата (обычно – с применением HTML), а затем добавить к нему функционал (в этом случае чаще всего используются PHP и JavaScript).
На сегодняшнем российском рынке представлено немало коммерческих предложений от сервисов онлайн-чатов. Их суть – предоставление готового программного продукта, который настраивается под потребности конкретного клиента.