Как сделать чат
Думаю, что каждый из Вас знает, что такое чат. И очень часто на сайтах можно встретить либо маленькие чаты, либо достаточно большие и сложные. В этой статье я опишу принцип создания чата. Обратите внимание, что в этой статье не будет готового кода "скопировал-вставил", а только алгоритм, с помощью которого Вы, обладая необходимыми знаниями, сможете сделать чат.
Ключевая особенность чата в том, что его содержимое обновляется автоматически. Отсюда и возникают все трудности.
Для начала разберём с Вами структуру таблицы в базе данных. Вот те поля, которые обязательно потребуются:
- id - уникальный идентификатор.
- name - имя, оставившего сообщение. Здесь также может быть, например, user_id, означающий id пользователя из другой таблицы.
- message - сам текст сообщения.
- date - дата отправления сообщения.
Безусловно, это только пример. Вы можете добавлять ещё массу других полей, тем самым, расширяя возможности Вашего чата.
Теперь необходимо вывести HTML-код:
<div id="chat">
<table>
<tr>
<td>Имя</td>
<td>Сообщение</td>
<td>Дата</td>
</tr>
<tr>
<td>Имя</td>
<td>Сообщение</td>
<td>Дата</td>
</tr>
</table>
</div>
<p>
<input type="text" name="message" id="message" />
<input type="button" value="Отправить" onclick="send()" />
</p>
В данном коде опять же всё как пример. Можно всё смело менять, но принцип должен быть тем же: есть место, где выводятся сообщения, причём они выводятся в одинаковом виде. Вместе с полем, где выводятся сообщения, есть текстовое поле и кнопка "Отправить".
Обязательно для блока chat поставьте фиксированную высоту, чтобы при добавлении новых сообщений, у Вас этот блок не вырастал, также поставьте полосу прокрутки у него, чтобы можно было просмотреть все сообщения. Всё это делается с помощью CSS.
Теперь займёмся JavaScript:
<script type="text/javascript">
function send() {
var message = document.getElementById("message").value;
var name = "Гость";
/* Здесь блок отправки POST-запроса с данными (например, через Ajax) */
}
function update() {
/* Здесь отправка запроса на получение всех сообщений (например, через Ajax) */
/* Здесь вывод сообщений в определённом формате прямо в HTML-код с использованием DOM, либо JQuery. */
}
setInterval("update()", 1000); // Обновление окна чата каждую секунду
</script>
И, наконец, PHP-код (добавление новых сообщений):
<?php
/* Получаем данные, полученные из JavaScript */
$message = $_POST["message"];
$name = $_POST["name"];
$date = date(); // Узнаём текущее время и дату
/* Здесь добавляем в таблицу новую запись */
?>
И последний файл, которые потребуется - это получение всех сообщений из таблицы:
<?php
/* Вытаскиваем все записи из таблицы */
/* Получаем двумерный массив из полученных данных */
/* Преобразуем массив в json-формат и возвращаем его в javascript, где он уже будет выводиться */
?>
Всё, круг замкнулся, и чат заработал. Как видите, сделать чат достаточно сложно и нужно обладать большим багажом знаний. Но я надеюсь, что данная статья здорово облегчит Вам эту задачу. Абсолютно любой чат, какой бы он сложный ни был, основан на принципах, описанных в данной статье, поэтому смело можете его использовать как каркас.
-
Создано 16.04.2012 13:59:17
-
Михаил Русаков
Комментарии (25):
Спасибо за статью, Михаил! Но ведь можно сделать и без применения js?
Ответить
Можно, с применением frame. Но это очень плохой вариант в том плане, что, во-первых, будет "моргать" экран, поскольку обновляется целиком весь блок, особенно это будет заметно на медленных компьютерах. Также очень сильно ограничена функциональность и многое нельзя будет сделать.
Ответить
Spasiba za statiu Mixail..Vapros: Shtob Sozdat Chatik na znat PHP ? i JavScript? obizatelna ? a mojna li vot suda postavit http://remzi.mail2k.ru/ ? Zarane spasiba ..
Ответить
Можно взять готовый скрипт чата. Минусов масса, но если ничего не знаете, то это единственный вариант.
Ответить
Михаил а как сделать так чтоб аякс запрос, проверял есть ли новые сообщения, если есть то уже подгружает, а если нет то нет. как вот сделать эту проверку? Сама структура запроса не ясна. пожалуйста обьясните.
Ответить
Отправлять вместе с запросом id последнего сообщения, например. Если новое появилось, то возвращать результат.
Ответить
А лучше ли будет передавать хэш id ? или лучше будет сделать специально отдельно колонку в таблице, с рандомным значением (и сделать и его хэш)чтоб исключить подстановку?!
Ответить
Если беспокоитесь о безопасности, то можете и так сделать. Как альтернатива, можете передавать не id, а время последнего обновления. Тогда выводить только сообщения, отправленные позже этого времени.
Ответить
Можно сделать асинхронную подгрузку сообщений если не беспокоетесь о нагрузке
Ответить
Я сделал чат по такому же принципу, только я не знал как обновлять и узнал здесь. Спасибо.
Ответить
Михаил, а как сделать так, чтобы при обновлении страницы все сообщения из окна чата исчезали? Т.е. каждый новый пользователь не видел сообщений старых. И если это вообще возможно, то где хранить сообщения в БД или в файлах… Спасибо
Ответить
Можно хранить в cookie дату первого посещения чата и выводить сообщения только, отправленные позже этого времени.
Ответить
у меня вопрос) я не разбирал код честно говоря, просмотрел поверхностно) но как быть в случае когда нужно показывать 100 сообщений, тогда контент страницы требует прокрутку) и вид вовсе не компактный, как решить эту проблему? просто не хочу курить форумы))
Ответить
Через CSS у блока можно поставить максимальную высоту и прокрутку.
Ответить
спасибо) просто не сталкивался с прокруткой) обязательно попробую)
Ответить
Михаил, вы пишите статьи для людей или для поисковиков?
Ответить
В первую очередь, для людей. Для поисковиков только <b> ставлю.
Ответить
Михаил, спасибо за статью. Вопрос: мне нужно установить, уже готовый чат Mibew Messenger.Все понятно, но там нужно создать БД MySQL и БД пользователя, где это создавать и как? управление сайта через самописную cms. В примере БД создаются в phpMyAdmin.
Ответить
Для создания пользователя и БД используйте все тот же phpMyAdmin
Ответить
Спасибо.
Ответить
Как можно реализовать без постоянного автообновления?
Ответить
А можно ли сделать без AJAX, DOM, JQuery и т.д. и т.п.?
Ответить
Фигня статья. Лучше бы подетальней описание код и работу. А от этого куска теории толку никакого. Равноценно, что написать "Просто делайте ajax-запросы каждую секунду и выводите новые сообщения"
Ответить
Да нет, тут как раз нормально описан принцип действия. Да, здесь нету отправки пост-запросов через аякс, но суть тут оказана. Кстати, так ведь можно комментарии сделать)
Ответить
php не работает
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.