Кто нибудь может написать статью про создание простого Ajax чата???? Типа такого: http://melnaron.net/melchat-beta/ или на подобие ( но только не про мини-чат ). Очень хочется написать свой простенький ЧаТ но к сожелению знаний нехватает. Поесни почему хочется свой Чат а не например тот чат пример которого я вам дал, всё просто хочется знать какой код за что отвечает и как его можно будет в дальнейшем модернизировать и т.д. Заранее большое спасибо. --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- А если никто не может написать такую статейку то давайте все вместе разберём чаты Mel-Chat ( демо: http://melnaron.net/melchat-beta/ Офф. сайт: http://melnaron.net/ ) ИЛИ Blueimp-Chat ( демо: http://chat.ecobytes.net/ Офф. сайт: https://blueimp.net/ajax/ ) По деталям ( впишем в код комментарии на русском языке каждой функции чата ) и напишем статейку об одном из чатов, прочитав которую человек будет знать что за код относится к какой функции чата. О чате писать сначала лучше без интеграций к каким либо форумам, CMS и т.д.
Создание PHP-AJAX чата Я нашёл статейку про создание чата: ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ Приветствую! Эта статья для тех кто желает сам сделать свой чат на php с применением ajax. В ней я расскажу о том как самому сделать простой чат. Необходимые знания: Начальные знания в php. Такие как: Как подключиться к базе данных mysql? Начальные знания в html и css. Начальные знания в JavaScript и jQuery. (даже если вы только слышали о jQuery, но не работали с ним) Итак начнём! Для начала создадим новую базу данных в MySQL и выполним SQL запрос: [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`) );[/sql] В этой таблице у нас будут храниться сообщения чата. 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: [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; }[/css] Теперь приступим к созданию серверной части чата 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'] . '» ' . $value['text'] . '</span>");'; // добавить сообщние (<span>Имя » текст сообщения</span>) в наш div } $js .= "last_message_id = $last_message_id;"; // запишем номер последнего полученного сообщения, что бы в следующий раз начать загрузку с этого сообщения // отправляем полученный код пользователю, где он будет выполнен при помощи функции eval() echo $js; } } ?> Чат готов! Скачать чат можно ТУТ. ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ Статью я брал вот отсюда: http://blog.elfet.ru/jquery/php-ajax-chat/ Кто нибудь может написать для этого скрипта авторизацию типа ВХОД ( Ник, Пароль (для тех кто зарегистрирован(регистрация по желанию)) ) РЕГИСТРАЦИЯ ( Ник, Пароль, Подтверждение пароля ).
Кто нибудь может. Но иногда все просто так лень делать и приходится платить за работу. Оплата обсуждается в другом разделе форума.
Уф, я начал писать уже давно, но в связи со многими обстоятельствами статья остановилась на 25%. В принципе, JS часть чата я реальзовал так же, как в статье, которую ты нашел. Думаю, мне смысла писать дальше нет, т.к. этот довольно хорош.
Не, прости, я пас. Вымотался за сегодня. А завтра тоже никак. И потом тоже... Учись программить! К нам пойдешь)