Пишем чат на РНР - Веб программирование - Программирование - Каталог статей - ATL

Так в чем же дело?! Давайте напишем свой собственный чат, который будет отвечать всем вашим требованиям, будет быстрым и компактным.
Теперь давайте определимся, что должен уметь наш чат.
Во-первых, он должен регистрировать новых посетителей и обеспечивать вход уже зарегистрированным.
Во-вторых, он должен уметь вставлять смайлики – эти веселые маленькие картинки, без которых сегодня не обходится большинство чатов.
В-третьих, пользователи должны иметь возможность общаться в привате, т.е. лично друг с другом, чтобы остальные посетители не видели их разговора (естественно, кроме администратора J )

Теперь определимся, какие технологии мы будем использовать при разработке чата. Писать будем на PHP, а для регистрации пользователей информацию о них будем хранить в базе данных MySQL. Сам же текст болталки (болталкой назовем информацию, которой обмениваются посетители) будет находиться в текстовом файле.

Для начала напишем простенький чат, без привата и администраторских функций, в котором посетители могут регистрироваться, общаться друг с другом, вставлять смайлики.

Теперь я уточню еще несколько деталей, которые необходимо обсудить еще до написания кода.

В текстовом файле chat.txt (в нем будет храниться наша «болталка») должно находиться не более 20 последних сообщений (для уменьшения трафика и ускорения загрузки чата).

При входе в чат посетитель должен будет ввести логин (он же ник) и пароль, причем если такой логин уже хранится в нашей таблице базы данных, то скрипт должен проверить, верен ли пароль, и если верен, то перенаправить посетителя в чат, а если неверен – вернуть на главную страницу для повторного ввода логина и пароля и сообщить ему, что пароль неверен. Если же такого логина в таблице нет, то нужно зарегистрировать посетителя, т.е. добавить в таблицу данные о нем (логин и пароль). Но отдельной страницы для регистрации нового посетителя (далее будем называть посетителей «чатниками» J) делать не нужно, иначе необходимость производить какие-то дополнительные действия для входа в чат отпугнет довольно значительную часть посетителей.

Кроме того, если вы планируете создать небольшой чат, к примеру, для общения с друзьями, то было бы неплохо записывать все, что произносилось в чате, в отдельный файл (назовем его history.txt). В дальнейшем можно будет произвести некоторые действия над этим файлом (к примеру, каждый день в 12.00 отсылать содержимое этого файла вам на e-mail, а после этого очищать его). Но это будем делать после того, как наш чат уже будет работать.

Теперь определимся, какие файлы нужно создать для работы чата. Ниже приведен полный список файлов чата с описанием, для чего нужен тот или иной файл.

index.php – главная страница чата. Выводит на экран форму для ввода логина и пароля, а также информацию, скоько сейчас человек в чате (и возможно, последние 20 реплик)

chat.php – ну, а это наш самый главный и важный файл. Что он только не делает: проверяет посетителей на верность пары логин-пароль, регистрирует посетителе, а кроме того, подключает к себе довольно большое количество описанных ниже РНР-файлов.

chat.inc.php – это РНР-файл содержит в себе HTML-документ с фреймами, без которых не обходится не один уважающий себя чат, а также небольшой кусок РНР-кода.

send.php – этот файл выводит на экран форму с текстовыми полями для ввода реплик, вставки смайликов и прочих полезных вещей, а также поле для выбора собеседника (либо для обения в «болталке», либо для общения в «привате»).

smiles.php – тут и так все понятно. Этот файл будет в цикле выводить смайлики на экран и генерировать JavaScript-код для вставки кода смайлика в строку реплики чатника.

add.php – этот файл будет оформлять реплики чатников и вставлять их в файл chat.txt.

del.php – при выходе чатника из чата удаляет чатника из списка активных (т.е. в данный момент обсуждающих свои важные проблемы и находящихся в чате).

includer.php – содержит в себе 3 переменных: $myserver, $mylogin, $mypassword. Переменная $myserver указывает сервер, на котором находится БД (обычно это - localhost), $mylogin и $mypassword – логин и пароль для подключения к БД.

text.php – РНР-файл, отвечающий за обновление информации в «болталке».

users.php – РНР-файл, который выводит на экран список находящихся в данный момент в чате посетителей, а также генерирует JavaScript-код для вставки ника выбранного чатника в окошко ввода реплики.

logo.html – файл, выводящий логотип чата на экран.

chat.txt – а это «болталка» чата, в ней хранятся последние 20 реплик.

history.txt – его назначение уже было описано выше.

chat_users.sql – SQL-файл, содержащий структуру таблицы chat_users

style.css – таблица стилей, используемая в чате.

1…7.gif – 7 рисунков-смайликов, используемых в чате. (кол-во на ваше усмотрение)

А теперь нужно упомянуть один момент, без объяснения которого никак нельзя обойтись.

Как обычно люди уходят из чата? Правильно, редко кто нажимает на кнопку выход, обычно просто закрывают окно с чатом. Нам нужно отслеживать эти моменты, чтобы вовремя убрать ушедших чатников из списка находящихся в чате. А, допустим, у человека что-то случилось и он обновляет страницу. Вплне реальная ситуация. Так вот, в обоих этих случаях происходит событие Unload. Его можно отследить при помощи JavaScript-обработчика onUnload. Это событие происходит в текущем окне непосредственно перед выгрузкой документа. Так вот, при каждом из вышеупомянутых действий посетителя надо должным образом отреагировать: если чатник выходит из чата, то удаляем его из списка активных посетителей, а если просто обновляет - то ничего не делаем. Но у нас же на разные действия реагирует один и тот же обработчик! Как же решить эту проблему? Об этом я подробнее расскажу при описании работы файлов chat.inc.php, send.php и del.php.
Если Вы хотите посмотреть, как работает описанный в статье чат, можете зайти на http://chat.micro.org.ua и убедиться, что все описанное в этой статье работает J.

Ну, а теперь, когда вроде бы все вопросы выяснены, можно приступать к непосредственному набору кода. начала я буду писать полный код файла, а потом буду подробно описывать, что он делает. А перед набором кода создайте пустые файлы chat.txt и history.txt.
Кроме того, в тот же каталог, в котором у вас находится чат, положите 7 gif-файлов – это наши смайлики. Я думаю, что вы сможете найти 7 смайликов в Интернете J, но все же если у вас нет смайликов, можете взять их с http://chat.micro.org.ua.
Теперь создайте таблицу стилей style.css, она понадобится нам в дальнейшем для оформления чата, хотя если вы не хотите использовать CSS, можете не создавать ее. Если вы все же решили использовать CSS, создайте два класса: normal и title, они нам еще пригодятся J.
Теперь нам нужен логотип чата. У меня логотипом является слово «MICRO»,написанное на синем фоне золотыми буквами высотой 55 и шириной 195 пикселей. Этот момент оставляю на Ваше усмотрение.
Ну, а теперь – открывайте свой любимый РНР-редактор (надеюсь, что это не блокнот J) и начинайте… Я начну со второстепенных по своей важности файлов. Чтобы потом не отвлекаться на их описание во время объяснения работы основных файлов.

Для начала нужно создать таблицу «chat_users» в базе данных. Итак, вот ее код:

Code

CREATE TABLE chat_users (
id int(10) NOT NULL auto_increment,
login text NOT NULL,
password text NOT NULL,
privat text NOT NULL,
active tinyint(2) NOT NULL default '0',
PRIMARY KEY (id)
) TYPE=MyISAM;

Мы создали таблицу, в которой находится пять столбцов:
1. id – идентификатор чатника.
2. login – логин (ник) чатника
3. password – пароль чатника
4. privat – это задел на будущее, когда мы будем работать над «пиватом»
5. active – тут будет храниться лишь одна цифра: 1 – если чатник в данный момент находится в чате, и 0, если чатник в данный момент не в чате.
Тут нет ничего сложного.

Code

<?PHP
$myserver="";
//Обычно это - localhost
$mylogin=" ";
// Ваш логин
$mypassword="";//?>
//Ваш пароль

Это – ваши данные для подключения к базе данных.

Code

Тут и пояснять особо нечего. Мы создаем HTML-документ, вставляем в него изображение-логотип чата и прижимаем его к Раям страницы при помощи строки «TOPMARGIN=0 LEFTMARGIN=0 RIGHTMARGIN=0 MARGINHEIGHT=0 MARGINWIDTH=0».

Ну, а теперь приступим к основным файлам чата.

Code

<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html">
<TITLE>Чат на MICRO.ORG.UA</TITLE>
<LINK HREF="style.css" REL="stylesheet" TYPE="text/css">
</HEAD>
<BODY LINK=blue ALINK=blue VLINK=blue>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
<FORM ACTION="chat.php" METHOD="POST" ONSUBMIT="return proverka(this);" NAME="entry">
<TABLE HEIGHT="100%" VALIGN="middle" WIDTH="100%">
<TR>
<TD><TABLE BORDER=1 CELLPADDING=4 CELLSPACING=0 WIDTH="100%" BGCOLOR="#FFFFFF" BORDERCOLOR="#000000" RULES="all" ALIGN="center" HEIGHT="300">
<TR BGCOLOR="lavender" ALIGN="center">
<TH COLSPAN=2 CLASS=title>Добро пожаловать в Чат Микропортала</TH>
</TR>
<TR ALIGN="center">
<TD>Ваше имя (или ник):</TD>
<TD><INPUT TYPE="text" NAME="login" SIZE="40" VALUE=""></TD>
</TR>
<TR ALIGN="center">
<TD>Пароль (должен отличаться от ника):</TD>
<TD><INPUT TYPE="password" NAME="password" SIZE="40" VALUE=""></TD>
</TR>
<TR ALIGN="center">
<TD COLSPAN=2><INPUT TYPE="submit" VALUE="Войти в чат" STYLE="width: 300px;"></TD>
</TR>
<TR ALIGN="center">
<TD COLSPAN=2 BGCOLOR="lavender"><FONT COLOR="#6766f1"><B>Примечание:</B></FONT> если Вы заходите сюда в первый раз, то введите свой пароль, и он будет запомнен системой<BR><BR>
Программирование чата и разработка дизайна © <A HREF="http://www.micro.org.ua">Илья Барков</A></TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</FORM>
</HTML>

Пока что в этом документе нет РНР-дескрипторов, но потом, при расширении функциональности чата, здесь будут выводиться некоторые данные о работе чата.
В этом файле мы выводим входную форму для ввода логина (ника) и пароля, также при помощи JavaScript проверяем, чтобы поля для ввода логина и пароля не оставались пустыми, а также, переведя в нижний регистр и логин, и пароль, сравниваем их, чтобы они не совпадали (из соображений элементарной защиты). Ну и еще выводим заголовок чата (его название) и copyright’ы.
Данные из формы передаются в файл chat.php. Его то мы сейчас и рассмотрим.

Code

<?PHP
error_reporting(0);
include("includer.php");
$login=$_POST['login'];
$password=$_POST['password'];
if (($login!='') && ($password!=''))
{
echo "<TITLE>Чат на MICRO.ORG.UA - ".strtoupper($login)."</TITLE>";
$db=mysql_connect($myserver, $mylogin, $mypassword);
mysql_select_db("micro");
# Проверяем, зарегистрирован ли такой ник в чате
$sql="SELECT * FROM `chat_users` WHERE `login`='".$login."'";
$result=mysql_query($sql);
$num_results=mysql_num_rows($result);
# Если человека с таким ником нет в чате, то регистрируем его и делаем активным
if (($num_results=='') || ($num_results==0))
{
$sql="INSERT INTO `chat_users` VALUES ('', '".$login."','".$password."','','1')";
$result=mysql_query($sql);
include("chat.inc.php");
}
# Иначе проверяем: если он ввел верный пароль - он входит в чат, иначе переходит на главную страницу
else
{
$sql="SELECT * FROM `chat_users` WHERE `login`='".$login."' and `password`='".$password."'";
$result=mysql_query($sql);
$num_results=mysql_num_rows($result);
if (($num_results=='') || ($num_results==0))
{
echo '<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>';
}
else
{
$sql="SELECT * FROM `chat_users` WHERE `login`='".$login."'";
$result=mysql_query($sql);
$num_results=mysql_num_rows($result);
$row=mysql_fetch_array($result);
$id=$row["id"];
$sql="DELETE FROM `chat_users` WHERE `id`=".$id;
$result=mysql_query($sql);
$sql="INSERT INTO `chat_users` VALUES ('".$id."', '".$login."','".$password."','','1')";
$result=mysql_query($sql);
include("chat.inc.php");
}
}
}
else
{
Header("Location:index.php");
}
?>

Что мы делаем в этом файле? Первым делом выставляем подавление ошибок (error_reporting(0)) – чтобы ни случилось, посетители не должны видеть сообщенияоб ошибках. Далее подключаем файл includer.php с данными для подключения к базе данных. Выбираем из массива POST значения логина и пароля и, если они не пусты (хоть мы уже и предусмотрели такой вариант в файле index.php, но вдруг кто-нибудь наберет сразу http://chat.***.com/chat.php, то в этом случае мы перебрасываем его на index.php), продолжаем работу сценария. Потом проверяем, есть ли у нас в таблице chat_users пользователь с таким логином. Если нет (ник не занят), то заносим логин и пароль в таблицу – таким образом проходит регистрация. Если же такой логин уж есть в таблице, то проверяем, совпадает ли пароль, введенный посетителем, с паролем, находящимся в таблице. Если нет, то создаем JavaScript-код, содержащий сообщение о том, что пароль неверен, и перебрасываем его на страницу index.php. Если же все нормально (соответствующая пара «логин-пароль» найдена в таблице, то выдаем посетителю файл chat.inc.php). Кроме тго, производим некоторые манипуляции J над таблицей: заносим в поле «active» этого посетителя число 1, т.е. делаем его активным.

Code

В этом файле содержится набор фреймов, в которых содержатся РНР-файлы.
Когда срабатывает событие onUnload, обработка событий передается файлу del.php. Подробнее о работе этого файла – в конце статьи.
Обратите внимание – в каждый из документов, находящихся во фреймах (исключение – logo.html и smiles.html), мы передаем с помощью строки запроса логин посетителя. Зачем это нужно? Об этом я расскажу позднее.

Code

<HTML>
<HEAD>
<META CONTENT="5; URL=text.php" HTTP-EQUIV=Refresh>
</HEAD>
<BODY ONLOAD="scroll(0,100)" LINK="blue" ALINK="blue" VLINK="blue">
<FONT SIZE=3 FACE="Georgia">
<?PHP
error_reporting(0);

# Если в чате больше 20 строк, то убираем самые ранние, чтобы в окне оставалось не более 20 строк

Code

$file=file("chat.txt");
$count=count($file);

$num=20;

if ($count>$num)
{

for ($i=($count-$num); $i<$count; $i++)
{
$str = $str.$file[$i];
$str=ereg_replace("\r\n","\n",$str);
}

$fp=fopen("chat.txt","w");
fwrite($fp,$str);
}

$file=file("chat.txt");
$count=count($file);

for ($i=0; $i<$count; $i++)
{
echo $file[$i]."<BR>";
}
?>
</FONT>
</BODY>
</HTML>

На этот документе стоит обратить особое внимание.
При помощи строки «<META CONTENT="5; URL=text.php" HTTP-EQUIV=Refresh>» мы выставляем частоту обновления файла – пять секунд. По моим наблюдениям, 5 секунд для нашего чата – оптимальное частота обновления, ведь файл, который будет каждый раз считываться, состоит всего лишь из 20 строк, поэтому чем быстрее обновляется text.php, тем для нас лучше.
Естественно, выставляем подавление сообщений об ошибках.
Далее при помощи функции file() мы считываем информацию из файла chat.txt и выводим информацию на экран, предварительно заменяя символы «\n» (перенос строки) на «<BR>».
Обратите внимание на строки:

Code

$num=20;
if ($count>$num)
{

for ($i=($count-$num); $i<$count; $i++)
{
$str = $str.$file[$i];
$str=ereg_replace("\r\n","\n",$str);
}

$fp=fopen("chat.txt","w");
fwrite($fp,$str);
}

Code

При помощи JavaScript мы вставляем в строку реплики, находящуюся в файле send.php, код смайлика (например, для пятого смайлика, имеющего имя 5.gif, код юудет таким: <5>). Позже, в файле add.php, мы вместо кода <5> вставим <IMG SRC=”5.gif”>, и у чатников на экран выведется нормальный смайлик.

Code

<HTML>
<HEAD>
</HEAD>
<BODY BGCOLOR="#8caae6">
<TABLE WIDTH="100%" HEIGHT="100%" CELLPADDING=0 CELLSPACING=0>
<TR VALIGN="middle">
<TD WIDTH="80%">
<FORM NAME="sendform" ACTION="add.php" METHOD="post">
<?
error_reporting(0);
$login=$_GET['login'];
?>
<INPUT TYPE="hidden" VALUE="<?=$login;?>" NAME="login">
<INPUT TYPE="text" NAME="who" STYLE="width:15%" STYLE="border-width:1px; border-color:black">
<INPUT TYPE="text" NAME="message" STYLE="width:75%" STYLE="border-width:1px; border-color:black"></TD>
<TD WIDTH="15%"><INPUT TYPE="submit" VALUE="Сказать" STYLE="border-width:1px; border-color:black"></TD>
</FORM>
<FORM ACTION="del.php" METHOD="get" NAME="closeform" TARGET="_parent">
<TD WIDTH="20%">
<INPUT TYPE="hidden" NAME="login" VALUE="<?=$login;?>">
<INPUT TYPE="submit" VALUE="Выход" STYLE="border-width:1px; border-color:black">
</TD>
</FORM>
</TR>
</TABLE>
</BODY>
</HTML>

Code

<HTML>
<HEAD>
<?PHP
error_reporting(0);
include("includer.php");
$login=$_GET['login'];
?>
<META CONTENT="10; URL=users.php?login=<?=$login;?>" HTTP-EQUIV=Refresh>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
</HEAD>
<BODY LINK="blue" ALINK="blue" VLINK="blue" TOPMARGIN=0 LEFTMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0 RIGHTMARGIN=0>
<FONT FACE="georgia" SIZE=3 COLOR="black">
<TABLE WIDTH="100%">
<TR>
<TD WIDTH="100%" ALIGN="center">
<FONT COLOR="#008080" FACE="Georgia" SIZE=3><B>Сейчас в чате:</B></FONT>
</TD>
</TR>
<?PHP
$db=mysql_connect($myserver, $mylogin, $mypassword);
mysql_select_db("micro");
$sql="SELECT * FROM `chat_users` WHERE `active`=1";
$result=mysql_query($sql);
$num_results=mysql_num_rows($result);
for ($i=0; $i<$num_results; $i++)
{
$row=mysql_fetch_array($result);
echo "<TR><TD>".($i+1).".  <A HREF=\"javascript:netsend('".stripslashes($row['login'])."')\">".stripslashes($row['login'])."</A></TD></TR>";
}
?>
<TR>
<TD WIDTH="100%" ALIGN="center"><BR>
<FONT COLOR="#008080" FACE="Georgia" SIZE=3><B>Рекомендую:</B></FONT>
</TD>
</TR>
<TR>
<TD WIDTH="100%" ALIGN="left"><BR>
1.  <A HREF="http://www.micro.org.ua" TARGET=_blank>Микропортал</A><BR>
2.  <A HREF="http://www.micro.org.ua/forum/" TARGET=_blank>Наши форумы</A><BR>
3.  <A HREF="http://www.micro.org.ua/yslygi/" TARGET=_blank>Услуги</A>
</TD>
</TR>
<TR>
<TD WIDTH="100%" ALIGN="center"><BR>
<FONT COLOR="#008080" FACE="Georgia" SIZE=3><B>Правила чата:</B></FONT>
</TD>
</TR>
<TR>
<TD WIDTH="100%" ALIGN="left"><BR>
<B>1.</B>  Admin всегда прав.<BR>
<B>2.</B>  Если Admin неправ, смотри пункт 1.<BR>
<B>3.</B>  Если уходите - воспользуйтесь кнопкой "Выход"<BR>
<B>4.</B>  За флуд и ругательства вы можете быть удалены из чата
</TD>
</TR>
</TABLE>
</BODY>
</FONT>
</HTML>

При помощи этого файла мы выводим на экран список активных посетителей (т.е. тех, у которых в данный момент в поле «active» стоит значение 1). Этот файл обновляется каждые 10 секунд.
Кроме того, мы выводим в этом файле список сайтов, которые рекомендуем посетить чатникам (авось, кто-то из них и кликнет по ссылке, которая, кстати, откроется в новом окне), а также правила чата. Я не стал слишком перегружать посетителей правилами: не ругаться, не флудить, слушаться Admin’а. Кстати, об Admin’e – в следующей статье я расскажу вам, что это за Admin, и что мы будем с его помощью делать.

Code

<?PHP
error_reporting(0);
$file=fopen("chat.txt","a");
$filehis=fopen("history.txt","a");
for ($i=1; $i<8; $i++)
{
$message=ereg_replace("<".$i.">","<IMG SRC='".$i.".gif'>",$message);
}
# С помощью этих строк мы выделяем из реплики адреса сайтов и e-mail’ы.
$message = eregi_replace('([[:space:]()[{}])(http://.[-a-zA-Z0-9@:%_\+.~#?&//=]+)', '\\1<a href="http://\\2" target="_blank">\\2</a>', $message);
$message = eregi_replace('([[:space:]()[{}])(www.[-a-zA-Z0-9@:%_\+.~#?&//=]+)', '\\1<a href="http://\\2" target="_blank">\\2</a>', $message);
$message = eregi_replace('([[:space:]()[{}])(http://.[-a-zA-Z0-9@:%_\+.~#?&//=]+)', '\\1<a href="\\2" target="_blank">\\2</a>', $message);
$message = eregi_replace("[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*","<a href=\"mailto:\\0\">\\0</a>",$message);

fwrite($file,"\n[".date("H:i:s")."]  <B>".$login." => ".$who."</B> : ".$message);
fwrite($filehis,"\n[".date("H:i:s")."]  <B>".$login." => ".$who."</B> : ".$message);

header("Location:send.php?login=".$login);
?>

Наконец мы подошли к самому интересному месту работы чата. Как я уже упоминал в начале статьи, перед нами возникает проблема. Если человек просто обновляет окно чата, то мы с ним ничего не делаем, а если закрывает окно чата, то удаляем его из списка активных посетителей. Как этого добиться? Смотрите, как работает файл del.php.

Code

<?PHP
error_reporting(0);
include("includer.php");
$login=$_GET['login'];
$db=mysql_connect($myserver, $mylogin, $mypassword);
mysql_select_db("micro");
$sql="SELECT * FROM `chat_users` WHERE `login`='".$login."'";
$result=mysql_query($sql);
$row=mysql_fetch_array($result);
$id=$row["id"];
$password=$row["password"];
$privat=$row["privat"];
$sql="DELETE FROM `chat_users` WHERE `id`=".$id;
$result=mysql_query($sql);
$sql="INSERT INTO `chat_users` VALUES ('', '".$login."', '".$password."', '".$privat."', '0')";
$result=mysql_query($sql);
Header("Location:index.php");
?>

На самом деле при любом изменении документа мы выставляем чатнику в «active» значение 0. Но если чатник уходит, то это значение 0 так и останется в его профиле, а если чатник просто обновляет страницу, то сценарий del.php сначала заносит в профиль чатника значение 0, а потом, после обновления, сценарий chat.php заносит в профиль этого чатника значение 1. Т.е. по сути для чатника ничего не меняется – он вышел, и его логин убирается из списка активных посетителей, обновил страницу – и все нормально, работает так, как и должно было работать.

В общем-то, все файлы, которые я перечислил в начале статьи, описаны. Теперь у нас в итоге есть чат, нормально работающий, умеющий регистрировать новых посетителей, впускать уже зарегистрированных, создающий комфортные условия для общения посетителей, умеющий решать многие проблемы, возникающие в процессе работы, умеющий разбавлять общение веселыми смайликами и имеющий много-много прочих полезных функций…