Он-лайн чат

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

Рассказать друзьям:


Оценить:
(Пока оценок нет)

Он-лайн чат: 4 комментария

  1. Спасибо за скрипт, но было бы очень здорово, если бы Вы размещали на сайте пример выполнения кода.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*

code