Начал замечать на многих сайтах наличие, либо окошка чата или окошка онлайн консультанта. Не секрет что яндекс относит наличие на сайте чата или консультанта к положительным коммерческим факторам. Всвязи с этим я попытался наваять ajax чат для сайта.
И так поехали писать чат на ajax php. Создаём файл chat.js , а так же сразу создадим файлы add.php и get_json.php , но о них позже. Создаём файл chat.php . Подключаем к нему jquery и chat.js . Создаём в файле chat.php поле с именем участника чата и поле с сообщением в чат, а так же кнопку с id btnSend для отправки сообщения. На кнопку с id btnSend в файле chat.js повешен обработчик событий клик. В див с id chat будут выводиться наши чат сообщения. Ниже показан листинг куска кода из файла chat.php . Не обращайте внимания на непонятные css классы, это классы из bootstrap.
Ваше имя для чата Ваше сообщение Отправить сообщение
В chat.js обрабатывем данные из полей ввода и методом post в формате json отправляем данные в add.php . Кусок кода из chat.js ниже.
$("#btnSend").click(function(elem){ //при клике получаем сообщения из полей с ид name и text var name = $("#name").val(); var text = $("#text").val(); //и методом POST в формате json отправляем их в add.php $.post("add.php", {name: name, text: text}, function(){ //поле text стираем(тоесть делаем пустым "") $("#text").attr("value", ""); }); });
В файле add.php мы получаем данные. Конечно их надо бы проверить после получения но это мы пока опустим. Добавляем к данным дату и записываем их в файл messages.txt в одну строчку с уникальным разделителем "_". Так же для того что бы файл не разросся до больших размеров, сделана защита от переполнения. При достижении в файле messages.txt строк сообщений более 100, все строки стираются кроме последних пяти. Они зписываются заново. Ниже листинг add.php .
Всё, наши все сообщения пишутся в файл. Теперь нам нужно сделать так, что бы эти сообщения выводились на экран. Для этого напишем в файле chat.js функцию chatRequest() . Эта функция обращается к файлу get_json.php и передаёт ему параметр __maxId . Параметр _maxId указывает сколько сообщений у нас есть на данный момент. По умолчанию в начале стоит 0. Соответственно для начала __maxId определяем как глобальную переменную.
Function chatRequest(){ // Отправка запроса методом POST. $.post("get_json.php", {maxId: _maxId}, chatResult, "json"); }
Так же в функции chatRequest() определено, что при удачном выполнении запроса данные ответа возвращаются в формате json и вызывается функция chatResult из файла chat.js . Но давайте сначала разберём файл get_json.php .
Файл get_json.php принимает данные, вычисляет строку, которая была не отображена на экране, делает из неё массив, упаковывает в формат json и отправляет в функцию chatResult(msgs) .
