Содержание

Name: Простой чат на AJAX
Author: valera

E-PROGER » Для вебмастера » Справочники и Шпаргалки » Простой чат на 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.

                                     
<div id="chat"></div>
<form class="form-horizontal" role="form">
   <div class="form-group">
     <label for="name" class="col-sm-3 col-sm-offset-1 control-label">Ваше имя для чата</label>
     <div class="col-sm-4 ">
       <input type="text" class="form-control"  id="name" placeholder="Введите ваше имя" name="name"/>
     </div>
  </div>
</form>
<form class="form-horizontal" role="form">
  <div class="form-group">
     <label for="text" class="col-sm-3 col-sm-offset-1 control-label">Ваше сообщение</label>
     <div class="col-sm-7 ">
         <textarea class="form-control" rows="3" id="text" placeholder="Введите ваш сообщение" name="text"></textarea>
     </div>
  </div>
</form>
<div class="col-sm-offset-4 col-sm-4 col-xs-offset-2  col-xs-7">
  <button  id="btnSend" class="submit btn btn-primary col-sm-12 col-xs-12 btn-lg">Отправить сообщение</button>
</div>

В 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.

<?php
$name = $_POST['name'];//получили данные
$text = $_POST['text'];
if(($name != '') && ($text != '')){
    $strings = file('messages.txt');
//если строк в файле messages.txt > 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', {maxId: _maxId}, chatResult, 'json');
}

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

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

<?php
$maxId = $_POST['maxId'];
$strings = file('messages.txt');
$messages = array();
//если maxId меньше кол-ва строк в файле(count($strings)),
// то мы прибавляем +1 к i ,
for($i = $maxId; $i < count($strings); $i++) 
{
//берём строку с номером i разбиваем её по уникальному разделителю 
//'___' и делаем из неё именованные элементы массива 
    $string = explode('___', $strings[$i]);
    $arr['date'] = $string[0]; 
    $arr['name'] = $string[1];
    $arr['text'] = $string[2];
//упаковываем всё в массив messages[] 
    $messages[] = $arr;
}
//переводим массив в 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 +='<div class="qbox clearfix"><div class="bname col-md-2 pull-left center-block"><p>'+m.name+'</p></div>';
        html +='<div class="bnameprobel col-md-10 pull-left"></div><div class="clearfix"></div><div class="col-md-2 pull-left"><img src="/iconman.png" class="img-responsive col-md-10 col-md-push-1" alt=""></div>';
        html +='<div class="bnameprobel col-md-10 pull-left"><blockquote class="post bg-success pull-left"><p >'+m.text+'<span class="data">'+m.dt+'</span></p></blockquote></div></div>';
      }else{
        //вёрстка
        html +='<div class="qbox clearfix"><div class="bname col-md-2 pull-right center-block"><p>'+m.name+'</p></div>';
        html +='<div class="bnameprobel col-md-10 pull-right"></div><div class="clearfix"></div><div class=" col-md-2 pull-right"><img src="/iconman.png" class="img-responsive col-md-10 col-md-push-1" alt=""></div>';
        html +='<div class="bnameprobel col-md-10 pull-right"><blockquote class="post bg-info pull-right"><p >'+m.text+'<span class="data">'+m.dt+'</span></p></blockquote></div></div>';
      }
    }
 //сообщений в фаиле больше 5
 }else{
    for (var i = _messages.length - 1; i >= _messages.length-5; i--){
      var m = _messages[i];
      //проверка что сообщение чётное
      if (i%2==1){
        //вёрстка
        html +='<div class="qbox clearfix"><div class="bname col-md-2 pull-left center-block"><p>'+m.name+'</p></div>';
        html +='<div class="bnameprobel col-md-10 pull-left"></div><div class="clearfix"></div><div class="col-md-2 pull-left"><img src="/iconman.png" class="img-responsive col-md-10 col-md-push-1" alt=""></div>';
        html +='<div class="bnameprobel col-md-10 pull-left"><blockquote class="post bg-success pull-left"><p >'+m.text+'<span class="data">'+m.dt+'</span></p></blockquote></div></div>';
      }else{
        //вёрстка 
        html +='<div class="qbox clearfix"><div class="bname col-md-2 pull-right center-block"><p>'+m.name+'</p></div>';
        html +='<div class="bnameprobel col-md-10 pull-right"></div><div class="clearfix"></div><div class=" col-md-2 pull-right"><img src="/iconman.png" class="img-responsive col-md-10 col-md-push-1" alt=""></div>';
        html +='<div class="bnameprobel col-md-10 pull-right"><blockquote class="post bg-info pull-right"><p >'+m.text+'<span class="data">'+m.dt+'</span></p></blockquote></div></div>';
      }
   }
 }
 //выводим все сообщения
 $('#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', {name: name, text: text}, function(){
     //поле text стираем(тоесть делаем пустым '')
       $('#text').attr('value', '');
   });
  });
});

function chatRequest()
{
  // Отправка запроса методом POST.
  $.post('get_json.php', {maxId: _maxId}, 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 +='<div class="qbox clearfix"><div class="bname col-md-2 pull-left center-block"><p>'+m.name+'</p></div>';
        html +='<div class="bnameprobel col-md-10 pull-left"></div><div class="clearfix"></div><div class="col-md-2 pull-left"><img src="/iconman.png" class="img-responsive col-md-10 col-md-push-1" alt=""></div>';
        html +='<div class="bnameprobel col-md-10 pull-left"><blockquote class="post bg-success pull-left"><p >'+m.text+'<span class="data">'+m.dt+'</span></p></blockquote></div></div>';
      }else{
        //вёрстка
        html +='<div class="qbox clearfix"><div class="bname col-md-2 pull-right center-block"><p>'+m.name+'</p></div>';
        html +='<div class="bnameprobel col-md-10 pull-right"></div><div class="clearfix"></div><div class=" col-md-2 pull-right"><img src="/iconman.png" class="img-responsive col-md-10 col-md-push-1" alt=""></div>';
        html +='<div class="bnameprobel col-md-10 pull-right"><blockquote class="post bg-info pull-right"><p >'+m.text+'<span class="data">'+m.dt+'</span></p></blockquote></div></div>';
      }
    }
 //сообщений в фаиле больше 5
 }else{
    for (var i = _messages.length - 1; i >= _messages.length-5; i--){
      var m = _messages[i];
      //проверка что сообщение чётное
      if (i%2==1){
        //вёрстка
        html +='<div class="qbox clearfix"><div class="bname col-md-2 pull-left center-block"><p>'+m.name+'</p></div>';
        html +='<div class="bnameprobel col-md-10 pull-left"></div><div class="clearfix"></div><div class="col-md-2 pull-left"><img src="/iconman.png" class="img-responsive col-md-10 col-md-push-1" alt=""></div>';
        html +='<div class="bnameprobel col-md-10 pull-left"><blockquote class="post bg-success pull-left"><p >'+m.text+'<span class="data">'+m.dt+'</span></p></blockquote></div></div>';
      }else{
        //вёрстка 
        html +='<div class="qbox clearfix"><div class="bname col-md-2 pull-right center-block"><p>'+m.name+'</p></div>';
        html +='<div class="bnameprobel col-md-10 pull-right"></div><div class="clearfix"></div><div class=" col-md-2 pull-right"><img src="/iconman.png" class="img-responsive col-md-10 col-md-push-1" alt=""></div>';
        html +='<div class="bnameprobel col-md-10 pull-right"><blockquote class="post bg-info pull-right"><p >'+m.text+'<span class="data">'+m.dt+'</span></p></blockquote></div></div>';
      }
   }
 }
 //выводим все сообщения
 $('#chat').html(html);
}

update 5.10.16
Функция для фильтрации.

/*ф-я фильтрации*/
function myclear($dt){
    $dt=stripslashes($dt);
    $dt=strip_tags($dt);
    $dt=trim($dt);
    return $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.zip