Chat ajax php scripts

Чат для сайта с PHP, MySQL, Javascript (Ajax)

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

Для начала, нам нужно будет создать таблицу в БД. Там должно быть 4 поля:
from — отправитель(varchar), to-получатель(varchar), message-сообщения(longtext), id- номер чата( INT(AutoIncrement) ).

Нам нужен будет файл, на котором будут отображаться сообщения, и будет поле для ввода сообщения. Назовем его chat.php. Для работы скрипта, в ссылке должны быть логин отправителя и логин получателя. Например: «ваш.сайт?from=login_1&to=login_2». Где from = отправитель, to = получатель. Нам нужен будет скрипт на js, который будет отправлять и получать сообщения:

var k=; //при входе должна быть сессия для индентифицирования отправителя var y=;// индентифицируем получателя. function update() < // функция обновления var xhttp; if (window.XMLHttpRequest)< xhttp=new XMLHttpRequest();>else < xhttp=new ActiveXObject("Microsoft.XMLHTTP");>// создаем XMLHttpRequest и делаем его кроссбраузерным xhttp.open('GET','chat1.php?to='+y+'&from='+k,true); xhttp.send(); //отправляем все что надо на сервер xhttp.onreadystatechange=function() < document.getElementById('b').innerHTML=xhttp.responseText; /* получаем сообщения, без разницы, изменилось ли, или нет.И вставляем в элемент с id "B" (в этом элементе у нас будут сообщения)*/ >> function get() //функция при отправки сообщения < var v=document.getElementById("b").innerHTML; //из id "B" берем текст, т.е всю переписку var g=document.getElementById("a").value;// из id "А" берем сообщение var xhttp; if (window.XMLHttpRequest)< xhttp=new XMLHttpRequest();>else < xhttp=new ActiveXObject("Microsoft.XMLHTTP");>// создаем XMLHttpRequest и делаем его кроссбраузерным xhttp.onreadystatechange=function() < if (xhttp.readyState==4 && xhttp.status==200) document.getElementById('b').innerHTML=xhttp.responseText; >// получаем текст, все сообщения + новое отправленное (см. дальше) d=""+k+"
"+g+"
"; /* в эту переменную помещаем новоиспеченное сообщение с ссылкой на страницу пользователя */ xhttp.open('GET','chat1.php?word='+d+'&to='+y+'&from='+k,true); xhttp.send(); // отправляем запрос со всем, что надо > setInterval(update, 1000);// каждую секунду будем выполнять функцию для обновления 

Теперь файл chat1.php (у меня не очень с воображением). Здесь мы будем получать из БД все сообщения добавлять к БД новое и выводить все (новое + старые). Думаю одна из простых частей. Код:

/* здесь мы проверяем, надо ли добавлять создавать строку с сообщениями. */ /* если $r == $p (где $r - все диалоги, a $p - остальные диалоги), то создаем диалог (см. ниже) */ if($row['to']==$_GET['to']&&$row['from']==$_SESSION['login']||$_GET['from']==$row['to']&&$_GET['to']==$row['from']) < // здесь мы проверяем диалоги, чтобы оба пользователя получали диалоги со своими собеседниками, а не только свои $msg=$row['messages'].$_GET['word']; $msg=addslashes($msg); $strSQL="UPDATE chat SET messages='".$msg."'"; mysql_query($strSQL)or die(mysql_error()); //обновляем таблицу, добавляя новое сообщение в диалог. >> if($r==$p) < // проверяем условия указанные выше $strSQL="INSERT INTO chat('from', 'to', 'messages') VALUES(".$_SESSION['login'].",".$_GET['to'].",".$_GET['word'].")"; $rs = mysql_query($strSQL) or die(mysql_error()); >echo $msg; //наконец выводим диалог mysql_close(); > ?> 

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

Источник

Простой чат на AJAX

Начал замечать на многих сайтах наличие, либо окошка чата или окошка онлайн консультанта. Не секрет что яндекс относит наличие на сайте чата или консультанта к положительным коммерческим факторам. Всвязи с этим я попытался наваять 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', , function()< //поле text стираем(тоесть делаем пустым '') $('#text').attr('value', ''); >); >);

В файле add.php мы получаем данные. Конечно их надо бы проверить после получения но это мы пока опустим. Добавляем к данным дату и записываем их в файл messages.txt в одну строчку с уникальным разделителем «_». Так же для того что бы файл не разросся до больших размеров, сделана защита от переполнения. При достижении в файле messages.txt строк сообщений более 100, все строки стираются кроме последних пяти. Они зписываются заново. Ниже листинг add.php .

 100 if(count($strings)>100) < //получаем все строки из файла в виде нумерованного массива $textarr=file('messages.txt'); $arr=array_slice($textarr, -5); //переписываем данные в файл записываем только //последние 5 строк массива $f = fopen('messages.txt', 'w+'); //в цикле записываем данные в файл, //каждое значение массива на новой строке в файле foreach($arr as $ar)< $f = fopen('messages.txt', 'a+');//открыли файл fwrite($f, $ar);//запись fclose($f);//закрыли файл >> $f = fopen('messages.txt', 'a+');//открыли файл fwrite($f, date('Y-m-d H:i:s') . "___");//запись fwrite($f, $name . "___");//запись в файл fwrite($f, $text . "\n");//запись и добавили конец строки fclose($f);//закрыли файл > ?>

Всё, наши все сообщения пишутся в файл. Теперь нам нужно сделать так, что бы эти сообщения выводились на экран. Для этого напишем в файле chat.js функцию chatRequest() . Эта функция обращается к файлу get_json.php и передаёт ему параметр __maxId . Параметр _maxId указывает сколько сообщений у нас есть на данный момент. По умолчанию в начале стоит 0. Соответственно для начала __maxId определяем как глобальную переменную.

function chatRequest()< // Отправка запроса методом POST. $.post('get_json.php', , chatResult, 'json'); >

Так же в функции chatRequest() определено, что при удачном выполнении запроса данные ответа возвращаются в формате json и вызывается функция chatResult из файла chat.js . Но давайте сначала разберём файл get_json.php .

Файл get_json.php принимает данные, вычисляет строку, которая была не отображена на экране, делает из неё массив, упаковывает в формат json и отправляет в функцию chatResult(msgs) .

 //переводим массив в json и отправляем echo json_encode($messages); ?>

ChatResult дописывает данные полученой строки в массив _messages . Мы его объявили в самом начале файла и сделали его массивом. И потом функция заново выводит все написанные сообщения в цикле из массива _messages в див с id #chat . Сделал так, что бы выводилось только пять последних сообщений. Для чётного и нечётного сообщения выводится своя вёрстка. Для вёрстки я опять же использую бутстрап. Листинг функции ChatResult .

function chatResult(msgs) < // Добавление новых сообщений в массив. for(var i = 0; i < msgs.length; i++) < var m = new Object(); m.dt = msgs[i]['date']; m.name = msgs[i]['name']; m.text = msgs[i]['text']; _messages.push(m); _maxId++; >// Вывод массива сообщений. var html = ''; //пока сообщений в фаиле меньше 5 if(_messages.length<=5)< for (var i = _messages.length - 1; i >=0; i--) < var m = _messages[i]; //проверка что сообщение чётное if (i%2==1)< //вёрстка html +='
'+m.name+'
'; html +=' 
'; html +='
'+m.text+''+m.dt+'
'; >else< //вёрстка html +='
'+m.name+'
'; html +=' 
'; html +='
'+m.text+''+m.dt+'
'; > > //сообщений в фаиле больше 5 >else< for (var i = _messages.length - 1; i >= _messages.length-5; i--)< var m = _messages[i]; //проверка что сообщение чётное if (i%2==1)< //вёрстка html +='
'+m.name+'
'; html +=' 
'; html +='
'+m.text+''+m.dt+'
'; >else< //вёрстка html +='
'+m.name+'
'; html +=' 
'; html +='
'+m.text+''+m.dt+'
'; > > > //выводим все сообщения $('#chat').html(html); >

Для того что бы у нас чат постоянно обновлялся мы делаем постоянные запросы к функции chatRequest() с периодичностью 2 сек.

// Запрашиваем сообщения каждые 2 секунды setInterval(chatRequest, 2000);

Ну вот мы и написали простой чат на ajax php для сайта. Для полноты картины покажем полный листинг файла chat.js

var _maxId; var _messages; $(document).ready(function()< // Инициализация. _maxId = 0; _messages = []; chatRequest(); // Запрашиваем сообщения каждые 2 секунды setInterval(chatRequest, 2000); $('#btnSend').click(function(elem)< //при клике получаем сообщения из полей с ид name и text var name = $('#name').val(); var text = $('#text').val(); //и методом POST в формате json отправляем их в add.php $.post('add.php', , function()< //поле text стираем(тоесть делаем пустым '') $('#text').attr('value', ''); >); >); >); function chatRequest() < // Отправка запроса методом POST. $.post('get_json.php', , chatResult, 'json'); > function chatResult(msgs) < // Добавление новых сообщений в массив. for(var i = 0; i < msgs.length; i++) < var m = new Object(); m.dt = msgs[i]['date']; m.name = msgs[i]['name']; m.text = msgs[i]['text']; _messages.push(m); _maxId++; >// Вывод массива сообщений. var html = ''; //пока сообщений в фаиле меньше 5 if(_messages.length<=5)< for (var i = _messages.length - 1; i >=0; i--) < var m = _messages[i]; //проверка что сообщение чётное if (i%2==1)< //вёрстка html +='
'+m.name+'
'; html +=' 
'; html +='
'+m.text+''+m.dt+'
'; >else< //вёрстка html +='
'+m.name+'
'; html +=' 
'; html +='
'+m.text+''+m.dt+'
'; > > //сообщений в фаиле больше 5 >else< for (var i = _messages.length - 1; i >= _messages.length-5; i--)< var m = _messages[i]; //проверка что сообщение чётное if (i%2==1)< //вёрстка html +='
'+m.name+'
'; html +=' 
'; html +='
'+m.text+''+m.dt+'
'; >else< //вёрстка html +='
'+m.name+'
'; html +=' 
'; html +='
'+m.text+''+m.dt+'
'; > > > //выводим все сообщения $('#chat').html(html); >

update 5.10.16

Заткнул простейшую дыру от простейшей XSS атаки. Все просто задолбали ломать чат)). Было лень фильтровать входящие данные, но пришлось переделать. Функция для фильтрации.

/*ф-я фильтрации*/ function myclear($dt)

теперь файл add.php выглядит так

/*ф-я фильтрации*/ function myclear($dt) < $dt=stripslashes($dt); $dt=strip_tags($dt); $dt=trim($dt); return $dt; >$name = myclear($_POST['name']);//фильтруем $text = myclear($_POST['text']); //было раньше //$name = $_POST['name']; //$text = $_POST['text']; if(($name != '') && ($text != ''))< $strings = file('messages.txt'); if(count($strings)>100) < //получаем все строки из файла в виде нумерованного массива $textarr=file('messages.txt'); $arr=array_slice($textarr, -5); //переписываем данные в файл записываем только последние 3 строки массива $f = fopen('messages.txt', 'w+'); //в цикле записываем данные в файл, каждое значение массива на новой строке в файле foreach($arr as $ar)< $f = fopen('messages.txt', 'a+');//открыли файл fwrite($f, $ar);//запись fclose($f);//закрыли файл >> $f = fopen('messages.txt', 'a+');//открыли файл fwrite($f, date('Y-m-d H:i:s') . "___");//запись fwrite($f, $name . "___");//запись в файл fwrite($f, $text . "\n");//запись и добавили конец строки fclose($f);//закрыли файл >

Источник

Chat ajax php scripts

В этом разделе помещены уроки по PHP скриптам, которые Вы сможете использовать на своих ресурсах.

• 

Фильтрация данных с помощью zend-filter

Когда речь идёт о безопасности веб-сайта, то фраза «фильтруйте всё, экранируйте всё» всегда будет актуальна. Сегодня поговорим о фильтрации данных.

Контекстное экранирование с помощью zend-escaper

Обеспечение безопасности веб-сайта — это не только защита от SQL инъекций, но и протекция от межсайтового скриптинга (XSS), межсайтовой подделки запросов (CSRF) и от других видов атак. В частности, вам нужно очень осторожно подходить к формированию HTML, CSS и JavaScript кода.

Подключение Zend модулей к Expressive

Expressive 2 поддерживает возможность подключения других ZF компонент по специальной схеме. Не всем нравится данное решение. В этой статье мы расскажем как улучшили процесс подключение нескольких модулей.

Совет: отправка информации в Google Analytics через API

Предположим, что вам необходимо отправить какую-то информацию в Google Analytics из серверного скрипта. Как это сделать. Ответ в этой заметке.

Подборка PHP песочниц

Подборка из нескольких видов PHP песочниц. На некоторых вы в режиме online сможете потестить свой код, но есть так же решения, которые можно внедрить на свой сайт.

Совет: активация отображения всех ошибок в PHP

При поднятии PHP проекта на новом рабочем окружении могут возникнуть ошибки отображение которых изначально скрыто базовыми настройками. Это можно исправить, прописав несколько команд.

Источник