Думаю, что каждый из Вас знает, что такое чат. И очень часто на сайтах можно встретить либо маленькие чаты, либо достаточно большие и сложные. В этой статье я опишу принцип создания чата. Обратите внимание, что в этой статье не будет готового кода "скопировал-вставил", а только алгоритм, с помощью которого Вы, обладая необходимыми знаниями, сможете сделать чат.
Ключевая особенность чата в том, что его содержимое обновляется автоматически. Отсюда и возникают все трудности.
Для начала разберём с Вами структуру таблицы в базе данных. Вот те поля, которые обязательно потребуются:
- 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, где он уже будет выводиться */
?>
Всё, круг замкнулся, и чат заработал. Как видите, сделать чат достаточно сложно и нужно обладать большим багажом знаний. Но я надеюсь, что данная статья здорово облегчит Вам эту задачу. Абсолютно любой чат, какой бы он сложный ни был, основан на принципах, описанных в данной статье, поэтому смело можете его использовать как каркас.
