Пишем чат на РНР
Здравствуйте, уважаемые 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 – при выходе чатника из чата удаляет чатника из списка активных (т.е. в данный момент обсуждающих свои важные проблемы и находящихся в чате).
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 рисунков-смайликов, используемых в чате.
А теперь нужно упомянуть один момент, без объяснения которого никак нельзя обойтись.
Ну, а теперь, когда вроде бы все вопросы выяснены, можно приступать к непосредственному набору кода. начала я буду писать полный код файла, а потом буду подробно описывать, что он делает. А перед набором кода создайте пустые файлы 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» в базе данных. Итак, вот ее код:
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, если чатник в данный момент не в чате.
Тут нет ничего сложного.
Это – ваши данные для подключения к базе данных.
Создаем простой чат на PHP. Часть 1
Дата публикации: 2018-12-21
От автора: в данном уроке мы с вами начнем создавать простой чат на PHP. Данное приложение отнюдь не простое, и на его написание потребуется несколько уроков.
В настоящее время, ввиду огромнейшей конкуренции среди веб-сайтов и необходимости удержания клиента на своих страницах, все большую популярность набирают различные инструменты по общению и взаимодействию с пользователями, в плане быстрого предоставления ему нужной информации.
Поэтому все чаще на страницах сайтов мы видим различные чаты, которые в реальном времени позволяют соединить посетителя с администрацией, менеджером или любым другим пользователем и организовать общение. При этом, как правило, данные инструменты реализованы с использованием front-end технологий, node.js и веб-сокетов.
Бесплатный курс по PHP программированию
Освойте курс и узнайте, как создать динамичный сайт на PHP и MySQL с полного нуля, используя модель MVC
В курсе 39 уроков | 15 часов видео | исходники для каждого урока
Ну а если подумать — что собой представляет чат? По сути — это приложение, которое состоит из двух частей. Первая — это пользовательская, которая доступна пользователям, а вторая серверная, которая обрабатывает полученную информацию и отправляет ответы в предыдущую посредством сокетов.
Сокеты поддерживаются многими языками программирования, а значит, серверную часть можно написать на одном из них. Поэтому я хотел бы предложить вам посмотреть, как же можно реализовать чат, в котором на стороне сервера будет использоваться PHP скрипт. Мы с вами напишем простой чат, используя язык PHP.
На PHP мы реализуем только серверную часть, так как на стороне клиента будет использован все тот же JavaScript.
Непосредственно в данном уроке мы реализуем пользовательскую часть на минимально-необходимом уровне, который потребуется для отправки запроса на сервер, а также начнем создавать обработчик на стороне сервера.
Таким образом, по итогам текущего урока на клиентской стороне будет отправлен запрос на подключение, а со стороны сервера данный запрос будет принят, обработан и отправлен успешный ответ.
Хотите изучить ООП PHP?
Посмотрите видео по объектно-ориентированному программированию на PHP (ООП PHP)!
Как сделать чат
Думаю, что каждый из Вас знает, что такое чат. И очень часто на сайтах можно встретить либо маленькие чаты, либо достаточно большие и сложные. В этой статье я опишу принцип создания чата. Обратите внимание, что в этой статье не будет готового кода «скопировал-вставил«, а только алгоритм, с помощью которого Вы, обладая необходимыми знаниями, сможете сделать чат.
Ключевая особенность чата в том, что его содержимое обновляется автоматически. Отсюда и возникают все трудности.
Для начала разберём с Вами структуру таблицы в базе данных. Вот те поля, которые обязательно потребуются:
Безусловно, это только пример. Вы можете добавлять ещё массу других полей, тем самым, расширяя возможности Вашего чата.
Теперь необходимо вывести HTML-код:
В данном коде опять же всё как пример. Можно всё смело менять, но принцип должен быть тем же: есть место, где выводятся сообщения, причём они выводятся в одинаковом виде. Вместе с полем, где выводятся сообщения, есть текстовое поле и кнопка «Отправить«.
Обязательно для блока chat поставьте фиксированную высоту, чтобы при добавлении новых сообщений, у Вас этот блок не вырастал, также поставьте полосу прокрутки у него, чтобы можно было просмотреть все сообщения. Всё это делается с помощью CSS.
Теперь займёмся JavaScript:
И, наконец, PHP-код (добавление новых сообщений):
Всё, круг замкнулся, и чат заработал. Как видите, сделать чат достаточно сложно и нужно обладать большим багажом знаний. Но я надеюсь, что данная статья здорово облегчит Вам эту задачу. Абсолютно любой чат, какой бы он сложный ни был, основан на принципах, описанных в данной статье, поэтому смело можете его использовать как каркас.
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Комментарии ( 25 ):
Спасибо за статью, Михаил! Но ведь можно сделать и без применения js?
Можно, с применением frame. Но это очень плохой вариант в том плане, что, во-первых, будет «моргать» экран, поскольку обновляется целиком весь блок, особенно это будет заметно на медленных компьютерах. Также очень сильно ограничена функциональность и многое нельзя будет сделать.
Можно взять готовый скрипт чата. Минусов масса, но если ничего не знаете, то это единственный вариант.
Михаил а как сделать так чтоб аякс запрос, проверял есть ли новые сообщения, если есть то уже подгружает, а если нет то нет. как вот сделать эту проверку? Сама структура запроса не ясна. пожалуйста обьясните.
Отправлять вместе с запросом id последнего сообщения, например. Если новое появилось, то возвращать результат.
Если беспокоитесь о безопасности, то можете и так сделать. Как альтернатива, можете передавать не id, а время последнего обновления. Тогда выводить только сообщения, отправленные позже этого времени.
Можно сделать асинхронную подгрузку сообщений если не беспокоетесь о нагрузке
Я сделал чат по такому же принципу, только я не знал как обновлять и узнал здесь. Спасибо.
Михаил, а как сделать так, чтобы при обновлении страницы все сообщения из окна чата исчезали? Т.е. каждый новый пользователь не видел сообщений старых. И если это вообще возможно, то где хранить сообщения в БД или в файлах… Спасибо
Можно хранить в cookie дату первого посещения чата и выводить сообщения только, отправленные позже этого времени.
у меня вопрос) я не разбирал код честно говоря, просмотрел поверхностно) но как быть в случае когда нужно показывать 100 сообщений, тогда контент страницы требует прокрутку) и вид вовсе не компактный, как решить эту проблему? просто не хочу курить форумы))
Через CSS у блока можно поставить максимальную высоту и прокрутку.
спасибо) просто не сталкивался с прокруткой) обязательно попробую)
Михаил, вы пишите статьи для людей или для поисковиков?
В первую очередь, для людей. Для поисковиков только ставлю.
Михаил, спасибо за статью. Вопрос: мне нужно установить, уже готовый чат Mibew Messenger.Все понятно, но там нужно создать БД MySQL и БД пользователя, где это создавать и как? управление сайта через самописную cms. В примере БД создаются в phpMyAdmin.
Для создания пользователя и БД используйте все тот же phpMyAdmin
AJAX веб чат с использованием PHP, MySQL и jQuery (Часть 1 из 2-х)
Как обычно первый шаг посвящен разметке HTML. Наш документ строится в соответствии с HTML5, что позволяет использовать новый, более короткий синтаксис DOCTYPE, и опускать атрибут type в тегах script.
index.html
Для оптимизации загрузки, стили включены в секции head, а файлы JavaScript подключаются внизу документа, перед закрывающим тегом body.
Для организации прокручиваемой области со строками чата мы используем плагин jScrollPane. Данный плагин имеет свои собственные стили, который включаются в секции head.
Разметка чата состоит из четырех основных элементов div – верхней панели, контейнера чата, контейнера пользователей и нижней панели. Последний div содержит формы для регистрации пользователя и отправки сообщения. Форма отправки сообщения по умолчанию скрыта и выводится, только если пользователь успешно вошел в систему чата.
Затем мы включаем файлы JavaScript: библиотеку jQuery, плагин mousewheel (используется в jScrollPane), плагин jScrollPane и наш файл script.js.
Схема базы данных
Прежде чем перейти к части PHP, нужно сначала взглянуть на организацию данных чата в базе данных MySQL.
Для нашего скрипта мы используем две таблицы. В таблице webchat_users хранится информация об участниках чата. Таблица имеет поля id, name, gravatar и last_activity. Поле name определено как уникальное, таким образом предотвращается использование дублирующихся имен в чате.
Другим полезным свойством поля с уникальным индексом является то, что запрос на вставку данных завершится с ошибкой и свойство inserted_rows объекта MySQLi будет установлено в значение 0, если попытаться вставить дублирующиеся строки. В классе PHP Chat данное свойство будет активно использоваться.
Поле last_activity содержит значение времени. Значение обновляется каждые 15 секунд для каждого пользователя. Поле также определено как индекс, что позволяет быстро удалять неактивных пользователей (значение в поле last_activity более 15 означает, что пользователь более не просматривает окно чата).
Таблица webchat_lines содержит записи в чате. Заметьте, что мы храним имя автора и gravatar здесь тоже. Такое дублирование позволяет нам отказаться от использования затратной директивы join при запросе последних записей – наиболее часто используемых в нашем приложении.
Определения таблиц имеются в файле tables.sql в исходниках. Вы можете использовать текст запросов для создания таблиц. Также, при установке чата на свой хост, нужно поменять установки в ajax.php на ваши данные для соединения с базой MySQL.
Теперь у нас есть база данных, давайте обсудим скрипт PHP, который управляет чатом.
Первый файл, который мы рассмотрим, ajax.php. Он обрабатывает запросы AJAX от клиентской части из jQuery и выводит данные в формате JSON.
ajax.php
Для удобства используется оператор switch для определения действий, которые обрабатывает скрипт. Здесь реализованы подсистемы чата, функциональность входа/выхода и действия по запросу списка реплик и пользователей в режиме онлайн.
Вывод осуществляется в форме сообщений JSON (которые удобно обрабатывать с помощью jQuery), ошибки генерируют исключения. Оператор switch распределяет все запросы соответствующим статическим методам класса Chat, который будет обсуждаться позже в данном разделе.
DB.class.php
Остальная часть класса реализует коммуникацию с базой данных, в основе которой лежит статический метод query().
ChatBase.class.php
ChatLine.class.php
Класс ChatLine является производным классом от ChatBase. Объект данного класса может быть легко создан с помощью передачи конструктору массива с текстом, именем автора и элементом gravatar. Свойство класса gravatar содержит хэш md5 email адреса. Оно нужно для получения пользовательского аватара, соответствующего email адресу, с сайта gravatar.com.
Данный класс также определяет метод save, который сохраняет объект в базе данных. Так как метод возвращает объект MySQLi, содержащийся в классе DB, вы можете проверить успешность завершения операции с помощью свойства affected_rows.
ChatUser.class.php
Класс имеет свойства name и gravatar (обратите внимание на модификатор доступа protected – свойства доступны в классе ChatBase, и мы можем устанавливать их значения в конструкторе).
В классе определен метод update(), который обновляет поле last_activity значением текущего времени. Таким образом показывается, что пользователь держит окно с чатом отрытым и его надо учитывать как автора в режиме онлайн.
Chat.class.php – Часть 1
Этот код выполняет всю работу. В операторе switch в файле ajax.php выбирались действия, которые соответствовали методам данного класса. Каждый из этих методов возвращает массив, который затем конвертируется в объект JSON с помощью функции json_encode() (это происходит внизу в файле ajax.php).
Когда пользователь входит в систему, его имя и gravatar сохраняются как элементы массива $_SESSION и становятся доступны в последующих запросах.
Chat.class.php – Часть 2
jQuery отправляет запросы getUsers() каждые 15 секунд. Мы используем данный факт, чтобы удалить реплики, которые старше 5 минут и неактивных пользователей из базы данных. Потенциально можно было бы удалять данные записи в getChats, но этот запрос поступает каждую секунду и дополнительная нагрузка может повлиять на производительность приложения.
В методе getChats() используется функция gmdate вывода времени в формате GMT. В клиентской части мы используем значения часов и минут для установки в объекте JavaScript, а в результате время отображается в соответствии с часовым поясом пользователя.
Продолжение во второй части!
Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: tutorialzine.com/2010/10/ajax-web-chat-php-mysql/
Перевел: Сергей Фастунов
Урок создан: 3 Ноября 2010
Просмотров: 139877
Правила перепечатки
5 последних уроков рубрики «PHP»
Фильтрация данных с помощью zend-filter
Когда речь идёт о безопасности веб-сайта, то фраза «фильтруйте всё, экранируйте всё» всегда будет актуальна. Сегодня поговорим о фильтрации данных.
Контекстное экранирование с помощью zend-escaper
Обеспечение безопасности веб-сайта — это не только защита от SQL инъекций, но и протекция от межсайтового скриптинга (XSS), межсайтовой подделки запросов (CSRF) и от других видов атак. В частности, вам нужно очень осторожно подходить к формированию HTML, CSS и JavaScript кода.
Подключение Zend модулей к Expressive
Expressive 2 поддерживает возможность подключения других ZF компонент по специальной схеме. Не всем нравится данное решение. В этой статье мы расскажем как улучшили процесс подключение нескольких модулей.
Совет: отправка информации в Google Analytics через API
Предположим, что вам необходимо отправить какую-то информацию в Google Analytics из серверного скрипта. Как это сделать. Ответ в этой заметке.
Подборка PHP песочниц
Подборка из нескольких видов PHP песочниц. На некоторых вы в режиме online сможете потестить свой код, но есть так же решения, которые можно внедрить на свой сайт.
Простой чат на JavaScript и PHP
Как же работает этот скрипт? Сначала, подключается к базе данных. После подключения, смотрим, что запришивает клиент.
Если он запрашивает сообщения, то генерируем сколько сообщений не хватает клиенту. Затем, запрашиваем в безе все необходимые сообщения, добавляем их в массив, генерируем JSON и посылаем все это дело клиенту.
Теперь, у нас есть основа для чата. Все, что нам осталось сделать, так это обновление чата на стороне клиента и добавление новых сообщений в чат. Для всего этого, мы будем использовать Ajax запросы.
Давайте, создадим в файле index.php скрипт для обработки и добавления сообщений.
Добавим между тегов head >. head > наш Javascript:
Разберем этот скрипт…
Строка (3). Если в куках есть имя пользователя, то заполняем форму с именем. Для чего это сделано? Если пользователь обновил страничку с чатом или зашел заново на страницу с чатом, то ему не придется вводить свое имя заново.
Строка (7). Функция обновления чата. Чат обновляется не полностью, а присылаются только те сообщения, которых нет в чате.
Строка (9). Генерируем Ajax запрос. Для чего нужно отправлять лишнюю переменную «t=»+(new Date).getTime()? Если не отправить, то некоторые браузеры кэшируют одинаковые Ajax запросы. А нам это не нужно! т.к. не смогут обновляться сообщения. Функция (new Date).getTime() возвращает время в миллисекундах. Таким образом, браузер не кэширует запрос, т.к. при каждой отправке, генерируется разная строка.
Строка (16). Почему именно больше двух символов? Да потому что если все сообщения в чате есть, то сервер присылает не пустую строку, а «[]». т.к. ответ генерируется в JSON.
Строка (37). Запрос новых сообщений раз в две секунды. Мне очень понравился плагин jQuery Timers. С помощью него можно очень гибко сделать повторение определенных действий любое количество раз.
В общем-то, и всё. Вот и готов наш чат. Проверку имени на валидность и смайлы оставляю для домашнего задания.