Здравствуйте, уважаемые web-мастера! Я уверен, что вы хотите, чтобы ваш сайт активно посещался, чтобы посетителям был интересен материал, размещенный на вашем сайте, чтобы они возвращались вновь и вновь. Скорее всего, у вас на сайте уже работает форум и гостевая книга. Но чего-то все же не хватает… Чего? Чата! Чата, в котором можно было бы пообщаться, из-за которого посетители будут возвращаться вновь и вновь…
Что для этого нужно?
Так в чем же дело?! Давайте напишем свой собственный чат, который будет отвечать всем вашим требованиям, будет быстрым и компактным.
Теперь давайте определимся, что должен уметь наш чат.
Во-первых, он должен регистрировать новых посетителей и обеспечивать вход уже зарегистрированным.
Во-вторых, он должен уметь вставлять смайлики – эти веселые маленькие картинки, без которых сегодня не обходится большинство чатов.
В-третьих, пользователи должны иметь возможность общаться в привате, т.е. лично друг с другом, чтобы остальные посетители не видели их разговора (естественно, кроме администратора 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
logo_chat.jpg – логотип чата.
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.sql
Для начала нужно создать таблицу «chat_users» в базе данных. Итак, вот ее код:
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, если чатник в данный момент не в чате.
Тут нет ничего сложного.
Incuder.php
//Ваш пароль
Это – ваши данные для подключения к базе данных.
Logo.html
Тут и пояснять особо нечего. Мы создаем HTML-документ, вставляем в него изображение-логотип чата и прижимаем его к Раям страницы при помощи строки «TOPMARGIN=0 LEFTMARGIN=0 RIGHTMARGIN=0 MARGINHEIGHT=0 MARGINWIDTH=0».
Ну, а теперь приступим к основным файлам чата.
Index.php
Чат на MICRO.ORG.UA
| ||||||||
Пока что в этом документе нет РНР-дескрипторов, но потом, при расширении функциональности чата, здесь будут выводиться некоторые данные о работе чата.
В этом файле мы выводим входную форму для ввода логина (ника) и пароля, также при помощи JavaScript проверяем, чтобы поля для ввода логина и пароля не оставались пустыми, а также, переведя в нижний регистр и логин, и пароль, сравниваем их, чтобы они не совпадали (из соображений элементарной защиты). Ну и еще выводим заголовок чата (его название) и copyright’ы.
Данные из формы передаются в файл chat.php. Его то мы сейчас и рассмотрим.
Chat.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, т.е. делаем его активным.
Chat.inc.php
На этот документе стоит обратить особое внимание.
При помощи строки «» мы выставляем частоту обновления файла – пять секунд. По моим наблюдениям, 5 секунд для нашего чата – оптимальное частота обновления, ведь файл, который будет каждый раз считываться, состоит всего лишь из 20 строк, поэтому чем быстрее обновляется text.php, тем для нас лучше.
Естественно, выставляем подавление сообщений об ошибках.
Далее при помощи функции file() мы считываем информацию из файла chat.txt и выводим информацию на экран, предварительно заменяя символы «\n» (перенос строки) на «
».
Обратите внимание на строки:
$num=20;
if ($count>$num)
{
For ($i=($count-$num); $i
При помощи JavaScript мы вставляем в строку реплики, находящуюся в файле send.php, код смайлика (например, для пятого смайлика, имеющего имя 5.gif, код юудет таким: ). Позже, в файле add.php, мы вместо кода вставим , и у чатников на экран выведется нормальный смайлик.
Send.php
