—»     —»   Создание чата на jQuery/PHP
  Раздел: Чаты   Комментариев: 12  

Создание чата на jQuery/PHP



Создание чата на jQuery/PHP

План

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

PHP – будет управлять всеми сторонними материалами приложения
- Запись новых сообщений в текстовый файл
- Чтение новых сообщений из текстового файла
- Запрос состояния текстового файла
- Основная безопасность

jQuery/javascript – управление клиентской стороной приложения. Данное приложение разработано AJAX, что означает, что сообщения будут появляться во всплывающем окне (как ваши, так и собеседников), без требований перезагрузки страницы.
- Периодический запрос сервера на наличие новых сообщений
- Добавление новых сообщений в окно чата
- Прокрутка окна чата к новым сообщениям
- Запрос и установка имени пользователя
- Ограничение размера сообщений во избежание огромных сочинений в окне чата
- Основная безопасность

Текстовый файл – хранит историю чата

Отойдем от плана

В данной статье мы охватим различные интересные вещи и технологии, и в конечном счете, получим чат. Правда, такой чат будет сложно назвать самым лучшим чатом с самым большим количеством возможностей. Вы не сможете кикать или банить людей. Несколько человек могут ставить себе одинаковое имя. Вы не сможете видеть всех активных участников чата. Другими словами, это вам не IRC. Это просто интересное и забавное демо, которое даже можно применить в нескольких ситуациях. Если у вас есть желание в дальнейшем улучшить ваш чат и добавить много различных функций, то мы бы советовали вам следить за материалами нашего сайта!

Основная структура HTML

<div id="page-wrap">

    <h2>jQuery/PHP Chat</h2>

    <p id="name-area"></p>

    <div id="chat-wrap"><div id="chat-area"></div></div>

    <form id="send-message-area">
        <p>Your message: </p>
        <textarea id="sendie" maxlength = '100'></textarea>
    </form>

</div>

Глядите, немного драгоценной разметки. На самом деле, 50% того, на что вы смотрите, не имеет никакого отношения с направленностью данной статьи. Оформление страницы центрирует вещи. Двойные div’ы, примененные к разметке чата и окна сообщений используются лишь для прибавления (не очень-то и нужного) эффекта двойной границы окна сообщений.

Самыми важными областями являются textarea с идентификатором «sendie», и div окна сообщений. На этом будет указывать javascript.

Часть движка на javascript

Мы собираемся добиться немного объектного ориентирования посредством javascript. Мы создадим функцию Чата, которая будет верхнем звеном в связке с остальными функциями, связанными с вещами, относящимися к чату.

function Chat () {
    this.update = updateChat;
    this.send = sendChat;
    this.getState = getStateOfChat;
}

UpdateChat будет давать запрос серверу о наличии новых линий в текстовом файле. Если же они присутствуют, то функция опубликует их в окне чата. sendChat будет задействована, когда сообщение уже будет напечатано и будет нажата кнопка отправки сообщения. Функция пропустит данные на сервер для дальнейшей обработки. getStateOfChat опрашивает сервер о количестве линий в текстовом файле, что позволяет сравнить данные и определить, есть ли новые строки или нет. Данная информация возвращается также как и JSON. А функции выглядят так:

//gets the state of the chat
function getStateOfChat(){
  if(!instanse){
     instanse = true;
     $.ajax({
         type: "POST",
         url: "process.php",
         data: {
               'function': 'getState',
            'file': file
            },
         dataType: "json",
         success: function(data){
           state = data.state;
           instanse = false;
         },
      });
  }
}

//Updates the chat
function updateChat(){
   if(!instanse){
     instanse = true;
       $.ajax({
         type: "POST",
         url: "process.php",
         data: {
               'function': 'update',
            'state': state,
            'file': file
            },
         dataType: "json",
         success: function(data){
           if(data.text){
            for (var i = 0; i < data.text.length; i++) {
                            $('#chat-area').append($("<p>"+ data.text[i] +"</p>"));
                        }
           }
           document.getElementById('chat-area').scrollTop = document.getElementById('chat-area').scrollHeight;
           instanse = false;
           state = data.state;
         },
      });
   }
   else {
     setTimeout(updateChat, 1500);
   }
}

//send the message
function sendChat(message, nickname)
{
    updateChat();
    $.ajax({
       type: "POST",
       url: "process.php",
       data: {
             'function': 'send',
          'message': message,
          'nickname': nickname,
          'file': file
         },
       dataType: "json",
       success: function(data){
         updateChat();
       },
    });
}

Все эти три функции используют возможности AJAX в jQuery, а также связывают их с PHP-файлом, который называется process.php. Его нам, конечно же, нам потребуется создать.

Часть движка на PHP

Часть информации, которая передается с AJAX, являются произвольным значением, и называется «function». Это просто дает файлу PHP информацию о том, какие вещи требуется выполнить. Первым делом мы выставим значение и настроим переключатель оператора, который будет охватывать все возможные функции. Мы также установим чистый массив, в котором будет храниться значения, которые будут кодироваться в JSON, а затем передаваться обратно.

Когда мы пытаемся активировать getState, будет читаться текстовый файл и просчитываться число строк. После того, как мы обновляем страницу, файл полностью прочтен, и новые линии возвращаются обратно. Когда мы отправляет сообщение, то оно записывается в текстовый файл, как новая линия.

<?php

    $function = $_POST['function'];

    $log = array();

    switch($function) {

       case('getState'):
           if (file_exists('chat.txt')) {
               $lines = file('chat.txt');
           }
           $log['state'] = count($lines);
           break;  

       case('update'):
          $state = $_POST['state'];
          if (file_exists('chat.txt')) {
             $lines = file('chat.txt');
          }
          $count =  count($lines);
          if ($state == $count){
             $log['state'] = $state;
             $log['text'] = false;
          } else {
             $text= array();
             $log['state'] = $state + count($lines) - $state;
             foreach ($lines as $line_num => $line) {
                 if ($line_num >= $state){
                       $text[] =  $line = str_replace("\n", "", $line);
                 }
             }
             $log['text'] = $text;
          }

          break;

       case('send'):
            $nickname = htmlentities(strip_tags($_POST['nickname']));
         $reg_exUrl = "/(http|https|ftp|ftps)\:\/\/[a-zA-Z0-9\-\.]+\.[a-zA-Z]{2,3}(\/\S*)?/";
         $message = htmlentities(strip_tags($_POST['message']));
         if (($message) != "\n") {
           if (preg_match($reg_exUrl, $message, $url)) {
              $message = preg_replace($reg_exUrl, '<a href="'.$url[0].'" target="_blank">'.$url[0].'</a>', $message);
           }
              fwrite(fopen('chat.txt', 'a'), "<span>". $nickname . "</span>" . $message = str_replace("\n", " ", $message) . "\n");
         }
         break;
    }
    echo json_encode($log);
?>

Возьмемся за дело

Нам потребуется написать немного javascript, иначе праздник так и не начнется. Загрузите jQuery, подгрузите наш «движок», затем выполните несколько действий для того чтобы собрать несколько имен участников чата, чтобы получился разговор.

По ходу дела, давайте настроим ограничитель длины сообщений и присвоим функцию отправки сообщений кнопке return.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="chat.js"></script>
<script type="text/javascript">

  // ask user for name with popup prompt
  var name = prompt("Enter your chat name:", "Guest");

  // default name is 'Guest'
  if (!name || name === ' ') {
    name = "Guest";
  }

  // strip tags
  name = name.replace(/(<([^>]+)>)/ig,"");

  // display name on page
  $("#name-area").html("You are: <span>" + name + "</span>");

  // kick off chat
  var chat =  new Chat();

  $(function() {

     chat.getState();

     // watch textarea for key presses
     $("#sendie").keydown(function(event) {  

         var key = event.which;  

         //all keys including return.
         if (key >= 33) {

             var maxLength = $(this).attr("maxlength");
             var length = this.value.length;  

             // don't allow new content if length is maxed out
             if (length >= maxLength) {
                 event.preventDefault();
             }
         }
                                                                                                     });
     // watch textarea for release of key press
     $('#sendie').keyup(function(e) {  

        if (e.keyCode == 13) {

              var text = $(this).val();
              var maxLength = $(this).attr("maxlength");
              var length = text.length;

              // send
              if (length <= maxLength + 1) {
                chat.send(text, name);
                $(this).val("");
              } else {
                $(this).val(text.substring(0, maxLength));
              }
        }
     });
  });
</script>

Периодическая проверка наличия новых сообщений

Нам потребуется использовать функцию «update» для того, чтобы опрашивать наш текстовый файл на наличие нового текста. Так как нам потребуется регулярный вызов функции update, мы используем javascript-функцию setInterval():

<body onload="setInterval('chat.update()', 1000)">

Полезности

* Посмотреть демо
* Скачать файлы: chat.zip [9,5 Kb] (cкачиваний: 2091)

В живом демо, я записываю и отображаю IP-адреса только ради того, чтобы препятствовать неблагоприятным действиям. Частенько анонимные чаты вызывают у людей желание проявить себя с худшей стороны. Так что, советую и вам записывать IP-адреса, в случае, если в дальнейшем понадобится блокировка того или иного IP.

Заметка: Помните, что данное приложение разработано на PHP, так что вы не сможете просто скачать файлы и запустить их у себя на компьютере, так как вам потребуется запустить локальный PHP-сервер. Также, при загрузке файлов на сервер, не забывайте менять права доступа к файлу «chat.txt», чтобы сервер мог записывать в него данные.

Автор статьи © Kenrick Beckett
Русский перевод © CoolWebmasters.Com 2009
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: общение онлайн
Опубликовал Mysterious Master   Прочитано (раз): 58486   |   Оставлено комментариев: 12
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 11 января 2010 @ 00:26
Написал: новичок — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Интересная штука smile у меня вопрос а что надо сделать чтобы превратить этот чат в подобие ICQ? было бы интересно если бы вы развили эту тему!!!...
Комментарий #2: 12 января 2010 @ 13:43
Написал: Mysterious Master — группа: Администраторы  
На сайте с: 11.07.2009   |   Публикаций: 1491   |   Комментариев: 177
ICQ: --- не указано ---
новичок, если честно - не подскажу smile . Моя специализация - веб-дизайн.
Комментарий #3: 15 января 2010 @ 05:30
Написал: Valekas — группа: Читатели  
На сайте с: 21.08.2009   |   Публикаций: 0   |   Комментариев: 70
ICQ: 572686
новичок, ну чат веб-чаты и icq - Это ведь принципиально разные вещи. В любом (наверное) чате можно выйти в приват и никто не увидит вашей переписки. А второй Icq-сервер открывать толку нет. Один стоит у иудеев, так им весь мир и пользуется, зачем вам еще один такой?


--------------------
Кто говорит, не думая, тот умрет, не болея.
Комментарий #4: 30 апреля 2010 @ 16:27
Написал: новичок — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
ну наверное потому что Я тоже иудей lol
Комментарий #5: 31 мая 2010 @ 17:29
Написал: Николай — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
При использовании функции setInterval у мяен такая проблема при ввыделении текста чата у меян постоянно пропадает курсор ну потомучто он обновляет? как вы этого избежали?
Комментарий #6: 3 ноября 2010 @ 16:34
Написал: asandp — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
А почему у меня кирилицу не показывает нормально?
Идей просто отличная, мне оч понравилась, но вот этот один недостаток... оч обидно :'(
Комментарий #7: 4 марта 2011 @ 12:34
Написал: privat1 — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
А почему у меня кирилицу не показывает нормально?
Идей просто отличная, мне оч понравилась, но вот этот один недостаток... оч обидно :'(
Комментарий #8: 26 апреля 2011 @ 17:41
Написал: Drofa — группа: Читатели  
На сайте с: 1.10.2010   |   Публикаций: 0   |   Комментариев: 11
ICQ: 643208630
Побольше бы таких плюшек. Спасибо ребятам за их работу ,все самое интересное здесь в одном месте. Удачи.
winked
Комментарий #9: 28 октября 2011 @ 10:18
Написал: Сергей — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Зачем в JS бесполезная переменная file, которая отсылается каждый раз?
Комментарий #10: 6 ноября 2011 @ 16:42
Написал: stustinsstodo — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Балин, вот это да...:(
Комментарий #11: 10 декабря 2011 @ 20:22
Написал: Павел — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Тут недостаток с русскими буквами, сообщения выше нельзя прочитать потому что скрол л всегда опускается вниз, и
// display name on page
$("#name-area").html("You are: <span>" + name + "</span>");
не работает, видимо по тому что такого объекта ещё нет.

Первую проблему я исправил кодированием и декодированием в эескейп последовательности. а последнюю прописал в онлайд $("#name-area").html("You are: <span>" + name + "</span>");
Комментарий #12: 25 января 2014 @ 09:32
Написал: Winston — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
есть аналог setInterval? а вдруг на странице будет 1000 человек, сервер поляжет и все
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица США
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Ноябрь 2017    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
27282930