Чат на php, mysql, ajax

      Комментарии к записи Чат на php, mysql, ajax отключены

Помечено: , , ,

В этой теме 0 ответов, 1 участник, последнее обновление  Васильев Владимир Сергеевич 4 мес. назад.

  • Автор
    Сообщения
  • #3696

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

    Ну для начала вам нужно написать регистрацию для будущего чата. Кто не читал статью как это делать, то вот она «Система регистрации на сайте«. Внимание: при создании регистрации сделайте БД с именем chat.

    Теперь когда пользователи могут регистрироваться у нас в чате, приступим к написанию самого скрипта для обмена сообщениями на сайте. У нас есть страница index.php, то есть главная. Там после строки:
    echo "<a href='exit.php'>Выход</a>";
    Вставьте такую строчку:
    include("chat.php");
    Этим мы будем подключать файл chat.php на главную. Теперь создайте рядом со всеми файлами (login.php, register.php и т.д. ) файл chat.php.

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

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

    CREATE TABLE  `messages` (
     `id` INT( 5 ) NOT NULL AUTO_INCREMENT ,
     `login` VARCHAR( 200 ) NOT NULL ,
     `message` VARCHAR( 1000 ) NOT NULL ,
    PRIMARY KEY (  `id` )
    );

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

    <!-- Стили для блока с сообщениями!-->
    <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");
    
    	//Функция отправки сообщения
    	function send()
    	{
    		//Считываем сообщение из поля ввода с id mess_to_add
    		var mess=$("#mess_to_send").val();
    		// Отсылаем паметры
           $.ajax({
                    type: "POST",
                    url: "add_mess.php",
                    data:"mess="+mess,
                    // Выводим то что вернул PHP
                    success: function(html)
    				{
    					//Если все успешно, загружаем сообщения
    					load_messes();
    					//Очищаем форму ввода сообщения
    					$("#mess_to_send").val('');
                    }
            });
    	}
    
    	//Функция загрузки сообщений
    	function load_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. Вот код этого файла:

    <?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() на вывод. Вот он:

    <?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'].": </font></b>".$d['message']."<br>";
    }
    ?>

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

    Останется лишь создать БД с именем chat, залить дамп и скрипты. Но, хотел сказать, что такая версия чата очень простая, без наворотов и без защиты от флудеров и т.д.

Для ответа в этой теме необходимо авторизоваться.