[Статья] Создание PHP-AJAX чата

*SaT* · 22 Фев 2010

Приветствую!

Эта статья для тех кто желает сам сделать свой чат на php с применением ajax. В ней я расскажу о том как самому сделать простой чат.

Необходимые знания:

Начальные знания в php. Такие как: Как подключиться к базе данных mysql?
Начальные знания в html и css.
Начальные знания в 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`)
);

В этой таблице у нас будут храниться сообщения чата.

id – номер сообщения, он должен быть помечен как AUTO_INCREMENT для того что бы для каждого сообщения создавался уникальный индекс.
name – имя пользователя отправившего сообщение
text – само сообщение

Можно так же расширить список полей, например время сообщения, и так далее.
Теперь приступим к созданию клиентской части чата. Она у нас будет реализована в файле index.php:

HTML:

<!-- Указываем DOCTYPE -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<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="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:

HTML:

* {
        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:

<?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'], 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 LIMIT 10");
 
        // проверяем есть ли какие-нибудь новые сообщения
        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;"; // запишем номер последнего полученного сообщения, что бы в следующий раз начать загрузку с этого сообщения
 
                // отправляем полученный код пользователю, где он будет выполнен при помощи функции eval()
                echo $js;
        }
}
?>

Чат готов!

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

[Статья] Создание PHP-AJAX чата

SaT

Местный житель

Вложения

[Статья] Создание PHP-AJAX чата

*SaT*

Местный житель

Вложения

SaT