прокрутка сообщений чата

[mikello]

Есть небольшой чат на Ajax.

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;
    }

    /* Для CSS 3 */
    .r4 {
    -moz-border-radius: 4px;
    -khtml-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    }

ajax.php:

<?php
// настройки для подключения к MySQl
$config = array('hostname' => 'localhost', 'username' => 'root', 'password' => '', 'dbname' => 'mysql');

// подключаемся к 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'], 0, 200); // обрезаем до 200 символов
    $name = htmlspecialchars($name); // заменяем опасные теги (<h1>,<br>, и прочие) на безопасные
    $name = mysql_real_escape_string($name); // функция экранирует все спец-символы в unescaped_string , вследствие чего, её можно безопасно использовать в mysql_query()

    $text = substr($_POST['text'], 0, 200); // обрезаем до 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");

    // проверяем есть ли какие-нибудь новые сообщения
    if (mysql_num_rows($query) > 0) {
    // начинаем формировать 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;"; // запишем номер последнего полученного сообщения, что бы в следующий раз начать загрузку с этого сообщения

    // отправляем полученный код пользователю, где он будет выполнен 
    echo $js;
    }
}

?>

[mikello]

index.php:

<!DOCTYPE HTML>
    <html>
    <head>
        <title>PhpAjaxChat</title>
        <!-- У нас всё работает в UTF-8 -->
        <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="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

        <!-- Сам код нашего чата -->
        <script type="text/javascript">

            $(document).ready(function () {
		
		$("#pac_form").submit(Send); // вешаем на форму с именем и сообщением событие которое срабатывает когда нажата кнопка "Отправить" или "Enter"
                Load(1);
                $("#pac_text").focus(); // по поле ввода сообщения ставим фокус
                setInterval("Load();", 1000); // создаём таймер который будет вызывать загрузку сообщений каждые 2 секунды (2000 миллисекунд)
            });

	    var last_message_id = 0; // номер последнего сообщения, что получил пользователь
            var load_in_process = false; // можем ли мы выполнять сейчас загрузку сообщений. Сначала стоит false, что значит - да, можем

            // Функция для отправки сообщения
            function Send() {
              
              $.post("ajax.php",
                        {
                            act: "send",  // указываем скрипту, что мы отправляем новое сообщение и его нужно записать
                            name: $("#pac_name").val(), // имя пользователя
                            text: $("#pac_text").val() //  сам текст сообщения
                        },
                        Load(1)) // по завершению отправки вызываем функцию загрузки новых сообщений Load()

                $("#pac_text").val(""); // очистим поле ввода сообщения
                $("#pac_text").focus(); // и поставим на него фокус
                return false; // очень важно из Send() вернуть false. Если этого не сделать то произойдёт отправка нашей формы, те страница перезагрузится
            }

            
            // Функция для загрузки сообщений
            function Load(scroll) {
                 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 код, который мы должны выполнить
			if(scroll==1)
		         {
			    $(".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>

В index.php при нажатии на кнопку Отправить происходит прокрутка сообщений чата до предпоследнего. Как сделать, чтобы прокрутка происходила до последнего сообщения ?

[рони]

mikello,
а где функция, которая выполняет result?

[mikello]

Её никогда и не было, все и так работает

[mikello]

Напишите, если не трудно, как она должна выглядеть, пока не соображу

[Nexus]

Её никогда и не было, все и так работает

It's magic.

а где функция, которая выполняет result?

Это делает, скорее всего, сам jq, т.к. сервер в заголовках говорит, что контент - "text/javascript".

[рони]

тогда перенесите прокрутку в этот result, синтаксис не знаю
$js .= "last_message_id = $last_message_id;"; // запишем номер последнего полученного сообщения, что бы в следующий раз начать загрузку с этого сообщения
сюда $(".chat").scrollTop($(".chat").get(0).scrollHeigh t);//
// отправляем полученный код пользователю, где он будет выполнен

[рони]

mikello,
или так

if(scroll==1)
             {
               window.setTimeout(function() {
       $(".chat").scrollTop($(".chat").get(0).scrollHeight);// прокручиваем сообщения вниз
},100)

             }

[mikello]

Все равно прокручивает до предпоследнего сообщения, а не до последнего.

[Nexus]

Все равно прокручивает до предпоследнего сообщения, а не до последнего.

Попробуйте эту строку:

$(".chat").scrollTop($(".chat").get(0).scrollHeight);

заменить на эту:

$(".chat").scrollTop(999999);