Статья про создиние простого Ajax чата

Тема в разделе "Статьи и Co", создана пользователем *SaT*, 24 сен 2009.

Статус темы:
Закрыта.
  1. *SaT*

    *SaT*

    Регистр.:
    19 ноя 2008
    Сообщения:
    241
    Симпатии:
    24
    Кто нибудь может написать статью про создание простого Ajax чата????

    Типа такого: http://melnaron.net/melchat-beta/ или на подобие ( но только не про мини-чат ).



    Очень хочется написать свой простенький ЧаТ но к сожелению знаний нехватает.

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



    Заранее большое спасибо.
     
  2. *SaT*

    *SaT*

    Регистр.:
    19 ноя 2008
    Сообщения:
    241
    Симпатии:
    24
    А если никто не может написать такую статейку то давайте все вместе разберём чаты

    Mel-Chat ( демо: http://melnaron.net/melchat-beta/ Офф. сайт: http://melnaron.net/ )

    ИЛИ

    Blueimp-Chat ( демо: http://chat.ecobytes.net/ Офф. сайт: https://blueimp.net/ajax/ )

    По деталям ( впишем в код комментарии на русском языке каждой функции чата ) и напишем статейку об одном из чатов, прочитав которую человек будет знать что за код относится к какой функции чата.



    О чате писать сначала лучше без интеграций к каким либо форумам, CMS и т.д.
     
  3. *SaT*

    *SaT*

    Регистр.:
    19 ноя 2008
    Сообщения:
    241
    Симпатии:
    24
    Ребят, если никто не хочет писать статью то давайте хотя бы все вместе напишем какое нибудь дополнение к чату Blueimp-Chat, движок этого чата очень гибкий я думаю что для этого чата можно написать какую нибудь простенькую админку, регистрацию, анкеты например для пользователей или ещё что нибудь.

    Т.К. у меня не хватает опыта в web программирование я прошу помощи.

    А со временем я думаю что у меня получится написать статью о чате.
     
  4. *SaT*

    *SaT*

    Регистр.:
    19 ноя 2008
    Сообщения:
    241
    Симпатии:
    24
    Создание PHP-AJAX чата

    Я нашёл статейку про создание чата:
    ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
    Приветствую!
    Эта статья для тех кто желает сам сделать свой чат на php с применением ajax. В ней я расскажу о том как самому сделать простой чат.
    [​IMG]
    Необходимые знания:
    1. Начальные знания в php. Такие как: Как подключиться к базе данных mysql?
    2. Начальные знания в html и css.
    3. Начальные знания в JavaScript и jQuery. (даже если вы только слышали о jQuery, но не работали с ним)
    Итак начнём!
    Для начала создадим новую базу данных в MySQL и выполним SQL запрос:
    Код:
    CREATE TABLE `messages` (
      `id` int(5) NOT NULL AUTO_INCREMENT,
      `name` char(255) character SET utf8 NOT NULL,
      `text` text character SET utf8,
      PRIMARY KEY  (`id`)
    );
    В этой таблице у нас будут храниться сообщения чата.
    1. id – номер сообщения, он должен быть помечен как AUTO_INCREMENT для того что бы для каждого сообщения создавался уникальный индекс.
    2. name – имя пользователя отправившего сообщение
    3. text – само сообщение
    Можно так же расширить список полей, например время сообщения, и так далее.
    Теперь приступим к созданию клиентской части чата. Она у нас будет реализована в файле index.php:
    PHP:
    <!-- Указываем DOCTYPE -->
    <!
    DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <
    html>
    <
    head>
    <
    title>PhpAjaxChat</title>
    <!-- 
    У нас всё работает в UTF--->
    <
    meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <!-- 
    Загружаем стили для чата -->
    <
    link rel="stylesheet" type="text/css" media="screen" href="css.css" />
    <!-- 
    Подключаем jQuery -->
    <
    script type="text/javascript" src="jquery.js"></script>
    <!-- Сам код нашего чата -->
    <script type="text/javascript">
    $(document).ready(function () {
        $("#pac_form").submit(Send); // вешаем на форму с именем и сообщением событие которое срабатывает кодга нажата кнопка "Отправить" или "Enter"
        $("#pac_text").focus(); // по поле ввода сообщения ставим фокус
        setInterval("Load();", 2000); // создаём таймер который будет вызывать загрузку сообщений каждые 2 секунды (2000 миллисекунд)
    });   
    // Функция для отправки сообщения
    function Send() {
        // Выполняем запрос к серверу с помощью jquery ajax: $.post(адрес, {параметры запроса}, функция которая вызывается по завершению запроса)
        $.post("ajax.php", 
            {
            act: "send",  // указываем скрипту, что мы отправляем новое сообщение и его нужно записать
            name: $("#pac_name").val(), // имя пользователя
            text: $("#pac_text").val() //  сам текст сообщения
        },
         Load ); // по завершению отправки вызываем функцию загрузки новых сообщений Load()
        $("#pac_text").val(""); // очистим поле ввода сообщения
        $("#pac_text").focus(); // и поставим на него фокус
        return false; // очень важно из Send() вернуть false. Если этого не сделать то произойдёт отправка нашей формы, те страница перезагрузится
    }
    var last_message_id = 0; // номер последнего сообщения, что получил пользователь
    var load_in_process = false; // можем ли мы выполнять сейчас загрузку сообщений. Сначала стоит false, что значит - да, можем
    // Функция для загрузки сообщений
    function Load() {
        // Проверяем можем ли мы загружать сообщения. Это сделано для того, чтобы мы не начали загрузку заново, если старая загрузка ещё не закончилась.
        if(!load_in_process)
        {
                load_in_process = true; // загрузка началась
                // отсылаем запрос серверу, который вернёт нам javascript
                $.post("ajax.php",
                {
                      act: "load", // указываем на то что это загрузка сообщений
                      last: last_message_id, // передаём номер последнего сообщения который получил пользователь в прошлую загрузку
                      rand: (new Date()).getTime()
                },
                   function (result) { // в эту функцию в качестве параметра передаётся javascript код, который мы должны выполнить
                        eval(result); // выполняем скрипт полученный от сервера
                        $(".chat").scrollTop($(".chat").get(0).scrollHeight); // прокручиваем сообщения вниз
                        load_in_process = false; // говорим что загрузка закончилась, можем теперь начать новую загрузку
                });
        }
    }
    </script>
    <body>
    <div style="padding: 100px;">
    <h1>Php Ajax Chat</h1>
    <!-- Вот в этих 2-х div-ах будут идти наши сообщения из чата -->
    <div class="chat r4">
    <div id="chat_area"><!-- Сюда мы будем добавлять новые сообщения --></div>
    </div>
    <form id="pac_form" action=""><!-- Наша форма с именем, сообщением и кнопкой для отправки -->
    <table style="width: 100%;">
            <tr>
                    <td>Имя:</td>
                    <td>Сообщение:</td>
                    <td></td>
            </tr>
            <tr>
                    <!-- Поле ввода имени -->
                    <td><input type="text" id="pac_name" class="r4" value="Гость"></td>
                    <!-- Поле ввода сообщения -->
                    <td style="width: 80%;"><input type="text" id="pac_text" class="r4" value=""></td>
                    <!-- Кнопка "Отправить" -->
                    <td><input type="submit" value="Отправить"></td>
            </tr>
    </table>
    </form>
    </div>
    </body>
    </html>
    css.css:
    Код:
    * {
            margin: 0;
            padding: 0;
    }
    body {
            font: normal normal normal 16px "Trebuchet MS", Arial, Times;
            color: #000000;
    }
    .chat {
            height: 500px;
            overflow: auto; 
            position: relative; 
            text-align: left;
            border: solid #818181 1px;
    }
    .chat div {
            position: absolute; 
    }
    .chat span {
            display: block;
    }
    input[type=text],textarea {
            width: 100%;
            font: normal normal normal 16px "Trebuchet MS", Arial, Times;
            border: solid #818181 1px;
    }
    .r4 {
            -moz-border-radius: 4px;
            -khtml-border-radius: 4px;
            -webkit-border-radius: 4px;
            border-radius: 4px;
    }
    Теперь приступим к созданию серверной части чата ajax.php:
    PHP:
    <?php
    // настройки для подключения к MySQl
    $config = array( 'hostname' => 'localhost''username' => 'root''password' => '''dbname' => 'pacdb' );
    // подключаемся к MySQL, если не вышло то выходим
    if( !mysql_connect($config['hostname'], $config['username'], $config['password']) )
    {
            exit();
    }
    // Выбираем базу данных, если не вышло то выходим
    if( !mysql_select_db($config['dbname']) )
    {
            exit();
    }
    mysql_query("SET NAMES 'utf8'"); // говорим MySQl'у то что мы будем работать с UTF-8
    Header("Cache-Control: no-cache, must-revalidate"); // говорим браузеру что-бы он не кешировал эту страницу
    Header("Pragma: no-cache");
    Header("Content-Type: text/javascript; charset=utf-8"); // говорим браузеру что это javascript в кодировке UTF-8
    // проверяем есть ли переменная act (send или load), которая указываем нам что делать
    if( isset($_POST['act']) )
    {
            
    // $_POST['act'] - существует
            
    switch ($_POST['act'])
            {
                    case 
    "send" // если она равняется send, вызываем функцию Send()
                            
    Send();
                            break;
                    case 
    "load" // если она равняется load, вызываем функцию Load()
                            
    Load();
                            break;
                    default : 
    // если ни тому и не другому  - выходим
                            
    exit();
            }
    }
    // Функция выполняем сохранение сообщения в базе данных
    function Send()
    {
            
    // тут мы получили две переменные переданные нашим java-скриптом при помощи ajax
            // это:  $_POST['name'] - имя пользователя
            // и $_POST['text'] - сообщение
            
    $name substr($_POST['name'], 0200); // обрезаем до 200 символов
            
    $name htmlspecialchars($name); // заменяем опасные теги (<h1>,<br>, и прочие) на безопасные
            
    $name mysql_real_escape_string($name); // функция экранирует все спец-символы в unescaped_string , вследствие чего, её можно безопасно использовать в mysql_query()
            
    $text substr($_POST['text'], 0200); // обрезаем до 200 символов
            
    $text htmlspecialchars($text); // заменяем опасные теги (<h1>,<br>, и прочие) на безопасные
            
    $text mysql_real_escape_string($text); // функция экранирует все спец-символы в unescaped_string , вследствие чего, её можно безопасно использовать в mysql_query()
            // добавляем новую запись в таблицу messages
            
    mysql_query("INSERT INTO messages (name,text) VALUES ('" $name "', '" $text "')");
    }
    // функция выполняем загрузку сообщений из базы данных и отправку их пользователю через ajax виде java-скрипта
    function Load()
    {
            
    // тут мы получили переменную переданную нашим java-скриптом при помощи ajax
            // это:  $_POST['last'] - номер последнего сообщения которое загрузилось у пользователя
            
    $last_message_id intval($_POST['last']); // возвращает целое значение переменной
            // выполняем запрос к базе данных для получения 10 сообщений последних сообщений с номером большим чем $last_message_id
            
    $query mysql_query("SELECT * FROM messages WHERE ( id > $last_message_id ) ORDER BY id DESC LIMIT 10");
            
    // проверяем есть ли какие-нибудь новые сообщения
            
    if( mysql_num_rows($query) > )
            {
                    
    // начинаем формировать javascript который мы передадим клиенту
                    
    $js 'var chat = $("#chat_area");'// получаем "указатель" на div, в который мы добавим новые сообщения
                    // следующий конструкцией мы получаем массив сообщений из нашего запроса
                    
    $messages = array();
                    while ( 
    $row mysql_fetch_array($query) )
                    {
                            
    $messages[] = $row;
                    }
                    
    // записываем номер последнего сообщения
                    // [0] - это вернёт нам первый элемент в массиве $messages, но так как мы выполнили запрос с параметром "DESC" (в обратном порядке),
                    // то это получается номер последнего сообщения в базе данных
                    
    $last_message_id $messages[0]['id'];
                    
    // переворачиваем массив (теперь он в правильном порядке)
                    
    $messages array_reverse($messages);
                    
    // идём по всем элементам массива $messages
                    
    foreach ( $messages as $value )
                    {
                            
    // продолжаем формировать скрипт для отправки пользователю
                            
    $js .= 'chat.append("<span>' $value['name'] . '&raquo; ' $value['text'] . '</span>");'// добавить сообщние (<span>Имя &raquo; текст сообщения</span>) в наш div
                    
    }
                    
    $js .= "last_message_id = $last_message_id;"// запишем номер последнего полученного сообщения, что бы в следующий раз начать загрузку с этого сообщения
                    // отправляем полученный код пользователю, где он будет выполнен при помощи функции eval()
                    
    echo $js;
            }
    }
    ?>
    Чат готов!
    Скачать чат можно тут.
    ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
    Статью я брал вот отсюда: http://blog.elfet.ru/jquery/php-ajax-chat/
    Кто нибудь может написать для этого скрипта авторизацию типа ВХОД ( Ник, Пароль (для тех кто зарегистрирован(регистрация по желанию)) ) РЕГИСТРАЦИЯ ( Ник, Пароль, Подтверждение пароля ).
     
Статус темы:
Закрыта.