Сегодня статья о создании чата.
Я до сегодняшнего дня ни разу не пробовал делать подобные вещи и поэтому это чистая импровизация, поэтому могут быть баги(если будут попадаться в процессе использования этого чата, я буду добавлять их описание в эту статью).
Смысл работы чата, прост: пишем текст, отправляем его 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-инекций, тут ни чего не экранируется.