Важным аспектом при разработке коммерческого веб-сайта является организация обратной связи с его аудиторией. И, конечно же, прямое общение с посетителями сайта гораздо предпочтительнее чем переписка по e-mail или заполнение контактных форм . Именно для этих целей и было разработано множество приложений для общения пользователей посредством текстовых, аудио или видео сообщений

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

Последнее обновление: 31.10.2015

В прошлый раз мы определили контроллер и модель, а теперь создадим всю остальную часть чата. Вначале определим представления.

Код главного представления Index.cshtml будет выглядеть следующим образом:

@model AjaxChat.Models.ChatModel @{ Layout = null; } Чат на Ajax и JQuery @Styles.Render("~/Content/Site.css") Введите имя: Войти @Ajax.ActionLink("Login", "Index", new { user = "" }, new AjaxOptions { UpdateTargetId = "container", OnFailure = "LoginOnFailure", OnSuccess = "LoginOnSuccess" }, new { @id = "LoginButton", @style = "visibility:hidden;" }) @Scripts.Render("~/bundles/jquery") @Scripts.Render("~/scripts/jquery.unobtrusive-ajax.min.js") @Scripts.Render("~/Scripts/chat.js")

Это представление без мастер-страницы. Элемент div с id="Username" будет отображать ник пользователя. Блок с id="LastRefresh предназначен для отображения времени последнего обновления чата, а div c id="Error" - для вывода ошибок, которые могут возникнуть.

И для собственно логина у нас есть текстовое поле и кнопка. Однако при вводе ника и нажатии на кнопку данные сразу не будут передаваться на сервер, так как это не форма. Реальная отправка данных на сервер будет происходить с помощью ajax-ссылки, которая будет иметь id = "LoginButton":

@Ajax.ActionLink("Login", "Index", new { user = "" }, new AjaxOptions { UpdateTargetId = "container", OnFailure = "LoginOnFailure", OnSuccess = "LoginOnSuccess" }, new { @id = "LoginButton", @style = "visibility:hidden;" })

При нажатии на ссылку будет происходить обновление блока с id="container" . За счет этого будет происходить частичное обновление текущей страницы с помощью ajax, а не обычная перезагрузка страницы. Но сами мы на ссылку нажимать не будем. Мы ее даже видеть не будем, так как у нее установлен стиль "visibility:hidden;"

Нажатие будет происходить автоматически в поключаемом в представлении файле chat.js :

$(document).ready(function () { // логин $("#btnLogin").click(function () { var nickName = $("#txtUserName").val(); if (nickName) { // формируем ссылку с параметрами, по которой идет обращение var href = "/Home?user=" + encodeURIComponent(nickName); href = href + "&logOn=true"; $("#LoginButton").attr("href", href).click(); //установка поля с ником пользователя $("#Username").text(nickName); } }); }); //при успешном входе загружаем сообщения function LoginOnSuccess(result) { Scroll(); ShowLastRefresh(); //каждые пять секунд обновляем чат setTimeout("Refresh();", 5000); //отправка сообщений по нажатию Enter $("#txtMessage").keydown(function (e) { if (e.keyCode == 13) { e.preventDefault(); $("#btnMessage").click(); } }); //установка обработчика нажатия кнопки для отправки сообщений $("#btnMessage").click(function () { var text = $("#txtMessage").val(); if (text) { //обращаемся к методу Index и передаем параметр "chatMessage" var href = "/Home?user=" + encodeURIComponent($("#Username").text()); href = href + "&chatMessage=" + encodeURIComponent(text); $("#ActionLink").attr("href", href).click(); } }); //обработчик кнопки выхода из чата $("#btnLogOff").click(function () { //обращаемся к методу Index и передаем параметр "logOff" var href = "/Home?user=" + encodeURIComponent($("#Username").text()); href = href + "&logOff=true"; $("#ActionLink").attr("href", href).click(); document.location.href = "Home"; }); } //при ошибке отображаем сообщение об ошибке при логине function LoginOnFailure(result) { $("#Username").val(""); $("#Error").text(result.responseText); setTimeout("$("#Error").empty();", 2000); } // каждые пять секунд обновляем поле чата function Refresh() { var href = "/Home?user=" + encodeURIComponent($("#Username").text()); $("#ActionLink").attr("href", href).click(); setTimeout("Refresh();", 5000); } //Отображаем сообщение об ошибке function ChatOnFailure(result) { $("#Error").text(result.responseText); setTimeout("$("#Error").empty();", 2000); } // при успешном получении ответа с сервера function ChatOnSuccess(result) { Scroll(); ShowLastRefresh(); } //скролл к низу окна function Scroll() { var win = $("#Messages"); var height = win.scrollHeight; win.scrollTop(height); } //отображение времени последнего обновления чата function ShowLastRefresh() { var dt = new Date(); var time = dt.getHours() + ":" + dt.getMinutes() + ":" + dt.getSeconds(); $("#LastRefresh").text("Последнее обновление было в " + time); }

Чтобы отправить данные по логину и нажать на ссылку, в обработчике нажатия мы прописываем следующие строки:

// формируем ссылку с параметрами, по которой идет обращение var href = "/Home?user=" + encodeURIComponent(nickName); href = href + "&logOn=true"; // автоклик по ajax-ссылке $("#LoginButton").attr("href", href).click();

Поскольку в запросе к серверу передается параметр logOn=true, то метод Index при обработке этого запроса будет отправлять клиенту частичное представление ChatRoom : return PartialView("ChatRoom", chatModel); . Создадим это представление:

@{ Html.RenderPartial("History", Model); } @Ajax.ActionLink("ActionLink", "Index", new { user = "", logOn = "", logOff = "", chatMessage = "" }, new AjaxOptions { UpdateTargetId = "RefreshArea", OnSuccess = "ChatOnSuccess", OnFailure = "ChatOnFailure" }, new { @id = "ActionLink", @style = "visibility:hidden;" })

Это частичное представление, типизированное моделью ChatModel, которая передается из метода Index. Оно содержит поля для ввода и отправки сообщений, а также кнопку выхода из чата.

Кроме того, здесь есть блок div id="RefreshArea" , предназначенный непосредственно для вывода сообщений и пользователей. Для рендеринга этой информации в нем идет обращение к частичному представлению History , которое мы сейчас создадим. И также тут есть невидимая ajax-ссылка, обновляющая блок div id="RefreshArea" :

@Ajax.ActionLink("ActionLink", "Index", new { user = "", logOn = "", logOff = "", chatMessage = "" }, new AjaxOptions { UpdateTargetId = "RefreshArea", OnSuccess = "ChatOnSuccess", OnFailure = "ChatOnFailure" }, new { @id = "ActionLink", @style = "visibility:hidden;" })

В вышерассмотренном файле javacript при удачном логине вызывается функция LoginOnSuccess , которая в свою очередь вызывает функцию Refresh() :

Function Refresh() { var href = "/Home?user=" + encodeURIComponent($("#Username").text()); $("#ActionLink").attr("href", href).click(); setTimeout("Refresh();", 5000); }

Эта функция опять же формирует строку запроса с параметрами для ajax-ссылки и производит автоклик на нее. В результате блок div id="RefreshArea" будет обновляться новыми данными каждые пять секунд.

Подобное действие будет происходить также и при нажатии на кнопку отправки сообщения в чат:

Var href = "/Home?user=" + encodeURIComponent($("#Username").text()); href = href + "&chatMessage=" + encodeURIComponent(text); $("#ActionLink").attr("href", href).click();

И поскольку в обоих случаях при передаче параметров в метод Index контроллера параметры logOn и logOff будут не установлены, то метод Index в ответ будет возвращать частичное представление History.cshtml : return PartialView("History", chatModel);

Теперь создадим само частичное представление History.cshtml :

@using AjaxChat.Models @model ChatModel

В чате онлайн: @Model.Users.Count

@msg.Date
@if (msg.User != null) { @(msg.User.Name + ":") @msg.Text } else { @msg.Text }

В заключении можно еще как-нибудь стилизовать приложение. В итоге должно получиться примерно так. При запуске мы увидим поле логина:

Живое общение на сайте не оставит равнодушным посетителя, ведь всегда можно написать в чат, и тебе что-то да и ответят, на сайтах все реже можно встретить данную функцию, разработчики стали забывать о ней, ссылаясь более на форумы и комментарии. Но если есть возможность поставить чат на сайте, то не нужно терять такую возможность, пользователи будут только благодарны. В данном уроке мы рассмотрим как создать весьма интересный чат для сайта, с использованием сервисов аватаров, что придаст общению более приятной формы. Для того чтобы создать такой AJAX чат мы будем использовать PHP, MySQL и jQuery. Для начала мы рассмотрим разметку HTML, документ которого строится в соответствии с HTML5, что позволяет использовать новый, более короткий синтаксис DOCTYPE, и опускать атрибут type в тегах script.
index.html

Как создать чат для сайта с помощью PHP | Демонстрация для сайта RUDEBOX

Для организации прокручиваемой области со строками чата мы используем плагин jScrollPane. Данный плагин имеет свои собственные стили, который включаются в секции head.
Разметка чата состоит из четырех основных элементов div – верхней панели, контейнера чата, контейнера пользователей и нижней панели. Последний div содержит формы для регистрации пользователя и отправки сообщения. Форма отправки сообщения по умолчанию скрыта и выводится, только если пользователь успешно вошел в систему чата.
Примечание! Определения таблиц имеются в файле tables.sql в исходниках. Вы можете использовать текст запросов для создания таблиц. Также, при установке чата на свой хост, нужно поменять установки в ajax.php на ваши данные для соединения с базой MySQL.
Когда Вы создали таблицу и сделали все, что сказано в примечании то давайте обсудим скрипт PHP, который управляет чатом. Первый файл, который мы рассмотрим, ajax.php. Он обрабатывает запросы AJAX от клиентской части из jQuery и выводит данные в формате JSON.
ajax.php

/* Конфигурация базы данных. Добавьте свои данные */ $dbOptions = array("db_host" => "", "db_user" => "", "db_pass" => "", "db_name" => ""); /* Конец секции конфигурации базы данных */ error_reporting(E_ALL ^ E_NOTICE); require "classes/DB.class.php"; require "classes/Chat.class.php"; require "classes/ChatBase.class.php"; require "classes/ChatLine.class.php"; require "classes/ChatUser.class.php"; session_name("webchat"); session_start(); if(get_magic_quotes_gpc()){ // Удаляем лишние слэши array_walk_recursive($_GET,create_function("&$v,$k","$v = stripslashes($v);")); array_walk_recursive($_POST,create_function("&$v,$k","$v = stripslashes($v);")); } try{ // Соединение с базой данных DB::init($dbOptions); $response = array(); // Обработка поддерживаемых действий: switch($_GET["action"]){ case "login": $response = Chat::login($_POST["name"],$_POST["email"]); break; case "checkLogged": $response = Chat::checkLogged(); break; case "logout": $response = Chat::logout(); break; case "submitChat": $response = Chat::submitChat($_POST["chatText"]); break; case "getUsers": $response = Chat::getUsers(); break; case "getChats": $response = Chat::getChats($_GET["lastID"]); break; default: throw new Exception("Wrong action"); } echo json_encode($response); } catch(Exception $e){ die(json_encode(array("error" => $e->getMessage()))); }

Для удобства используется оператор switch для определения действий, которые обрабатывает скрипт. Здесь реализованы подсистемы чата, функциональность входа/выхода и действия по запросу списка реплик и пользователей в режиме онлайн.
Вывод осуществляется в форме сообщений JSON (которые удобно обрабатывать с помощью jQuery), ошибки генерируют исключения. Оператор switch распределяет все запросы соответствующим статическим методам класса Chat, который будет обсуждаться позже в данном разделе.
DB.class.php

DB { private static $instance; private $MySQLi; private function __construct(array $dbOptions){ $this->MySQLi = @ new mysqli($dbOptions["db_host"], $dbOptions["db_user"], $dbOptions["db_pass"], $dbOptions["db_name"]); if (mysqli_connect_errno()) { throw new Exception("Ошибка базы данных."); } $this->MySQLi->set_charset("utf8"); } public static function init(array $dbOptions){ if(self::$instance instanceof self){ return false; } self::$instance = new self($dbOptions); } public static function getMySQLiObject(){ return self::$instance->MySQLi; } public static function query($q){ return self::$instance->MySQLi->query($q); } public static function esc($str){ return self::$instance->MySQLi->real_escape_string(htmlspecialchars($str)); } }

Класс DB - менеджер базы данных. Конструктор объявлен как private, таким образом, объект не может быть создан вне пределов класса, и инициализация возможна только из статического метода init(). Он берет массив с параметрами соединения с MySQL и создает экземпляр класса, который содержится в статической переменной self::$instance. Таким образом, обеспечивается существование единственного соединения с базой данных в конкретный момент времени.
Остальная часть класса реализует коммуникацию с базой данных, в основе которой лежит статический метод query().
ChatBase.class.php

/* Базовый класс, который используется классами ChatLine и ChatUser */ class ChatBase{ // Данный конструктор используется всеми класса чата: public function __construct(array $options){ foreach($options as $k=>$v){ if(isset($this->$k)){ $this->$k = $v; } } } }

Это простой базовый класс. Его основное назначение - определить конструктор, который получает массив параметров, но сохраняет только те, которые определены в классе.
ChatLine.class.php

/* Строка чата */ class ChatLine extends ChatBase{ protected $text = "", $author = "", $gravatar = ""; public function save(){ DB::query(" INSERT INTO webchat_lines (author, gravatar, text) VALUES ("".DB::esc($this->author)."", "".DB::esc($this->gravatar)."", "".DB::esc($this->text)."")"); // Возвращаем объект MySQLi класса DB return DB::getMySQLiObject(); } }

Класс ChatLine является производным классом от ChatBase. Объект данного класса может быть легко создан с помощью передачи конструктору массива с текстом, именем автора и элементом gravatar. Свойство класса gravatar содержит хэш md5 email адреса. Оно нужно для получения пользовательского аватара, соответствующего email адресу, с сайта gravatar.com.
Данный класс также определяет метод save, который сохраняет объект в базе данных. Так как метод возвращает объект MySQLi, содержащийся в классе DB, вы можете проверить успешность завершения операции с помощью свойства affected_rows.
ChatUser.class.php

Class ChatUser extends ChatBase{ protected $name = "", $gravatar = ""; public function save(){ DB::query(" INSERT INTO webchat_users (name, gravatar) VALUES ("".DB::esc($this->name)."", "".DB::esc($this->gravatar)."")"); return DB::getMySQLiObject(); } public function update(){ DB::query(" INSERT INTO webchat_users (name, gravatar) VALUES ("".DB::esc($this->name)."", "".DB::esc($this->gravatar)."") ON DUPLICATE KEY UPDATE last_activity = NOW()"); } }

Класс имеет свойства name и gravatar (обратите внимание на модификатор доступа protected – свойства доступны в классе ChatBase, и мы можем устанавливать их значения в конструкторе).
В классе определен метод update(), который обновляет поле last_activity значением текущего времени. Таким образом показывается, что пользователь держит окно с чатом отрытым и его надо учитывать как автора в режиме онлайн.
Chat.class.php

/* Класс Chat содержит публичные статические методы, которые используются в ajax.php */ class Chat{ public static function login($name,$email){ if(!$name || !$email){ throw new Exception("Заполните все необходимые поля."); } if(!filter_input(INPUT_POST,"email",FILTER_VALIDATE_EMAIL)){ throw new Exception("Неправильный адрес email."); } // Подготовка кэша gravatar: $gravatar = md5(strtolower(trim($email))); $user = new ChatUser(array("name" => $name, "gravatar" => $gravatar)); // Метод save возвращает объект MySQLi if($user->save()->affected_rows != 1){ throw new Exception("Данное имя используется."); } $_SESSION["user"] = array("name" => $name, "gravatar" => $gravatar); return array("status" => 1, "name" => $name, "gravatar" => Chat::gravatarFromHash($gravatar)); } public static function checkLogged(){ $response = array("logged" => false); if($_SESSION["user"]["name"]){ $response["logged"] = true; $response["loggedAs"] = array("name" => $_SESSION["user"]["name"], "gravatar" => Chat::gravatarFromHash($_SESSION["user"]["gravatar"])); } return $response; } public static function logout(){ DB::query("DELETE FROM webchat_users WHERE name = "".DB::esc($_SESSION["user"]["name"])."""); $_SESSION = array(); unset($_SESSION); return array("status" => 1); }

Этот код выполняет всю работу. В операторе switch в файле ajax.php выбирались действия, которые соответствовали методам данного класса. Каждый из этих методов возвращает массив, который затем конвертируется в объект JSON с помощью функции json_encode() (это происходит внизу в файле ajax.php).
Когда пользователь входит в систему, его имя и gravatar сохраняются как элементы массива$_SESSION и становятся доступны в последующих запросах.
Chat.class.php

Public static function submitChat($chatText){ if(!$_SESSION["user"]){ throw new Exception("Вы вышли из чата"); } if(!$chatText){ throw new Exception("Вы не ввели сообщение."); } $chat = new ChatLine(array("author" => $_SESSION["user"]["name"], "gravatar" => $_SESSION["user"]["gravatar"], "text" => $chatText)); // Метод save возвращает объект MySQLi $insertID = $chat->save()->insert_id; return array("status" => 1, "insertID" => $insertID); } public static function getUsers(){ if($_SESSION["user"]["name"]){ $user = new ChatUser(array("name" => $_SESSION["user"]["name"])); $user->update(); } // Удаляем записи чата старше 5 минут и пользователей, неактивных в течении 30 секунд DB::query("DELETE FROM webchat_lines WHERE ts < SUBTIME(NOW(),"0:5:0")"); DB::query("DELETE FROM webchat_users WHERE last_activity < SUBTIME(NOW(),"0:0:30")"); $result = DB::query("SELECT * FROM webchat_users ORDER BY name ASC LIMIT 18"); $users = array(); while($user = $result->fetch_object()){ $user->gravatar = Chat::gravatarFromHash($user->gravatar,30); $users = $user; } return array("users" => $users, "total" => DB::query("SELECT COUNT(*) as cnt FROM webchat_users")->fetch_object()->cnt); } public static function getChats($lastID){ $lastID = (int)$lastID; $result = DB::query("SELECT * FROM webchat_lines WHERE id > ".$lastID." ORDER BY id ASC"); $chats = array(); while($chat = $result->fetch_object()){ // Возвращаем время создания сообщения в формате GMT (UTC): $chat->time = array("hours" => gmdate("H",strtotime($chat->ts)), "minutes" => gmdate("i",strtotime($chat->ts))); $chat->gravatar = Chat::gravatarFromHash($chat->gravatar); $chats = $chat; } return array("chats" => $chats); } public static function gravatarFromHash($hash, $size=23){ return "http://www.gravatar.com/avatar/".$hash."?size=".$size."&default=". urlencode("http://www.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?size=".$size); } }

В методе getChats() используется функция gmdate вывода времени в формате GMT. В клиентской части мы используем значения часов и минут для установки в объекте JavaScript, а в результате время отображается в соответствии с часовым поясом пользователя.
Стили чата содержатся в файле chat.css. Стили не зависят от остальной страницы и их легко встроить в уже существующий сайт. Нужно только включить разметку HTML, стили и файлы JavaScript.
chat.css

/* Основной контейнер чата */ #chatContainer{ width:510px; margin:100px auto; position:relative; } /* Верхняя панель */ #chatTopBar{ height:40px; background:url("../img/solid_gray.jpg") repeat-x #d0d0d0; border:1px solid #fff; margin-bottom:15px; position:relative; color:#777; text-shadow:1px 1px 0 #FFFFFF; } #chatTopBar .name{ position:absolute; top:10px; left:40px; } #chatTopBar img{ left:9px; position:absolute; top:8px; } /* Чат */ #chatLineHolder{ height:360px; width:350px; margin-bottom:20px; } .chat{ background:url("../img/chat_line_bg.jpg") repeat-x #d5d5d5; min-height:24px; padding:6px; border:1px solid #FFFFFF; padding:8px 6px 4px 37px; position:relative; margin:0 10px 10px 0; } .chat:last-child{ margin-bottom:0; } .chat span{ color:#777777; text-shadow:1px 1px 0 #FFFFFF; font-size:12px; } .chat .text{ color:#444444; display:inline-block; font-size:15px; overflow:hidden; vertical-align:top; width:190px; } .chat .gravatar{ background:url("http://www.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?size=23") no-repeat; left:7px; position:absolute; top:7px; } .chat img{ display:block; visibility:hidden; } .chat .time{ position:absolute; right:10px; top:12px; font-size:11px; } .chat .author{ margin-right:6px; font-size:11px; }

Начинается все с задания стилей для div #chatContainer. Он центрируется горизонтально с помощью свойства margin:100px auto; . Данный div разделяется на верхнюю панель, область чата, область пользователей и нижнюю панель.
Верхняя панель выводит информацию о зарегистрированном пользователе. Она получает относительное позиционирование, так что аватар, имя и кнопка "выйти" располагаются соответственно.
Затем следует div, который содержит все строки чата – #chatLineHolder. Данный div имеет фиксированную высоту и ширину, а в части данного урока, которая посвящена jQuery, мы используем плагин jScrollPane для превращения его в область с прокруткой контента с боковым слайдером.
chat.css

/* Область пользователя */ #chatUsers{ background-color:#202020; border:1px solid #111111; height:360px; position:absolute; right:0; top:56px; width:150px; } #chatUsers .user{ background:url("http://www.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?size=30") no-repeat 1px 1px #444444; border:1px solid #111111; float:left; height:32px; margin:10px 0 0 10px; width:32px; } #chatUsers .user img{ border:1px solid #444444; display:block; visibility:hidden; } /* Нижняя панель */ #chatBottomBar{ background:url("../img/solid_gray.jpg") repeat-x #d0d0d0; position:relative; padding:10px; border:1px solid #fff; } #chatBottomBar .tip{ position:absolute; width:0; height:0; border:10px solid transparent; border-bottom-color:#eeeeee; top:-20px; left:20px; } #chatContainer input{ background:url("../img/input_bg.jpg") repeat-x #dcdcdc; height:26px; font:13px/26px Calibri,Arial,sans-serif; color:#777; border:1px solid; border-color:#c1c1c1 #eee #eee #c1c1c1; text-shadow:1px 1px 0 #E4E4E4; padding:0 5px; margin-right:5px; width:185px; outline:none; } #submitForm{ display:none; }

Во второй части файла стилей мы оформляем контейнер #chatUsers и элементы div для пользователя. Каждый активный пользователь чата представлен изображением gravatar размером 32 на 32 пикселя. Изображение по умолчанию используется в качестве фона, и когда реальное изображение загружается с сервера gravatar.com, оно выводится сверху. Так предотвращается раздражающее мерцание, которое обычно появляется в момент загрузки изображения.
Остальная часть кода связана с нижней панелью и формой отправки. Элемент div .tipстановится треугольником, сделанным с использованием CSS, за счет установки нулевой высоты и ширины, при этом ширина обводки устанавливается большой.
chat.css

/* Изменение стилей по умолчанию для jScrollPane */ .jspVerticalBar{ background:none; width:20px; } .jspTrack{ background-color:#202020; border:1px solid #111111; width:3px; right:-10px; } .jspDrag { background:url("../img/slider.png") no-repeat; width:20px; left:-9px; height:20px !important; margin-top:-5px; } .jspDrag:hover{ background-position:left bottom; } /* Дополнительные стили */ a.logoutButton{ background-color:#bbb; border:1px solid #eee !important; color:#FFFFFF !important; font-size:12px; padding:5px 9px; position:absolute; right:10px; text-shadow:1px 1px 0 #888; top:7px; -moz-box-shadow:0 0 7px #888 inset; -webkit-box-shadow:0 0 7px #888 inset; box-shadow:0 0 7px #888 inset; } a.logoutButton:hover{ text-shadow:1px 1px 0 #888; -moz-box-shadow:0 0 7px #666 inset; -webkit-box-shadow:0 0 7px #666 inset; box-shadow:0 0 7px #666 inset; } #chatContainer .blueButton{ background:url("../img/button_blue.png") no-repeat; border:none !important; color:#516D7F !important; display:inline-block; font-size:13px; height:29px; text-align:center; text-shadow:1px 1px 0 rgba(255, 255, 255, 0.4); width:75px; margin:0; cursor:pointer; } #chatContainer .blueButton:hover{ background-position:left bottom; } p.noChats, #chatUsers .count{ clear:both; font-size:12px; padding:10px; text-align:center; text-shadow:1px 1px 0 #111111; } #chatUsers .count{ font-size:11px; } .rounded{ -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; } #chatErrorMessage{ width:100%; top:0; left:0; position:fixed; background-color:#ab0909; border-bottom:1px solid #d32a2a; font-size:23px; padding:16px; text-align:center; color:#fff; text-shadow:1px 1px 0 #940f0f; }

Перейдем к последней части нашего урока - коду jQuery. Чат работает, получая события от форм регистрации и отправки сообщения, а также от кнопки "Выйти", а также по расписанию отправляются запросы AJAX к серверу для проверки наличия новых сообщений и пользователей.
PHP часть обрабатывает запросы AJAX в файле ajax.php. jQuery генерирует следующие запросы AJAX:

• Вход пользователя в систему: один запрос POST;
• Выход пользователя из системы: один запрос POST;
• Проверка пользователей, которые находятся в режиме онлайн: выполняется каждые 15 секунд;
• Проверка новых записей: запрос GET генерируется каждую секунду. Такое функционирование может привести к очень высокой нагрузке на веб сервер, поэтому скрипт оптимизирован, и в зависимости от активности чата, период генерации запроса может быть увеличен до 15 секунд.

$(document).ready(function(){ // Запускаем метод init, когда документ будет готов: chat.init(); }); var chat = { // data содержит переменные для использования в классах: data: { lastID: 0, noActivity: 0 }, // Init привязывает обработчики событий и устанавливает таймеры: init: function(){ // Используем плагин jQuery defaultText, включенный внизу: $("#name").defaultText("Псевдоним"); $("#email").defaultText("Email (используется Gravatar)"); // Конвертируем div #chatLineHolder в jScrollPane, // сохраняем API плагина в chat.data: chat.data.jspAPI = $("#chatLineHolder").jScrollPane({ verticalDragMinHeight: 12, verticalDragMaxHeight: 12 }).data("jsp"); // Используем переменную working для предотвращения // множественных отправок формы: var working = false; // Регистрируем персону в чате: $("#loginForm").submit(function(){ if(working) return false; working = true; // Используем нашу функцию tzPOST // (определяется внизу): $.tzPOST("login",$(this).serialize(),function(r){ working = false; if(r.error){ chat.displayError(r.error); } else chat.login(r.name,r.gravatar); }); return false; });

Метод init() предназначен для привязки обработчиков событий к чату и запуску функций таймера, которые используются для проверки по расписанию наличия новых записей в чате и списка пользователей в режиме онлайн. Мы используем собственные функции-обертки –$.tzGET и $.tzPOST. Они принимают на себя всю тяжесть работы по заданию длинного списка параметров для запросов AJAX.
script.js

// Отправляем данные новой строки чата: $("#submitForm").submit(function(){ var text = $("#chatText").val(); if(text.length == 0){ return false; } if(working) return false; working = true; // Генерируем временный ID для чата: var tempID = "t"+Math.round(Math.random()*1000000), params = { id: tempID, author: chat.data.name, gravatar: chat.data.gravatar, text: text.replace(//g,">") }; // Используем метод addChatLine, чтобы добавить чат на экран // немедленно, не ожидая завершения запроса AJAX: chat.addChatLine($.extend({},params)); // Используем метод tzPOST, чтобы отправить чат // через запрос POST AJAX: $.tzPOST("submitChat",$(this).serialize(),function(r){ working = false; $("#chatText").val(""); $("div.chat-"+tempID).remove(); params["id"] = r.insertID; chat.addChatLine($.extend({},params)); }); return false; }); // Отключаем пользователя: $("a.logoutButton").live("click",function(){ $("#chatTopBar > span").fadeOut(function(){ $(this).remove(); }); $("#submitForm").fadeOut(function(){ $("#loginForm").fadeIn(); }); $.tzPOST("logout"); return false; }); // Проверяем состояние подключения пользователя (обновление браузера) $.tzGET("checkLogged",function(r){ if(r.logged){ chat.login(r.loggedAs.name,r.loggedAs.gravatar); } }); // Самовыполняющиеся функции таймаута (function getChatsTimeoutFunction(){ chat.getChats(getChatsTimeoutFunction); })(); (function getUsersTimeoutFunction(){ chat.getUsers(getUsersTimeoutFunction); })(); },

Во второй части скрипта мы продолжаем привязку обработчиков событий. В функции отправки формы можно заметить, что когда пользователь создает новую запись в чате, создается временная строка, которая выводится немедленно в окно чата, без ожидания завершения запроса AJAX. Как только запись будет завершена, временная строка удаляется с экрана. Так пользователь получает ощущения, что чат работает молниеносно, в то время как реальная запись происходит в фоновом режиме.
В конце данного куска кода запускаются две именованные самовыполняющиеся функции. Данные функции будут передаваться как параметры методам chat.getChats() илиchat.getUsers() соответственно, таким образом, могут быть установлены дополнительные таймауты.
script.js

// Метод login скрывает данные регистрации пользователя // и выводит форму ввода сообщения login: function(name,gravatar){ chat.data.name = name; chat.data.gravatar = gravatar; $("#chatTopBar").html(chat.render("loginTopBar",chat.data)); $("#loginForm").fadeOut(function(){ $("#submitForm").fadeIn(); $("#chatText").focus(); }); }, // Метод render генерирует разметку HTML, // которая нужна для других методов: render: function(template,params){ var arr = ; switch(template){ case "loginTopBar": arr = [ "", "",params.name, "Выйти"]; break; case "chatLine": arr = [ "","",params.author, ":",params.text,"",params.time,""]; break; case "user": arr = [ "" ]; break; } // Единственный метод join для массива выполняется // быстрее, чем множественные слияния строк return arr.join(""); },

В данной части кода внимания требует метод render(). Он собирает шаблон в зависимости от параметра template. Метод затем создает и возвращает запрашиваемый код HTML, встраивая в него значения второго параметра объекта params.
script.js

// Метод addChatLine добавляет строку чата на страницу addChatLine: function(params){ // Все показания времени выводятся в формате временного пояса пользователя var d = new Date(); if(params.time) { // PHP возвращает время в формате UTC (GMT). Мы используем его для формирования объекта date // и дальнейшего вывода в формате временного пояса пользователя. // JavaScript конвертирует его для нас. d.setUTCHours(params.time.hours,params.time.minutes); } params.time = (d.getHours() < 10 ? "0" : "") + d.getHours()+":"+ (d.getMinutes() < 10 ? "0":"") + d.getMinutes(); var markup = chat.render("chatLine",params), exists = $("#chatLineHolder .chat-"+params.id); if(exists.length){ exists.remove(); } if(!chat.data.lastID){ // Если это первая запись в чате, удаляем // параграф с сообщением о том, что еще ничего не написано: $("#chatLineHolder p").remove(); } // Если это не временная строка чата: if(params.id.toString().charAt(0) != "t"){ var previous = $("#chatLineHolder .chat-"+(+params.id - 1)); if(previous.length){ previous.after(markup); } else chat.data.jspAPI.getContentPane().append(markup); } else chat.data.jspAPI.getContentPane().append(markup); // Так как мы добавили новый контент, нужно // снова инициализировать плагин jScrollPane: chat.data.jspAPI.reinitialise(); chat.data.jspAPI.scrollToBottom(true); },

Метод addChat() получает в качестве параметра объект, который содержит строку чата, имя автора и gravatar, и вставляет строку чата в соответствующее место в контейнере div#chatContainer. Каждая строка чата (если она не является временной) имеет уникальный ID, который назначается MySQL. Данный id как имя класса для строки чата в формате chat-123.
Когда метод addChat() выполняется, он проверяет существование предыдущей строки (дляchat-123 будет проверяться наличие chat-122). Если она существует, метод вставляет новую строку после нее. Если нет, то просто добавляет новую строку к div. Такая простая техника управляет вставкой строк в правильном порядке и поддерживает его на протяжении всей работы чата.
script.js

// Данный метод запрашивает последнюю запись в чате // (начиная с lastID), и добавляет ее на страницу. getChats: function(callback){ $.tzGET("getChats",{lastID: chat.data.lastID},function(r){ for(var i=0;i 3){ nextRequest = 2000; } if(chat.data.noActivity > 10){ nextRequest = 5000; } // 15 секунд if(chat.data.noActivity > 20){ nextRequest = 15000; } setTimeout(callback,nextRequest); }); }, // Запрос списка всех пользователей. getUsers: function(callback){ $.tzGET("getUsers",function(r){ var users = ; for(var i=0; i< r.users.length;i++){ if(r.users[i]){ users.push(chat.render("user",r.users[i])); } } var message = ""; if(r.total

И последний файл, которые потребуется - это получение всех сообщений из таблицы:

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

Здравствуйте, уважаемые web-мастера! Я уверен, что вы хотите, чтобы ваш сайт активно посещался, чтобы посетителям был интересен материал, размещенный на вашем сайте, чтобы они возвращались вновь и вновь. Скорее всего, у вас на сайте уже работает форум и гостевая книга. Но чего-то все же не хватает… Чего? Чата! Чата, в котором можно было бы пообщаться, из-за которого посетители будут возвращаться вновь и вновь…

Что для этого нужно?

Так в чем же дело?! Давайте напишем свой собственный чат, который будет отвечать всем вашим требованиям, будет быстрым и компактным.
Теперь давайте определимся, что должен уметь наш чат.
Во-первых, он должен регистрировать новых посетителей и обеспечивать вход уже зарегистрированным.
Во-вторых, он должен уметь вставлять смайлики – эти веселые маленькие картинки, без которых сегодня не обходится большинство чатов.
В-третьих, пользователи должны иметь возможность общаться в привате, т.е. лично друг с другом, чтобы остальные посетители не видели их разговора (естественно, кроме администратора J)

Теперь определимся, какие технологии мы будем использовать при разработке чата. Писать будем на PHP, а для регистрации пользователей информацию о них будем хранить в базе данных MySQL. Сам же текст болталки (болталкой назовем информацию, которой обмениваются посетители) будет находиться в текстовом файле.

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

Выглядеть он будет примерно так.

Теперь я уточню еще несколько деталей, которые необходимо обсудить еще до написания кода.

В текстовом файле chat.txt (в нем будет храниться наша «болталка») должно находиться не более 20 последних сообщений (для уменьшения трафика и ускорения загрузки чата).

При входе в чат посетитель должен будет ввести логин (он же ник) и пароль, причем если такой логин уже хранится в нашей таблице базы данных, то скрипт должен проверить, верен ли пароль, и если верен, то перенаправить посетителя в чат, а если неверен – вернуть на главную страницу для повторного ввода логина и пароля и сообщить ему, что пароль неверен. Если же такого логина в таблице нет, то нужно зарегистрировать посетителя, т.е. добавить в таблицу данные о нем (логин и пароль). Но отдельной страницы для регистрации нового посетителя (далее будем называть посетителей «чатниками» J) делать не нужно, иначе необходимость производить какие-то дополнительные действия для входа в чат отпугнет довольно значительную часть посетителей.

Кроме того, если вы планируете создать небольшой чат, к примеру, для общения с друзьями, то было бы неплохо записывать все, что произносилось в чате, в отдельный файл (назовем его history.txt ). В дальнейшем можно будет произвести некоторые действия над этим файлом (к примеру, каждый день в 12.00 отсылать содержимое этого файла вам на e-mail, а после этого очищать его). Но это будем делать после того, как наш чат уже будет работать.

Какие файлы нужны для создания чата?

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

index.php – главная страница чата. Выводит на экран форму для ввода логина и пароля, а также информацию, скоько сейчас человек в чате (и возможно, последние 20 реплик)

chat.php – ну, а это наш самый главный и важный файл. Что он только не делает: проверяет посетителей на верность пары логин-пароль, регистрирует посетителе, а кроме того, подключает к себе довольно большое количество описанных ниже РНР-файлов.

chat.inc.php – это РНР-файл содержит в себе HTML-документ с фреймами, без которых не обходится не один уважающий себя чат, а также небольшой кусок РНР-кода.

send.php – этот файл выводит на экран форму с текстовыми полями для ввода реплик, вставки смайликов и прочих полезных вещей, а также поле для выбора собеседника (либо для обения в «болталке», либо для общения в «привате»).

smiles.php – тут и так все понятно. Этот файл будет в цикле выводить смайлики на экран и генерировать JavaScript-код для вставки кода смайлика в строку реплики чатника.

add.php – этот файл будет оформлять реплики чатников и вставлять их в файл chat.txt.

del.php – при выходе чатника из чата удаляет чатника из списка активных (т.е. в данный момент обсуждающих свои важные проблемы и находящихся в чате).

includer.php – содержит в себе 3 переменных: $myserver, $mylogin, $mypassword. Переменная $myserver указывает сервер, на котором находится БД (обычно это - localhost), $mylogin и $mypassword – логин и пароль для подключения к БД.

text.php – РНР-файл, отвечающий за обновление информации в «болталке».

users.php – РНР-файл, который выводит на экран список находящихся в данный момент в чате посетителей, а также генерирует JavaScript-код для вставки ника выбранного чатника в окошко ввода реплики.

logo.html – файл, выводящий логотип чата на экран.

chat.txt – а это «болталка» чата, в ней хранятся последние 20 реплик.

history.txt – его назначение уже было описано выше.

chat_users.sql – SQL-файл, содержащий структуру таблицы chat_users

logo_chat.jpg – логотип чата.

style.css – таблица стилей, используемая в чате.

1…7.gif – 7 рисунков-смайликов, используемых в чате.

А теперь нужно упомянуть один момент, без объяснения которого никак нельзя обойтись.

Что еще?

Как обычно люди уходят из чата? Правильно, редко кто нажимает на кнопку выход, обычно просто закрывают окно с чатом. Нам нужно отслеживать эти моменты, чтобы вовремя убрать ушедших чатников из списка находящихся в чате. А, допустим, у человека что-то случилось и он обновляет страницу. Вплне реальная ситуация. Так вот, в обоих этих случаях происходит событие Unload. Его можно отследить при помощи JavaScript-обработчика onUnload. Это событие происходит в текущем окне непосредственно перед выгрузкой документа. Так вот, при каждом из вышеупомянутых действий посетителя надо должным образом отреагировать: если чатник выходит из чата, то удаляем его из списка активных посетителей, а если просто обновляет - то ничего не делаем. Но у нас же на разные действия реагирует один и тот же обработчик! Как же решить эту проблему? Об этом я подробнее расскажу при описании работы файлов chat.inc.php, send.php и del.php.
Если Вы хотите посмотреть, как работает описанный в статье чат, можете зайти на http://chat.micro.org.ua и убедиться, что все описанное в этой статье работает J.

Начинаем работу

Ну, а теперь, когда вроде бы все вопросы выяснены, можно приступать к непосредственному набору кода. начала я буду писать полный код файла, а потом буду подробно описывать, что он делает. А перед набором кода создайте пустые файлы chat.txt и history.txt.
Кроме того, в тот же каталог, в котором у вас находится чат, положите 7 gif-файлов – это наши смайлики. Я думаю, что вы сможете найти 7 смайликов в Интернете J, но все же если у вас нет смайликов, можете взять их с http://chat.micro.org.ua.
Теперь создайте таблицу стилей style.css, она понадобится нам в дальнейшем для оформления чата, хотя если вы не хотите использовать CSS, можете не создавать ее. Если вы все же решили использовать CSS, создайте два класса: normal и title, они нам еще пригодятся J.
Теперь нам нужен логотип чата. У меня логотипом является слово «MICRO»,написанное на синем фоне золотыми буквами высотой 55 и шириной 195 пикселей. Этот момент оставляю на Ваше усмотрение.
Ну, а теперь – открывайте свой любимый РНР-редактор (надеюсь, что это не блокнот J) и начинайте… Я начну со второстепенных по своей важности файлов. Чтобы потом не отвлекаться на их описание во время объяснения работы основных файлов.

Chat_users.sql

Для начала нужно создать таблицу «chat_users» в базе данных. Итак, вот ее код:

CREATE TABLE chat_users (
id int(10) NOT NULL auto_increment,
login text NOT NULL,
password text NOT NULL,
privat text NOT NULL,
active tinyint(2) NOT NULL default "0",
PRIMARY KEY (id)
) TYPE=MyISAM;

Мы создали таблицу, в которой находится пять столбцов:
1. id – идентификатор чатника.
2. login – логин (ник) чатника
3. password – пароль чатника
4. privat – это задел на будущее, когда мы будем работать над «пиватом»
5. active – тут будет храниться лишь одна цифра: 1 – если чатник в данный момент находится в чате, и 0, если чатник в данный момент не в чате.
Тут нет ничего сложного.

Incuder.php

//Ваш пароль

Это – ваши данные для подключения к базе данных.

Logo.html

Тут и пояснять особо нечего. Мы создаем HTML-документ, вставляем в него изображение-логотип чата и прижимаем его к Раям страницы при помощи строки «TOPMARGIN=0 LEFTMARGIN=0 RIGHTMARGIN=0 MARGINHEIGHT=0 MARGINWIDTH=0».

Ну, а теперь приступим к основным файлам чата.

Index.php

Чат на MICRO.ORG.UA

Пока что в этом документе нет РНР-дескрипторов, но потом, при расширении функциональности чата, здесь будут выводиться некоторые данные о работе чата.
В этом файле мы выводим входную форму для ввода логина (ника) и пароля, также при помощи JavaScript проверяем, чтобы поля для ввода логина и пароля не оставались пустыми, а также, переведя в нижний регистр и логин, и пароль, сравниваем их, чтобы они не совпадали (из соображений элементарной защиты). Ну и еще выводим заголовок чата (его название) и copyright’ы.
Данные из формы передаются в файл chat.php. Его то мы сейчас и рассмотрим.

Chat.php

Что мы делаем в этом файле? Первым делом выставляем подавление ошибок (error_reporting(0)) – чтобы ни случилось, посетители не должны видеть сообщенияоб ошибках. Далее подключаем файл includer.php с данными для подключения к базе данных. Выбираем из массива POST значения логина и пароля и, если они не пусты (хоть мы уже и предусмотрели такой вариант в файле index.php, но вдруг кто-нибудь наберет сразу http://chat.***.com/chat.php, то в этом случае мы перебрасываем его на index.php), продолжаем работу сценария. Потом проверяем, есть ли у нас в таблице chat_users пользователь с таким логином. Если нет (ник не занят), то заносим логин и пароль в таблицу – таким образом проходит регистрация. Если же такой логин уж есть в таблице, то проверяем, совпадает ли пароль, введенный посетителем, с паролем, находящимся в таблице. Если нет, то создаем JavaScript-код, содержащий сообщение о том, что пароль неверен, и перебрасываем его на страницу index.php. Если же все нормально (соответствующая пара «логин-пароль» найдена в таблице, то выдаем посетителю файл chat.inc.php). Кроме тго, производим некоторые манипуляции J над таблицей: заносим в поле «active» этого посетителя число 1, т.е. делаем его активным.

Chat.inc.php

На этот документе стоит обратить особое внимание.
При помощи строки «» мы выставляем частоту обновления файла – пять секунд. По моим наблюдениям, 5 секунд для нашего чата – оптимальное частота обновления, ведь файл, который будет каждый раз считываться, состоит всего лишь из 20 строк, поэтому чем быстрее обновляется text.php, тем для нас лучше.
Естественно, выставляем подавление сообщений об ошибках.
Далее при помощи функции file() мы считываем информацию из файла chat.txt и выводим информацию на экран, предварительно заменяя символы «\n» (перенос строки) на «
».
Обратите внимание на строки:
$num=20;
if ($count>$num)
{

For ($i=($count-$num); $i

При помощи JavaScript мы вставляем в строку реплики, находящуюся в файле send.php, код смайлика (например, для пятого смайлика, имеющего имя 5.gif, код юудет таким: ). Позже, в файле add.php, мы вместо кода вставим , и у чатников на экран выведется нормальный смайлик.

Send.php

Популярное:

Как разогнать процессор на ноутбуке Много памяти как ускорить систему windows 10

Скачать восстановление системы windows 8 Лучшие клавиатуры для iOS Gboard — клавиатура от Google Что делать если Windows обнаруживает неполадки на жестком диске Лучшие наушники для iphone Восток — дело тонкое: криптовалюты в Японии Япония легализовала биткоины

Новое

Как востановить менструальный цикл после родов:

• Продаем старые вещи через интернет — где, куда и что можно продать
• Необычное фото — отличный способ вашего продвижения: как сделать интерактивное фото Интерактивные фотографии
• Пишем чат на рнр Чат с отправкой файлов php
• Скачать pdf файл на ipad
• Мп3 плеер от самсунга. Mp3 плеер для самсунга. MusiXmatch плеер на сенсорный телефон Samsung на базе Android
• Скачать полезные программы на андроид 7
• Пиринговая сеть - что это?
• Тариф смартфон стандартный от vodafone — условия, подключение
• Регулировка громкости на Андроиде: стандартные настройки, инженерное меню и приложения
• Настраиваем рабочий стол Xiaomi Как сделать квадратные иконки на xiaomi

Скрытая настройка во всех Android-смартфонах позволяет включить темную тему оформления Экран телефона стал черно-белым и все на дисплее как в негативе? На этой странице вы найдете инструкцию как на Xiaomi Mi A2 Lite c Android 8.1 и...	Почему DVD привод не хочет читать диски Одной из самых распространенных неисправностей в компьютере, является проблема с прочтением (распознанием) дисков в дисководе компьютера. Многие...	Создание скрытого раздела «PQService» Acer 5220 как удалить скрытый раздел В сегодняшней статье речь пойдет о возвращении к заводским настройкам ноутбуков Acer, eMachines и Packard Bell. Изначально я планировал написать по...	Система охлаждения ноутбука Как проверить кулер на ноутбуке String(10) "error stat" В любом двигателе внутреннего сгорания должна стоять эффективная система охлаждения. Без которой мотор перегреется и все...

Настройки ПК, обновления, обслуживание, настройки

RSS