Используя услуги сервиса чатов, обязательно принять пользовательское соглашение . Факт использования услуг означает безусловное принятие всех пунктов соглашения.
Инструкции Возможности чата- В открытый чат может войти любой посетитель, даже не зарегистрированный.
- В чат со свободной регистрацией может войти любой, предварительно зарегистрированный, пользователь. Поскольку в чат допускаются только зарегистрированные пользователи, это облегчает работу модератора.
- Модерируемый чат могут просматривать все (в том числе, не зарегистрированные пользователи), но войти в такой чат может только зарегистрированный пользователь, причём участие в чате должно быть предварительно подтверждено администратором.
- Закрытый чат целиком управляется владельцем чата: только владелец разрешает доступ в чат другим зарегистрированным пользователям. Только такие пользователи могут просматривать чат и общаться в закрытом чате.
- Возможность задать полностью индивидуальное оформление чата, указав свой стиль CSS для чата.
- Возможно подключение собственных скриптов JavaScript для настройки чата под собственные нужды (осуществляется через обращение в службу поддержки).
- Создание отдельных комнат в чате, отображающихся в виде закладок в чате. Зайдя в чат, пользователь затем сможет войти в одну или сразу в несколько комнат, созданных администратором чата.
- Отображение статистики посещаемости чата и интенсивности общения по часам, дням, месяцам.
- В чате появится возможность просмотреть историю сообщений, где хранятся все сообщения чата за последний год.
- Прямая ссылка со страницы чата на нашем сервисе на Ваш сайт, указанный в настройках чата.
- Доход от размещения объявлений и головастиков в Вашем чате составит не 30%, а 60%.
- В будущем будут появляться и другие возможности для "Профессиональных" чатов, о чём будет сообщено в
Для реализации функционала видео-чата в браузере существует две наиболее подходящие из технологии - WebRTC и Flash. Каждая из технологий обладает рядом своих особенностей, например, во Flash можно использовать видео кодеки H.264 или Sorenson, а в WebRTC на текущий момент доступен VP8, что делает два этих подхода плохо совместимыми друг с другом (перекодирование видео на лету - это очень затратная операция), к тому же видео-чат лучше делать peer-to-peer по возможности, стоит ли говорить, что соединить Flash и WebRTC напрямую не выйдет. В нашем примере мы рассмотрим вариант видео-звонка звонка из WebRTC в WebRTC, с помощью платформы VoxImplant . В целом, можно сделать выбор конкретного варианта, вплоть до динамического выбора технологии в зависимости от того кому звоним. Подробности, как обычно, под катом.
Создание приложения, пользователей, сценария и настройка Для начала нам потребуется аккаунт разработчика VoxImplant (), после входа в панель управления VoxImplant в разделе Applications создаем новое приложение и называем его videochat. Чтобы организовать простой видео-чат нам потребуется хотя бы 2 пользователя - testuser1 и testuser2, создаем их в разделе Users и привязываем к приложению, используя кнопку Assign applications (аналогично можно уже созданных юзеров привязать к приложению во время редактирования приложения). При звонке от пользователя к пользователю все равно вызывается сценарий обработки звонка, который пишутся на Javascript и выполняется движком VoxEngine . Создаем в разделе Scenarios новый сценарий, назовем его User2User, при использовании режима peer-to-peer сценарий будет выглядеть следующим образом:VoxEngine.forwardCallToUserDirect();
Если в будущем захочется гонять видео через сервер (принудительно), то можно использовать VoxEngine.forwardCallToUser(null, true); , но в этом случае звонки будут стоить денег.
Если необходимо управлять сигнализацией, чтобы, например, завершить звонок в какой-то момент со стороны сервера, то можно вместо хелпера forwardCallToUserDirect использовать следующий сценарий:
Var call1, call2; VoxEngine.addEventListener(AppEvents.CallAlerting, function(e) { call1 = e.call; call2 = VoxEngine.callUserDirect(e.call, e.destination, e.displayName, e.headers); call2.addEventListener(CallEvents.Connected, handleCallConnected); }); function handleCallConnected(e) { call1.answerDirect(call2); // Тут можно, например, разъединить звонок через какое-то время setTimeout(VoxEngine.terminate, 5000); }
После создания сценария нам нужно привязать его к приложению через правило (Rule) - идем в раздел Applications и редактируем наше приложение, в табе Rules создаем новое правило (Add rule). Назвать можно как угодно, например, Intercom, в Pattern указывается регулярное выражение - правило срабатывает если номер соот-вует этому выражению, оставляем.* и перетаскиваем наш сценарий User2User из Available в Assigned и сохраняем правило. Сохраняем приложение, остается только сделать клиент с помощью VoxImplant Web SDK .
Создание веб-клиента Для клиента потребуется только файл voximplant.min.js, который лежит на cdn, а также базовое понимание как устроено Web SDK. Чтобы все выглядело все более-менее прилично можно использовать Bootstrap. Не вижу смысла вываливать сюда весь код из HTML-файла, разберем только основные моменты, а более глубоко разобраться всегда можно, скачав файлы с нашей странички на GitHub . // Подключаем SDK
//функция для выведения лога сразу в HTML
function log(str) {
document.getElementById("log").innerHTML += str+"
";
}
// Создаем инстанс VoxImplant
var voxAPI = VoxImplant.getInstance();
// Вешаем обработчики событий
voxAPI.on(VoxImplant.Events.SDKReady, onSdkReady);
voxAPI.on(VoxImplant.Events.ConnectionEstablished, onConnectionEstablished);
voxAPI.on(VoxImplant.Events.ConnectionFailed, onConnectionFailed);
voxAPI.on(VoxImplant.Events.ConnectionClosed, onConnectionClosed);
voxAPI.on(VoxImplant.Events.AuthResult, onAuthResult);
voxAPI.v(VoxImplant.Events.IncomingCall, onIncomingCall);
voxAPI.on(VoxImplant.Events.MicAccessResult, onMicAccessResult);
// Инициализуем SDK
try {
voxAPI.init({
micRequired: true, // запрос доступа к микрофону/камере до подключения к VoxImplant
videoSupport: true // включить поддержку видео
});
} catch(e) {
// если произошла ошибка инициализации, то выводим ее
log(e.message);
}
// Теперь можно пользоваться SDK - подключаемся
function onSdkReady(){
voxAPI.connect(); // после вызова появится диалог доступа к камере/микрофону
}
// Обрабатываем
function onMicAccessResult(e) {
if (e.result) {
// разрешили доступ к камере/микрофону
} else {
// запретили доступ к камере/микрофону
}
}
// Установили соединение с VoxImplant
function onConnectionEstablished() {
// Можно авторизоваться - тут надо показать диалог для ввода данных, а потом вызвать следующую функцию
// Замените application_user, application_name, account_name и application_user_password на ваши данные для тестирования
voxAPI.login(application_user+"@"+application_name+"."+account_name+".voximplant.com", application_user_password);
}
// Не смогли подключиться к VoxImplant
function onConnectionFailed() {
// Или веб-сокеты не подключились или UDP закрыто
}
// Закрылось соединение
function onConnectionClosed() {
// Можно вызвать connect по новой для переподключения
}
function onAuthResult(e) {
if (e.result) {
// авторизовались - теперь можно звонить или принимать звонки
} else {
// ошибка авторизации, можно посмотреть e.code, чтобы понять что не так
}
}
var currentCall = null; // текущий звонок
// Входящий звонок
function onIncomingCall(e) {
currentCall = e.call;
// Вешаем обработчики
currentCall.on(VoxImplant.CallEvents.Connected, onCallConnected);
currentCall.on(VoxImplant.CallEvents.Disconnected, onCallDisconnected);
currentCall.on(VoxImplant.CallEvents.Failed, onCallFailed);
// Отвечаем на звонок автоматически. В нормальном приложении лучше показать инфо о входящем звонке и дать возможность принять или отбить.
currentCall.answer(null, {}, { receiveVideo: true, sendVideo: true });
}
// Функция для исходящего звонка
function createCall() {
// application_username - имя юзера, которому звонит (по видео)
currentCall = voxAPI.call(application_username, { receiveVideo: true, sendVideo: true }, "TEST CUSTOM DATA", {"X-DirectCall": "true"});
// Вешаем обработчики
currentCall.on(VoxImplant.CallEvents.Connected, onCallConnected);
currentCall.on(VoxImplant.CallEvents.Disconnected, onCallDisconnected);
currentCall.on(VoxImplant.CallEvents.Failed, onCallFailed);
}
// Звонок соединился
function onCallConnected(e) {
// Включаем отправку видео и показываем входящее видео
voxAPI.sendVideo(true);
currentCall.showRemoteVideo(true);
}
// Звонок завершился
function onCallDisconnected(e) {
currentCall = null;
}
// Ошибка при звонке
function onCallFailed(e) {
// Код ошибки e.code, описание ошибки e.reason
}
Вот собственно все основные функции и эвенты, которые нам нужны. Естественно, это голый JS, к этому нужно прикрутить стили и верстку. Вариант, который мы выложили на GitHub выглядит так:
В случае если нужна поддержка и Flash и WebRTC придется переключать клиентское приложение в соответствующий режим, потому что видео-звонки WebRTCFlash мы реализовывать не стали. Надеемся, что в ближайшем будущем поддержка WebRTC появится в IE12, а за ним и в Safari. Если у вам нужен вариант «звонок с сайта оператору», то можно сделать 2 операторских приложения, одно с использованием WebRTC, другое с использованием Flash, и направлять звонки с сайта в зависимости от того какой режим SDK включится у посетителя сайта или на одного или на другого оператора.
На сегодняшний день существует два основных способа организации корпоративного чата. Первый из них заключается в использовании наиболее распространенных в нашей стране IM-клиентов: ICQ,QIP, Skype и пр. Главным его достоинством является легкость внедрения и дешевизна. И действительно, что-то проще придумать невозможно: достаточно всем сотрудникам установить клиент и добавить в контакты друг друга. Использование же этих систем вообще бесплатно.
Однако у такого решения есть целый ряд серьезнейших недостатков. Во-первых , в них отсутствуют многие весьма полезные возможности. В частности, во всех системах (за исключением Skype) нет групповых чатов, функции подтверждения прочтения сообщения и пр. Во-вторых , IM-чаты абсолютно неуправляемые в масштабе организации. У каждого сотрудника есть собственный аккаунт, с которым он волен делать все, что угодно. Отсюда возникает проблема контроля переписки сотрудников, доступа к архиву сообщений, создания “корпоративных” номеров и пр.
В-третьих , использование IM-клиентов – потенциальная угроза информационной безопасности компании. Причем речь идет не только о технических моментах (например, риск загрузки инфицированных файлов, переход по опасным ссылкам и пр.), с которыми можно успешно бороться. IM-чаты являются одним из основных каналов утечки конфиденциальной информации, который, ко всему прочему, достаточно плохо поддается контролю со стороны DLP-систем. Особенно это верно в отношении Skype, которая передает трафик в зашифрованном виде. Кроме того, всегда существует риск утери сотрудником контроля над своим аккаунтом в ICQ. Заполучив его, злоумышленник сможет общаться с клиентами компании, реализуя те или иные мошеннические схемы с целью их обмана. Что, в конце концов, крайне негативно отразиться на репутации и бизнесе компании.
Вторым способом организации чата для офиса является использование специального ПО. И хотя это несколько более затратный способ, он избавлен от всех вышеперечисленных недостатков. Ну а дополнительные возможности, которые могут активно использоваться в бизнес-процессах, повышая их эффективность, быстро окупают затраты на внедрение. Естественно, для этого необходимо, чтобы в ПО реализованы все нужные функции. Поэтому к выбору программы для организации корпоративного чата стоит подходить предельно внимательно: чем больше функционал продукта, тем шире его можно будет использовать. При этом необходимо обращать внимание и на другой аспект – а именно на возможности внедрения и администрирования. Интеграция с Active Directory, удаленное управление, возможность масштабирования решения позволяют существенно упростить управление корпоративным чатом, а значит, и уменьшить стоимость владения им.
В качестве примера решения, которое удовлетворяет всем требованиям, можно привести продукт MyChat, представляемый компанией Network Software Solutions. Это с клиент-серверной архитектурой. Это значит, что для обеспечения работы продукта используется специальный сервер, который берет на себя коммуникационные и прочие функции. Клиент-серверный подход является оптимальным для организации корпоративного чата как в небольших, так и в крупных сетях. Он отличается хорошей управляемостью, широкими возможностями и низкой загрузкой сетевых каналов.
В плане функций, предназначенных для конечных пользователей, программе MyChat есть, чем похвастаться. Начать нужно с наличия двух режимов общения : персонального и группового. С первым все очень просто. Два пользователя могут переписываться друг с другом примерно так же, как в ICQ . Групповое общение реализовано в форме каналов – специальных “групп”, подключаться к которым могут либо все, либо только определенные сотрудники организации. При этом каналы могут быть созданы администратором и существовать всегда, или же открываться самими пользователями (у которых есть права на это) при необходимости. Такая гибкость очень удобна на практике. К примеру, можно создать один общий канал для общения всех сотрудников офиса и отдельные каналы для переписки внутри каждого отдела.
В ходе общения пользователи могут применять большой набор различных функций . Среди них можно отметить возможность использования в сообщениях форматирования текста и смайликов, произвольных картинок и ссылок, передачу файлов как напрямую, так и через сервер чата, сохранение истории переписки, игнор-листы, фильтры (антимат, антифлуд) и пр. Фактически, в MyChat реализовано все необходимое для полноценного и комфортного общения сотрудников друг с другом.
Естественно, невозможно представить себе чат для офиса без книги контактов. В MyChat их даже две. В первой приводится полный список всех зарегистрированных в системе пользователей. Причем их можно разбить по отделам, выделив в каждой группе начальника. Это особенно актуально для крупных компаний, в которых сотрудники из разных отделов могут и не знать друг друга. Вторая книга контактов – персональная. У каждого пользователя она своя. В нее можно занести всех людей, с которыми нужно часто общаться.
Помимо этого в рассматриваемом чате для офиса реализован целый ряд дополнительных возможностей . Первая из них – система оповещений . С ее помощью можно передать всем или только некоторым пользователям определенное сообщение и затребовать у них подтверждение прочтения. Это позволяет рассылать приказы для ознакомления, оповещения о проведении собраний и пр. Причем сотрудники уже не смогут сказать, что они не увидели или не прочитали сообщение.
Вторая дополнительная возможность – встроенный FTP-сервер . Его наличие в чате для офиса может показаться странным. Однако на самом деле это очень удобно, особенно, если в компании еще не развернут собственный FTP-сервер. Что он дает? Во-первых, хранилище для записи файлов, причем как общее, доступное для всех пользователей, так и персональное. Во-вторых, он может использоваться для обмена документами (например, на FTP-сервере можно сохранить документы для пользователя, который в данный момент не в сети). В-третьих, FTP-сервер необходим для автоматического обновления клиентов чата (подробнее об этом поговорим чуть позже).
Следующая дополнительная возможность – доска объявлений . На нее можно “повесить” объявление, которое будет видно всем пользователям в указанный промежуток времени. Также можно отметить менеджер учетных записей, который обеспечивает удобное использование клиентов на тех компьютерах, за которыми могут работать разные сотрудники.
Немало функций в MyChat предназначено для увеличения удобства его развертывания и администрирования. Чем у системы больше возможностей в этом плане, тем удобнее ею управлять. А значит, тем меньше совокупная стоимость владения чатом. Отличительной особенностью MyChat является возможность использования в сетях, в том числе и в распределенных, самого разного масштаба, начиная с нескольких и заканчивая тысячами и даже десятками тысяч клиентов, находящихся в разных городах или даже странах. Это обеспечивается целым набором функций администрирования.
Начать нужно со способов установки программ-клиентов. Инсталлировать их можно как вручную, так и автоматически с использованием групповых политик Active Directory . Это же самое можно сказать и об обновлении клиентов. Впрочем, в MyChat существует более удобная реализация этого процесса. В этом чате для офиса есть функция автоматического обновления. При ее использовании клиент обновляется самостоятельно по команде пользователя, которому выдается соответствующее уведомление (при этом используется встроенный FTP-сервер, куда администратор должен предварительно загрузить дистрибутив новой версии). Реализована в , которая способна очень сильно облегчить жизнь ИТ-отделу компании.
Еще одной очень важной особенностью рассматриваемого чата для офиса является собственный скриптовый движок . Для чего он нужен? Этот движок позволяет писать произвольные скрипты, использующиеся для автоматизации разных процессов и интеграции чата с другими корпоративными программными инструментами. Здесь же можно отметить и возможность подключения различных плагинов. Например, плагина для удаленного управления компьютерами пользователей. В сочетании с некоторыми другими возможностями MyChat (отправка скриншотов, технология MyChat Actions и пр.) это позволяет организовать эффективную техническую поддержку пользователей.
Немало внимания уделили разработчики программы безопасности. Весь передаваемый в системе трафик шифруется, что делает бесполезным его перехват. Это позволяет без опаски подключать удаленных пользователей через Интернет. Также можно отметить наличие весьма гибкой системы настройки прав доступа пользователей к возможностям чата. Они устанавливаются по группам, причем администратор может разрешить или запретить практически любую операцию. Это позволяет настраивать чат для офиса точно так, как нужно в каждом конкретном случае.
Отличительной чертой программы MyChat является активное использование веб-технологий . В состав этого продукта входит собственный веб-сервер, который может использоваться для управления этим чатом для офиса. Такой способ администрирования прекрасно дополняет традиционную локальную консоль. Он позволяет управлять сервером чата удаленно со своего рабочего компьютера или вообще из дома через Интернет.
В этом уроке мы будем создавать простое приложение веб-чата с помощью 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.
- Следите за нами на
Думаю, что каждый из Вас знает, что такое чат. И очень часто на сайтах можно встретить либо маленькие чаты, либо достаточно большие и сложные. В этой статье я опишу принцип создания чата . Обратите внимание, что в этой статье не будет готового кода "скопировал-вставил ", а только алгоритм, с помощью которого Вы, обладая необходимыми знаниями, сможете сделать чат .
Ключевая особенность чата в том, что его содержимое обновляется автоматически . Отсюда и возникают все трудности.
Для начала разберём с Вами структуру таблицы в базе данных . Вот те поля, которые обязательно потребуются:
- id - уникальный идентификатор.
- name - имя, оставившего сообщение. Здесь также может быть, например, user_id , означающий id пользователя из другой таблицы.
- message - сам текст сообщения.
- date - дата отправления сообщения.
Безусловно, это только пример. Вы можете добавлять ещё массу других полей, тем самым, расширяя возможности Вашего чата.
Теперь необходимо вывести HTML-код :
| Имя | Сообщение | Дата |
| Имя | Сообщение | Дата |
В данном коде опять же всё как пример. Можно всё смело менять, но принцип должен быть тем же: есть место, где выводятся сообщения, причём они выводятся в одинаковом виде. Вместе с полем, где выводятся сообщения, есть текстовое поле и кнопка "Отправить ".
Обязательно для блока chat поставьте фиксированную высоту, чтобы при добавлении новых сообщений, у Вас этот блок не вырастал, также поставьте полосу прокрутки у него, чтобы можно было просмотреть все сообщения. Всё это делается с помощью CSS .
Теперь займёмся JavaScript :
function send() {
var message = document.getElementById("message").value;
var name = "Гость";
/* Здесь блок отправки POST-запроса с данными (например, через Ajax) */
}
function update() {
/* Здесь отправка запроса на получение всех сообщений (например, через Ajax) */
/* Здесь вывод сообщений в определённом формате прямо в HTML-код с использованием DOM, либо JQuery. */
}
setInterval("update()", 1000); // Обновление окна чата каждую секунду
И, наконец, PHP-код (добавление новых сообщений):
И последний файл, которые потребуется - это получение всех сообщений из таблицы:
Всё, круг замкнулся, и чат заработал. Как видите, сделать чат достаточно сложно и нужно обладать большим багажом знаний. Но я надеюсь, что данная статья здорово облегчит Вам эту задачу. Абсолютно любой чат, какой бы он сложный ни был, основан на принципах, описанных в данной статье, поэтому смело можете его использовать как каркас.