В этом уроке мы будем создавать простое приложение веб-чата с помощью PHP и jQuery. Утилита такого типа прекрасно подойдет для системы онлайн-поддержки вашего сайта.
ВведениеПриложение чата, которое мы сегодня построим, будет довольно простым. Оно будет включать в себя систему входа и выхода, возможности в AJAX-стиле, а также предложит поддержку нескольких пользователей.
Шаг 1: HTML разметкаМы начнем этот урок с создания нашего первого файла index.php.
Chat - Customer Module
Welcome,
Exit Chat
- Мы начнем наш html с обычных DOCTYPE, html, head, и body тагов. В таг head мы добавим наш заголовок и ссылку на нашу таблицу стилей css (style.css).
- Внутри тага body, мы структурируем наш макет внутри блока - обертки #wrapper div. У нас будет три главных блока: простое меню, окно чата и поле ввода нашего сообщения; каждый со своим соответствующим div и id.
- Блок меню #menu div будет состоять из двух абзацев. Первый будет приветствием пользователю и поплывет налево, а второй будет ссылкой на выход и поплывет направо. Мы также включим блок div для очистки элементов.
- Блок чата #chatbox div будет содержать лог нашего чата. Мы будем загружать наш лог из внешнего файла с использованием ajax-запроса jQuery.
- Последним пунктом в нашем блоке-обертке #wrapper div будет наша форма, которая будет включать в себя текстовое поле ввода для сообщения пользователя и кнопку отправки.
- Мы добавляем наши скрипты последними, чтобы грузить страницу быстрее. Сначала мы вставим ссылку Google jQuery CDN, так как в этом уроке мы будем использовать библиотеку jQuery. Наш второй таг скрипта будет там, где мы будем работать. Мы загрузим весь наш код после того, как документ будет готов.
Теперь мы добавим немного css, чтобы заставить наше приложение чата выглядеть лучше, чем стиль браузера по умолчанию. Код, указанный ниже будет добавлен в наш файл style.css.
/* CSS Document */ body { font:12px arial; color: #222; text-align:center; padding:35px; } form, p, span { margin:0; padding:0; } input { font:12px arial; } a { color:#0000FF; text-decoration:none; } a:hover { text-decoration:underline; } #wrapper, #loginform { margin:0 auto; padding-bottom:25px; background:#EBF4FB; width:504px; border:1px solid #ACD8F0; } #loginform { padding-top:18px; } #loginform p { margin: 5px; } #chatbox { text-align:left; margin:0 auto; margin-bottom:25px; padding:10px; background:#fff; height:270px; width:430px; border:1px solid #ACD8F0; overflow:auto; } #usermsg { width:395px; border:1px solid #ACD8F0; } #submit { width: 60px; } .error { color: #ff0000; } #menu { padding:12.5px 25px 12.5px 25px; } .welcome { float:left; } .logout { float:right; } .msgln { margin:0 0 2px 0; }
В вышеуказанном css нет ничего особенного, кроме того факта, что некоторые id или классы, для которых мы устанавливаем стиль, будут добавлены немного позже.
Как вы можете видеть выше, мы закончили строить пользовательский интерфейс чата.
Шаг 3: Используем PHP, чтобы создать форму входа.Теперь мы реализуем простую форму, которая будет спрашивать у пользователя его имя, перед тем, как пустить его дальше.
Функция loginForm(), которую мы создали, состоит из простой формы входа, которая спрашивает у пользователя его/ее имя. Затем мы используем конструкцию if else, чтобы проверить, ввел ли пользователь имя. Если человек ввел имя, мы устанавливаем его, как $_SESSION["имя"]. Так как мы используем сессию, основанную на cookie, чтобы хранить имя, мы должны вызвать session_start() перед тем, как что-нибудь выводить в браузер.
Есть одна вещь, на которую вы возможно захотите обратить особое внимание - то, что мы использовали функцию htmlspecialchars(), которая конвертирует специальные символы в HTML сущности, тем самым защищая имя переменной, чтобы оно не стало жертвой межсайтового скриптинга (XSS). Мы также добавим эту функцию позже к текстовой переменной, которая будет опубликована в логе чата.
Отображение формы входаДля того, чтобы показать форму логина в случае, если пользователь не вошел в систему, и следовательно, не сессия не создалась, мы используем другую инструкцию if else вокруг блока-обертки #wrapper div и тагов скрипта в нашем исходном коде. В противоположном случае, если пользователь вошел в систему и создал сессию, этот код спрячет форму входа и покажет окно чата.
Welcome,
Exit Chat
// jQuery Document $(document).ready(function(){ });
Мы еще не закончили создавать систему входа для этого приложения чата. Нам еще нужно дать пользователю возможность выйти из системы и закончить сессию чата. Как вы помните, наша исходная HTML разметка включала в себя простое меню. Давайте вернемся назад и добавим некоторый PHP код, который придаст меню больше функциональности.
Прежде всего, давайте добавим имя пользователя в сообщение приветствия. Мы сделаем это, выводя сессию имени пользователя.
Welcome,
Для того, чтобы позволить пользователю выйти из системы и завершить сессию, мы прыгнем выше головы и кратко используем jQuery.
// jQuery Document $(document).ready(function(){ //If user wants to end session $("#exit").click(function(){ var exit = confirm("Are you sure you want to end the session?"); if(exit==true){window.location = "index.php?logout=true";} }); });
Код jquery, приведенный выше просто показывает диалог подтверждения, если пользователь кликнет по ссылке выхода #exit. Если пользователь подтвердит выход, тем самым решив закончить сессию, мы отправим его в index.php?logout=true. Это просто создаст переменную с именем logout со значением true. Мы должны перехватить эту переменную с помощью PHP:
If(isset($_GET["logout"])){
//Simple exit message
$fp = fopen("log.html", "a");
fwrite($fp, "User ". $_SESSION["name"] ." has left the chat session.
");
fclose($fp);
session_destroy();
header("Location: index.php"); //Redirect the user
}
Теперь мы увидим, существует ли get переменная "logout", используя функцию isset(). Если переменная была передана через url, такой, как ссылка, упомянутая выше, мы переходим к завершению сессии пользователя с текущим именем.
Перед уничтожением сессии пользователя с текущим именем с помощью функции session_destroy() мы хотим выводить простое сообщение о выходе в лог чата. В нем будет сказано, что пользователь покинул сессию чата. Мы сделаем это, используя функции fopen(), fwrite() и fclose(), чтобы манипулировать нашим файлом log.html, который, как мы увидим позднее, будет создан в качестве лога нашего чата. Пожалуйста, обратите внимание, что мы добавили класс "msgln" в блок div. Мы уж определили стиль css для этого блока.
Проделав это, мы уничтожаем сессию и перенаправляем пользователя на ту же страницу, где появится форма входа в систему.
Шаг 4: Поддержка пользовательского ввода данныхПосле того, как пользователь подтвердил свои действия в нашей форме, нам нужно захватывать его ввод с клавиатуры и писать его в лог нашего чата. Для того, чтобы сделать это, мы должны использовать jQuery и PHP, чтобы работать синхронно на стороне сервера и на стороне клиента.
jQueryПрактически все, что мы собираемся делать с jQuery для обработки наших данных, будет вращаться вокруг запроса на jQuery post.
//If user submits the form $("#submitmsg").click(function(){ var clientmsg = $("#usermsg").val(); $.post("post.php", {text: clientmsg}); $("#usermsg").attr("value", ""); return false; });
Пожалуйста обратите внимание, что код, указанный выше, пойдет в наш таг скрипта, где мы поместили jQuery код выхода из системы.
PHP - post.phpНа данный момент мы имеем данные POST, отправляемые в файл post.php каждый раз, когда пользователь отправляет форму и посылает новое сообщение. Наша задача теперь захватить эти данные и записать их в лог нашего чата.
- Сообщение, которое мы будем записывать, будет заключено внутри блока.msgln div. Он будет содержать дату и время, сгенерированную функцией date(), сессию имени пользователя и текст, которые также будет окружен функцией htmlspecialchars(), чтобы избежать XSS.
И наконец, мы закрываем наш файл с помощью fclose().
Все, что пользователь разместил, обработано и опубликовано с помощью jQuery; оно записано в лог чата с помощью PHP. Единственное, что осталось сделать - это показать обновленный лог чата пользователю.
Чтобы сэкономить нам немного времени, мы предварительно загрузим лог чата в блок #chatbox div, как если бы он что-то содержал.
Мы используем процедуру, похожую на ту, что мы использовали в файле post.php, но на этот раз мы только читаем и выводим содержимое файла.
Запрос jQuery.ajaxЗапрос ajax - это ядро всего, что мы делаем. Этот запрос не только позволяет нам посылать и принимать данные через форму без обновления страницы, но также и позволяет нам обрабатывать запрошенные данные.
//Load the file containing the chat log function loadLog(){ $.ajax({ url: "log.html", cache: false, success: function(html){ $("#chatbox").html(html); //Insert chat log into the #chatbox div }, }); }
Мы завернем наш ajax запрос в функцию. Вы увидите, зачем, прямо сейчас. Как вы можете видеть выше, мы использовали только три из объектов запроса jQuery ajax.
- url : Строка URL для запроса. Мы используем имя файла лога нашего чата log.html.
- cache : Это предотвратит кэширование нашего файла. Это обеспечит нам то, что всегда, когда мы посылаем запрос, мы будем иметь обновленный лог чата.
- sucess : Это позволит нам прикрепить функцию, которая передаст запрошенные нами данные.
Как вы видите, затем мы перемещаем запрошенные нами данные (html) в блок #chatbox div.
АвтопрокруткаКак мы, возможно, видели в других приложениях чатов, содержимое автоматически прокручивается вниз, если контейнер лога чата (#chatbox) переполняется. Мы воплотим простую и похожую возможность, которая будет сравнивать высоту полосы прокрутки контейнера до и после того, как мы выполним ajax запрос. Если высота полосы прокрутки стала больше после запроса, мы используем эффект анимации jQuery, чтобы прокрутить блок #chatbox div.
//Load the file containing the chat log function loadLog(){ var oldscrollHeight = $("#chatbox").attr("scrollHeight") - 20; //Scroll height before the request $.ajax({ url: "log.html", cache: false, success: function(html){ $("#chatbox").html(html); //Insert chat log into the #chatbox div //Auto-scroll var newscrollHeight = $("#chatbox").attr("scrollHeight") - 20; //Scroll height after the request if(newscrollHeight > oldscrollHeight){ $("#chatbox").animate({ scrollTop: newscrollHeight }, "normal"); //Autoscroll to bottom of div } }, }); }
- Сначала мы сохраним высоту полосы прокрутки блока #chatbox div в переменную oldscrollHeight перед выполнением запроса.
- После того, как наш запрос вернет успех, мы сохраним высоту полосы прокрутки блока #chatbox div в переменную newscrollHeight.
- Затем мы сравним высоту полосы прокрутки в обеих переменных, используя конструкцию if. Если newscrollHeight больше, чем oldscrollHeight, мы используем эффект анимации, чтобы прокрутить блок #chatbox div.
Теперь может возникнуть вопрос, как часто мы будем обновлять новые данные, переданные между пользователями. Или перефразируя вопрос, с какой регулярностью мы будем отправлять постоянные запросы на обновление данных?
SetInterval (loadLog, 2500); //Reload file every 2500 ms or x ms if you wish to change the second parameter
Ответ на наш вопрос находится в функции setInterval. Эта функция будет запускать нашу функцию loadLog() каждые 2,5 секунды, которая будет запрашивать обновленный файл и делать автопрокрутку блока.
Мы закончили! Я надеюсь, что вы изучили, как работает базовая система чата, и, если у вас есть какие-либо пожелания, я с радостью их приветствую. Это максимально простая система чата, которую вы можете создать как приложение чата. Вы можете оттолкнуться от нее и построить множественные чат комнаты, добавить админку, эмотиконы и т.д. Здесь ваш предел - это небо.
Ниже привожу несколько ссылок, которые вы возможно захотите посмотреть, если задумаетесь о расширении этого приложения чата:
- Защитите ваши формы ключами форм - избегайте XSS (межсайтового скриптинга) и подделок межсайтовых запросов.
- Отправка формы без обновления страницы с использованием jQuery - расширьте наш ajax запрос
- Как делать AJAX запросы на чистом Javascript - изучите, как работает кухня запросов на чистом javascript.
- Следите за нами на
Уже давно привычной является , через которую любой посетитель может связаться с администратором сайта. Это обязательный элемент для любого проекта. Но обычная контактная форма не заменит живой онлайн чат на сайте.
В этой статье вы узнаете о том, как создать онлайн чат на сайте с помощью плагина. Это новый уровень обратной связи с посетителем, который значительно улучшает любой проект.
На каких проектах онлайн чат будет рентабельнымНе на всех видах сайта можно использовать онлайн чат со всей его полезностью. Где-то он будет эффективным, а где-то – лишним элементом.
- Онлайн чат на сайте будет максимально полезен на проектах-сервисах, то есть на таких, где посетители как-то взаимодействуют с ресурсом. Например, в интернет-магазинах, учебных курсах, форумах и прочих интерактивных проектах.
- Совершенно не рентабельно будет использовать онлайн чат на сайте, на котором посетители приходят просто ознакомиться с информацией, например, на информационных блогах. На таких проектах достаточно обычной формы контактов и комментариев.
Исходя из описанного, выберите, нужно ли вам это.
Достоинства и недостатки онлайн чата на сайтеОнлайн чат на сайте обладает следующими достоинствам и недостатками:
- Из достоинств следует выделить то, что посетитель может в любой момент получить быструю помощью по интересующему его вопросу.
- Из недостатков необходимо отметить то, что всегда-то кто-то должен быть в онлайне, и быть готовым быстро отреагировать, что иногда бывает затруднительно дорого.
Наконец добрались до главной задачи – как сделать онлайн чат. Для того следует использовать плагин Wise Chat. Он простой и лёгкий, но на английском языке, поэтому придётся разбираться.
После установки и активации плагина на вашем сайте необходимо перейти в пункт «Настройки» подпункт «Wise Chat Settings». Здесь собраны все настройки, которые есть у этого плагина. Они разделены на секции. Настроек очень много, поэтому мы не станем их рассматривать. Такое количество опций позволяет настроить чат тонко для любых необходимых задач.
Чтобы вывести чат на сайте, необходимо использовать одноимённый виджет. Он находится среди всех . Среди настроек виджета чата есть только заголовок и возможность исполнения любого шорткода при необходимости.
По сравнению со своими более ранними модификациями, современные чаты сильно изменились: в них появилась gif- , другие технические и дизайнерские «фишки». Но чат, даже со всеми упомянутыми техническими новшествами, по-прежнему очень просто для любого , хоть немного разбирающего в программировании.
Чтобы создать чат, необходимо знание азов HTML
Разработка чата сложности начинается с создания HTML-документа. Его каркас должен состоять из самого обычного объявления тегов так называемого DOCTYPE – html, head, body. В теге head необходимо указать название чата, а также каскадную страницу стилей – style.css. После этого в теге body прописывается объект #wrapper div. Этот объект очень важен, так как отвечает за создание сразу 3 блоков: простого меню, экрана чата и соответствующих div и id для каждого пользователя, вводящего свои сообщения.
Затем в необходимо добавить еще несколько стандартных, но очень важных элементов – #menu div, #chatbox div и #wrapper div. Элемент #menu div будет состоять из двух параграфов, причем первый из них отвечает за приветствие, – за ссылку Выход. Объект #chatbox div полностью состоит из записей чата. Их можно будет загружать из отдельного файла при помощи системы jQuery"s ajax. Элемент #wrapper div очень важен для чата, так как формирует его основную форму. Она, в свою очередь, состоит из поля для ввода и кнопки Отправить.
Если вы разобрались с этими элементами, работа по созданию чата уже наполовину готова. Чтобы сделать чат, вам осталось настроить систему скриптов и немного поработать над его формой.
Чтобы создать чат, необходимо вставить два важных скрипта
Для того чтобы страницы чата загружались намного , в них нужно добавить соответствующие скрипты. Так как для создания чата используется библиотека jQuery, обязательно импортируйте Google jQuery CDN. Он будет ответственен за загрузку всего кода чата после готовности документа.
Затем в файл style.css следует добавить немного css кода в произвольной форме – это сделает интерфейс чата более привлекательным. После этого необходимо приступить к созданию формы, в которую нужно вводить имя перед началом работы в чате. В HTML-коде она обозначается как loginForm(). Для ее фиксации необходимо использовать оператора if-else, а также переменную $_SESSION["name"].
Особое внимание стоит обратить и на использование функции htmlspecialchars(). Она конвертирует специальные символы в элементы HTML и защищает переменную имени от межсайтового скриптинга – так называемого Cross-site scripting, или XSS.
Для того чтобы создать чат, осталось лишь тщательно проверить весь его HTML-код и правильность оформления основных скриптов. Как только финальная ревизия будет завершена, простейший чат станет пригодным для использования.
Привет друзья!
Наконец-то я доделал свой чат онлайн. Если помните: я писал, что занят чатом онлайн, то есть создаю его и довожу все это дело до ума. У меня получилось, чат онлайн готов! Правда для этого мне пришлось выучить языки программирования JavaScript и jQuery. Не скажу, что я совсем теперь знаю данные . Так подучил. Но чат онлайн создал – пока достаточно. Теперь он есть и им можно пользоваться прямо сейчас!
Знаете, от куда мне пришла эта идея? Хотя бы примерно? Наверняка не догадались, потому что идея спонтанная. Дело в том, что, я читаю рассылку от отличного сервиса продвижения сайтов Rookee . В одном из писем, была ссылка на очень интересную статью, где описывалась примочка для поисковой системы Яндекс, то есть рассказали, как больше нравиться Яндекс, чтобы статьи стояли выше в поисковые выдачи.
Так вот, там было написано (конечно, не в точности) – «Поисковая система Яндекс очень любит, когда на сайте есть живое общение (онлайн)» и еще ниже ссылка на другой ресурс, где можно было (на то время) воспользоваться скриптом, который бы позволял переписываться с читателями.
Может быть, вы его и видели у меня на блоге раньше. Он простоял 30 дней. Позиции моих статей в выдаче действительно поднялись выше. Посещаемость, естественно тоже подросла, но у данного скрипта стояло ограничение 30 дней. Как, это не печально, но мне отрубили им пользование по окончании срока. Статьи на следующий же день снизились (не все). Посещаемость упала. И тут я решил, что доверять никому не следует свой авторитет и заботу о посетителях моего блога.
Решение было: НАПИСАТЬ СВОЙ СКРИПТ! Но вот проблема, как это сделать, не зная нужных для этого языков программирования? Действительно проблема! Долго я не раздумывал на эту тему. Пошел в поисковик Google, забил нужный мне запрос и скачал Видеокурс, где обучают JavaScript & jQuery. Сначала мне ничего не было понятно, что там происходит, но по чуть-чуть начинало доходить до меня. Как я уже писал выше: «Все выучить у меня не получилось, но необходимые знания получил».
ТЕПЕРЬ ДАВАЙТЕ РАССКАЖУ ВАМ, КАК РАБОТАЕТ ЧАТ ОНЛАЙНЧат онлайн – это прежде всего живое общения среди пользователей интернета. Не всех конечно, а только тех, кто захочет общаться данным способом. Хотя почему не захотеть?! Вы слышали о социальной сети Вконтакте, Facebook, может, слышали о Twitter? Думаю, не только слышали, а еще есть и аккаунты в этих сетях. У меня они тоже есть. Так вот онлайн чат, это практически то же самое…
В режиме онлайн времени, то есть сейчас, сию же минуту, секунду вы дорогой читатель находитесь онлайн. Так и там: вы заходите на онлайн чат (ссылка), регистрируетесь, вписав необходимые данные в специальную форму или заходите, как гость, вписав свое имя, логин и общаетесь на разные темы с другими собеседниками.
Похожая функция социальных сетей, только есть один минус – НЕТ КОНТАКТОВ СОБЕСЕДНИКА. Хотя для кого-то, это не минус, а даже плюс. Ведь не все хотят рассказать всему свету о своих данных. Тем более если такое желание все же есть, то в онлайн переписке могут по желанию ими обменяться.
В общем, это первый мой онлайн чат, но, наверное, дальше создам еще, что-то интересное, типа онлайн общение на главной странице блога. Подписывайтесь на обновления блога , чтобы ничего не пропускать.
ПЕРЕЙТИ В ОНЛАЙН ЧАТ И НАЧАТЬ ОБЩАТЬСЯ
Я не буду обо всех тонкостях работы чата онлайн рассказывать, так как функций много, а предназначение одно. Сами во всем разберетесь. На этом буду заканчивать. Высказывайте свое мнение, советуйте по улучшению, критикуйте в комментариях к этой статье, делайте замечания и т.д. До встречи!
