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

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

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

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

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

Этап №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. Срини Джанарсанам «Разработка чат-ботов и разговорных интерфейсов».

FAQ

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

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

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

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

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

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

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

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

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

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