Информация к новости
  • Просмотров: 1278
  • Автор: sulicompany
  • Дата: 7-04-2013, 21:05
 (голосов: 0)
7-04-2013, 21:05

Чат на php+mysql+ajax

Категория: Программирование » PHP


Сегодня хочу рассказать и показать как написать чат на php используя технологию ajax и базу данных mysql. Ajax будем использовать для того, чтобы страница при отправке сообщений не перезагружалась.

Скриншот чата который у нас получится=)

Ну для начала вам нужно написать регистрацию для будущего чата. Кто не читал статью как это делать, то вот она.

Внимание! При создании регистрации сделайте БД с именем chat

Теперь когда пользователи могут регистрироваться у нас в чате, приступим к написанию самогоскрипта для обмена сообщениями на сайте.

У нас есть страницаindex.php, то есть главная. Там после строки:

1
echo"<a href='exit.php'>Выход</a>";

Вставьте такую строчку:

1
include("chat.php");

Этим мы будем подключать файл chat.php на главную. Теперь создайте рядом со всеми файлами (login.php, register.php и т.д. ) файл chat.php.

Там у нас будет храниться html-код (то есть каркас) и javascript (JQuery) код, которым мы будем отправлять данные на сервер и каждые 5 секунд подгружать сообщения в div.

В базу данных, помимо таблицы с пользователями (users), добавьте еще такой дамп (это таблица messages в которой мы будем хранить сообщения пользователей):

1
2
3
4
5
6
CREATETABLE`messages` (
 `id` INT( 5 ) NOTNULLAUTO_INCREMENT ,
 `login` VARCHAR( 200 ) NOTNULL,
 `message` VARCHAR( 1000 ) NOTNULL,
PRIMARYKEY(  `id` )
);

Теперь приведу хорошо закомментрированный код файла chat.php:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!-- Стили для блока с сообщениями!-->
<style>
#messages
{
    width:300px;
    height:150px;
    overflow:auto;
    border:1px solid silver;
}
</style>
<!--Подключаем Jquery!-->
<script type="text/javascript"src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
    //Загружаем библиотеку JQuery
    google.load("jquery", "1.3.2");
    google.load("jqueryui", "1.7.2");
    //Функция отправки сообщения
    functionsend()
    {
        //Считываем сообщение из поля ввода с id mess_to_add
        varmess=$("#mess_to_send").val();
        // Отсылаем паметры
       $.ajax({
                type: "POST",
                url: "add_mess.php",
                data:"mess="+mess,
                // Выводим то что вернул PHP
                success: function(html)
                {
                    //Если все успешно, загружаем сообщения
                    load_messes();
                    //Очищаем форму ввода сообщения
                    $("#mess_to_send").val('');
                }
        });
    }
    //Функция загрузки сообщений
    functionload_messes()
    {
        $.ajax({
                type: "POST",
                url:  "load_messes.php",
                data: "req=ok",
                // Выводим то что вернул PHP
                success: function(html)
                {
                    //Очищаем форму ввода
                    $("#messages").empty();
                    //Выводим что вернул нам php
                    $("#messages").append(html);
                    //Прокручиваем блок вниз(если сообщений много)
                    $("#messages").scrollTop(90000);
                }
        });
    }
</script>
<table>
<tr>
<td>
<div id="messages">
</div>
</td>
</tr>
<tr>
<td>
<form action="javascript:send();">
<input type="text"id="mess_to_send">
<input type="button"value="Отправить">
</form>
</td>
</tr>
</table>
<script>
//При загрузке страницы подгружаем сообщения
load_messes();
//Ставим цикл на каждые три секунды
setInterval(load_messes,3000);
</script>

Как вы заметили, в функции добавления сообщений в базу отправляет Ajax запрос файлу add_mess.php , который уже добавит его в таблицу messages.

Вот код этого файла:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?php
//Проверям есть ли переменные на добавление
if(isset($_POST['mess']) && $_POST['mess']!=""&& $_POST['mess']!=" ")
{
    //Стартуем сессию для записи логина пользователя
    session_start();
    //Принимаем переменную сообщения
    $mess=$_POST['mess'];
    //Переменная с логином пользователя
    $login=$_SESSION['login'];
    //Подключаемся к базе
    include("bd.php");
    //Добавляем все в таблицу
    $res=mysql_query("INSERT INTO `messages` (`login`,`message`) VALUES ('$login','$mess') ");
}
?>

Теперь последний код нашего чата, это php скрипт, который достает данные из БД и отдает их функции load_messes() на вывод. Вот он:

1
2
3
4
5
6
7
8
9
10
11
<?php
//Подключаемся к БД
include("bd.php");
//Выбираем все сообщения
$res=mysql_query("SELECT * FROM `messages` ORDER BY `id` ");
//Выводим все сообщения на экран
while($d=mysql_fetch_array($res))
{  
    echo "<b><font color='orange'>".$d['login'].":&nbsp;</font></b>".$d['message']."<br>";
}
?>

Вот и все скрипты закончены. Теперь осталось лишь все собрать. А для особо ленивых, выложу архив со всеми скриптами и дампом базы данных;)

Останется лишь создать БД с именем chat, залить дамп и скрипты.