Сегодня статья о создании чата.
Я до сегодняшнего дня ни разу не пробовал делать подобные вещи и поэтому это чистая импровизация, поэтому могут быть баги(если будут попадаться в процессе использования этого чата, я буду добавлять их описание в эту статью).
Смысл работы чата, прост: пишем текст, отправляем его ajax запросом на обработку на сервер и записываем в базу данных. А также каждые 1-3 секунды отсылаем запрос на сервер и проверяем были ли добавлены новые сообщения, если были то выводим их в чате.
Лучше все смотреть в коде, поэтому я приведу код с подробными комментариями.
Форма для чата:
<div style="top:0px;" class="log_div"> <div class="chat_text"> >ЧАТ </div> </div> <form action="service/chat_ajax.php" type="post" id="form_chat"> <div class="chat_input_text"> <input class="input_chat" type="text"> <input class="input_chat_submit" type="submit" value="Отправить"> <input class="name_usr" type="hidden" value="Иван"> <input class="date_time" type="hidden" value=""> </div> </form>
JS код для ajax запросов:
$(document).ready(function(){ // отправка запроса для записи сообщения $('#form_chat').submit(function(){ // получаем необходимые данные var text_msg = $('.input_chat').val(); // текст сообщения $('.input_chat').val(''); // стираем текст var name_usr = $('.name_usr').val(); // имя юзера, храниться в скрытом поле var date_time = $('.date_time').val(); // дата и время отправки последнего сообщения $.ajax({ type: "POST", url: "/service/ajax_chat.php", data: "action=0&text_msg="+text_msg+"&name_usr="+name_usr+"&date_time="+date_time, dataType: "json", success: function(data){ if(data.text_chat){ // если запрос пришел без ошибок $('.chat_text').html(data.text_chat); // обновляем чат $('.chat_text').animate({scrollTop: $('.chat_text').scrollTop()+ 999999}, 1000); // скролим div вниз в котором находится текст чата } } }); return false; }); // устанавливем интервал, через который будет отправляться запрос для получение новых сообщений res = setInterval("getNewMassege();", 3000); }); //функция для проверки новых сообщений function getNewMassege(){ var date_time = $('.date_time').val(); // получаем время последнего сообщения $.ajax({ type: "POST", url: "/service/ajax_chat.php", data: "action=1&date_time="+date_time, dataType: "json", success: function(data){ if(data.text_chat){ $('.chat_text').html(data.text_chat); if(data.date_time != ""){ // если есть новые сообщения выводим их в чате $('.date_time').val(data.date_time); $('.chat_text').animate({scrollTop: $('.chat_text').scrollTop()+ 999999}, 1000); } } } }); }
Теперь код php скрипта, котрый принимает и обрабатывает ajax запросы:
/* * Скрипт для ajax запросов для чата */ // конфиг для бд include('../config.php'); session_start(); // бд конект и некоторых функций для работы с бд include('db_conection.php'); $action = $_POST['action']; $text_msg = $_POST['text_msg']; $name_usr = $_POST['name_usr']; $date_time_post = $_POST['date_time']; /* * $action - действие * 0 - отправить сообщение * 1 - получить актуальные сообщения */ $date_time = date("Y-m-d") . " " . date("H:i:s"); if ($action == 0){ // если запрос для записи нового сообщения, то делаем запись в базу данных setRowDb("INSERT INTO `chat` (`name`, `date`, `text`) VALUES ('".$name_usr."', '".$date_time."', '".$text_msg."');"); } // получаем количество новых записей, которые были сделаны после даты , которая у нас числиться самой новой $countRow = getRowDb("SELECT count(*) FROM `chat` WHERE `date` > '".$date_time_post."';"); if($countRow['count(*)']>0 || $date_time_post ==""){ // если есть новые записи // то выгребаем из бд новые записи $rows = getRowsDb("SELECT * FROM `chat` ORDER BY `date` ASC LIMIT 100;"); $text_chat =""; if($rows){ // просматриваем все строки из бд и приводим их к html виду, чтобы проще было выводить в div foreach($rows as $row){ $text_chat .= ">".$row['name'].": ".$row['text']."<br/>"; // получаем последний id записи $id = $row['id']; } // если в базе данных больше 1000 записей, то // удаление из бд лишних записей(оставляем 100 штук), чтоб не засорять бд if(count($rows)>1000){ $id_d = $id - 100; setRowDb("DELETE FROM `chat` WHERE `id`<".$id_d.";"); } } }else{ $date_time = ""; } //возвращаем ответ в js echo json_encode(array('success' => 'OK', 'text_chat' => $text_chat, 'date_time' => $date_time));
Код скрипта db_conection.php:
$user = "root"; $pass = ""; $db_name = "chat_db"; $host = "localhost"; } //подключение к бд $db_connect = mysql_connect($host, $user, $pass, TRUE); mysql_selectdb($db_name,$db_connect); mysql_set_charset('utf8'); // получение строки function getRowDb($query) { $sql = mysql_query($query) or die(mysql_error()); $row = mysql_fetch_assoc($sql); return $row; } // получение нескольких строк function getRowsDb($query) { $sql = mysql_query($query) or die(mysql_error()); while($r = mysql_fetch_array($sql, MYSQL_ASSOC)){ $rows[] = $r; } return $rows; } function setRowDb($query) { $sql = mysql_query($query) or die(mysql_error()); return $sql; }
И sql код для создание необходимой таблицы в бд
CREATE TABLE `chat` ( `id` INT(10) NOT NULL AUTO_INCREMENT, `name` VARCHAR(50) NULL DEFAULT NULL, `date` DATETIME NULL DEFAULT NULL, `text` VARCHAR(255) NULL DEFAULT NULL, PRIMARY KEY (`id`) ) COLLATE='utf8_general_ci' ENGINE=InnoDB;
Вот и все. Только хочу обратить внимание, что такой чат очень уязвим для SQL-инекций, тут ни чего не экранируется. Об этом можно почитать в этой статье
Спасибо за скрипт, но было бы очень здорово, если бы Вы размещали на сайте пример выполнения кода.
Возьму на заметку, хорошая идея
Не работает!
Что именно не работает? Какие ошибки?