В данной статье представлен система чата, которая обладает следующими возможностями:
Система регистрации пользователей.
Интерфейс чата использует jQuery для переключения к последенему сообщению.
Упорядоченная внутрення структура кода. Все библиотеки содержатся в папке inc, все скрипты JavaScript помещены в папку js, все файлы связанные с шаблоном находятся в папке templates. Структура классов также упорядочена: есть класс для работы с базой данных, класс для системы регистрации пользователя, класс чата.
Код имеет некоторый уровень безопасности. Примером может служить использование функции process_db_input в классе базы данных.
Шаг 1. HTML
Шаблон для формы ввода текста в чат:
templates/chat_input.html
<form class="submit_form" method="post" action="" target="chat_res">
<div><input type="text" name="s_message" /><input type="submit" value="Say" name="s_say" /></div>
</form>
<div>Вы можете ввести что-нибудь в чат:</div>
<iframe name="chat_res" style="display:none;"></iframe>
Шаблон для формы регистрации пользователя:
templates/login_form.html
<form class="login_form" method="post" action="">
<div>Имя пользователя: <input type="text" name="username" /></div>
<div>Пароль: <input type="password" name="password" /></div>
<div><input type="submit" value="Login" name="Login" /></div>
</form>
<div>Вы можете использовать имя пользователя "User1" или "User2" и пароль "qwerty" для входа в систему</div>
<hr />
Шаг 2. CSS
templates/css/styles.css
.login_form {
border: 1px solid #AAA;
padding:10px;
}
h3 {margin-top:3px;}
.chat_main {
border:1px solid #AAA;
-moz-box-shadow:0 0 10px #ccc;
-webkit-box-shadow: 0 0 10px #ccc;
width:350px;
padding:10px;
background:#f3f3f3;
}
.message {
border:1px solid #AAA;
margin:4px;
padding:5px;
-moz-border-radius:7px;
-webkit-border-radius:7px;
background:#ffffff;
}
.textf {-moz-box-shadow:0 0 10px #CCCCCC;
-webkit-box-shadow:0 0 10px #CCCCCC;
border:1px solid #CCCCCC;
height:40px;}
.submit {
-moz-border-radius:7px;
-webkit-border-radius:7px;
background:#F3F3F3;
border:1px solid #CCCCCC;
font-size:16px;
font-weight:bold;
height:35px;
margin-left:10px;
padding:5px;
}
.message span {
font-size:10px;
color:#888;
margin-left:10px;
}
.submit_form {
margin:10px 0px;
}
Шаг 3. SQL
Нужно выполнить следующие запросы SQL для базы данных, на которой Вы будете тренироваться:
CREATE TABLE `s_ajax_chat_messages` (
`id` INT( 11 ) NOT NULL AUTO_INCREMENT ,
`member_id` INT( 11 ) NOT NULL ,
`member_name` VARCHAR( 255 ) NOT NULL ,
`message` VARCHAR( 255 ) NOT NULL ,
`when` INT( 11 ) NOT NULL ,
PRIMARY KEY ( `id` )
) ENGINE=MyISAM DEFAULT CHARSET=utf8;
CREATE TABLE `s_members` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(255) NOT NULL,
`pass` varchar(40) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;
INSERT INTO `s_members` (`id`, `name`, `pass`) VALUES
(NULL, 'User1', 'd8578edf8458ce06fbc5bb76a58c5ca4'),
(NULL, 'User2', 'd8578edf8458ce06fbc5bb76a58c5ca4');
Шаг 4. JavaScript
js/main.js
$(function() {
getMessages = function() {
var self = this;
var _sRandom = Math.random();
$.getJSON('index.php?action=get_last_messages' + '&_r=' + _sRandom, function(data){
if(data.messages) {
$('.chat_main').html(data.messages);
}
// Запускаем снова;
setTimeout(function(){
getMessages();
}, 5000);
});
}
getMessages();
});
js/jquery-1.4.2.min.js
Это библиотека jQuery. Она всегда доступна для скачивания.
Шаг 5. PHP
index.php
<?php
// Устанавливаем уровень контроля ошибок
if (version_compare(phpversion(), "5.3.0", ">=") == 1)
error_reporting(E_ALL & ~E_NOTICE & ~E_DEPRECATED);
else
error_reporting(E_ALL & ~E_NOTICE);
require_once('inc/db.inc.php');
require_once('inc/login.inc.php');
require_once('inc/ajx_chat.inc.php');
if ($_REQUEST['action'] == 'get_last_messages') {
$sChatMessages = $GLOBALS['AjaxChat']->getMessages(true);
require_once('inc/Services_JSON.php');
$oJson = new Services_JSON();
echo $oJson->encode(array('messages' => $sChatMessages));
exit;
}
// Выводим секцию ввода логина и пароля
echo $GLOBALS['oSimpleLoginSystem']->getLoginBox();
// Выводим включение необходимых внешних файлов
echo '<link type="text/css" rel="stylesheet" href="templates/css/styles.css" />';
echo '<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>';
echo '<script type="text/javascript" src="js/main.js"></script>';
// Выводим сообщения чата
$sChatMessages = $GLOBALS['AjaxChat']->getMessages();
// Выводим форму ввода + принимаем введенный текст
$sChatInputForm = 'Нужно войти в систему прежде, чем можно будет использовать ее';
if ($GLOBALS['bLoggedIn']) {
$sChatInputForm = $GLOBALS['AjaxChat']->getInputForm();
$GLOBALS['AjaxChat']->acceptMessages();
}
echo $sChatMessages . $sChatInputForm;
require_once('templates/footer.html');
?>
inc/ajx_chat.inc.php
<?php
/**
* Простой класс чата AJAX
*/
class SimpleAjaxyChat {
/**
* Конструктор
*/
function SimpleAjaxyChat() {}
/**
* Добавляем введенное сообщение в базу данных
*/
function acceptMessages() {
$sUsername = $GLOBALS['aLMemInfo']['name'];
$iUserID = (int)$GLOBALS['aLMemInfo']['id'];
if($sUsername && isset($_POST['s_message']) && $_POST['s_message'] != '') {
$sMessage = $GLOBALS['MySQL']->process_db_input($_POST['s_message'], A_TAGS_STRIP);
if ($sMessage != '') {
$GLOBALS['MySQL']->res("INSERT INTO `s_ajax_chat_messages` SET `member_id`='{$iUserID}', `member_name`='{$sUsername}', `message`='{$sMessage}', `when`=UNIX_TIMESTAMP()");
}
}
}
/**
* Выводим форму ввода текста
*/
function getInputForm() {
ob_start();
require_once('templates/chat_input.html');
return ob_get_clean();
}
/**
* Возвращаем 15 последних сообщений
*/
function getMessages($bOnlyMessages = false) {
$aMessages = $GLOBALS['MySQL']->getAll("SELECT `s_ajax_chat_messages`.*, `s_members`.`name`, UNIX_TIMESTAMP()-`s_ajax_chat_messages`.`when` AS 'diff' FROM `s_ajax_chat_messages` INNER JOIN `s_members` ON `s_members`.`id` = `s_ajax_chat_messages`.`member_id` ORDER BY `id` DESC LIMIT 15");
$sMessages = '';
// Выбираем сообщения из базы
foreach ($aMessages as $iID => $aMessage) {
$sExStyles = $sExJS = '';
$iDiff = (int)$aMessage['diff'];
if ($iDiff < 7) {
$sExStyles = 'style="display:none;"';
$sExJS = "<script> $('#message_{$aMessage['id']}').slideToggle('slow'); </script>";
}
$sWhen = date("H:i:s", $aMessage['when']);
$sMessages .= '<div class="message" id="message_'.$aMessage['id'].'" '.$sExStyles.'>' . $aMessage['name'] . ': ' . $aMessage['message'] . '<span>(' . $sWhen . ')</span></div>' . $sExJS;
}
if ($bOnlyMessages) return $sMessages;
return '<h3>Ajaxy Chat</h3><div class="chat_main">' . $sMessages . '</div>';
}
}
$GLOBALS['AjaxChat'] = new SimpleAjaxyChat();
?>
inc/db.inc.php, inc/login.inc.php, inc/Services_JSON.php
Широко используемы классы. Доступны для скачиваня в интернете.