Shoutbox - миниЧат для Вашего сайта!
Хотели бы вы иметь на своем сайте мини-чат? Думаю, многие скажут "ДА". Сегодня мы рассмотрим замечательный мини-чат Shoutbox, он работает на php, mysql и jQuery. Прежде чем начать работу, посмотрите Демо (после советую до конца прочитать урок, дабы не делать поспешных выводов)
Не правда ли классно? Теперь о том, как такую вещь реализовать.
Скрипт для работы использует БД Mysql. Давайте создадим в базе таблицу shoutbox для упрощения задачи Вам и себе привожу готовый SQL-запрос:
Code
CREATE TABLE `shoutbox` (
`id` INT( 5 ) NOT NULL AUTO_INCREMENT ,
`date` TIMESTAMP NOT NULL ,
`user` VARCHAR( 25 ) NOT NULL ,
`message` VARCHAR( 255 ) NOT NULL ,
PRIMARY KEY ( `id` )
) CHARACTER SET = utf8;
`id` INT( 5 ) NOT NULL AUTO_INCREMENT ,
`date` TIMESTAMP NOT NULL ,
`user` VARCHAR( 25 ) NOT NULL ,
`message` VARCHAR( 255 ) NOT NULL ,
PRIMARY KEY ( `id` )
) CHARACTER SET = utf8;
Обрабатывает сообщения файл shoutbox.php. Найдите в нем следующие строки и отредактируйте:
Code
define("HOST", "Ваш MySql-хост - обычно это localhost");
define("USER", "имя пользователя MySql");
define("PASSWORD", "пароль к вашей MySql ");
define("DB", "Имя БД");
define("USER", "имя пользователя MySql");
define("PASSWORD", "пароль к вашей MySql ");
define("DB", "Имя БД");
Думаю, с этим сложностей быть не должно
Еще пара настроек в этом же файле: Code
header ("Location: index.html");
$res = getContent($link, 50);
$res = getContent($link, 50);
header - Здесь мы отправляем нерадивых юзеров, которые пытаются напрямую вызвать работу файла, shoutbox.php на страницу index.html.
getContent($link, 50) - количество сообщений на страницу. В данном примере будет выбрано 50 последних сообщений.
Теперь в нужном месте вставляем форму отправки сообщения и div-контейнер, который будет содержать последние сообщения чата:
Code
<form method="post" id="form">
<table>
<tr>
<td><label>Ваше имя</label></td>
<td><input class="text user" id="nick" type="text" MAXLENGTH="25" /></td>
</tr>
<tr>
<td><label>Сообщение</label></td>
<td><input class="text" id="message" type="text" MAXLENGTH="255" /></td>
</tr>
<tr>
<td></td>
<td><input id="send" type="submit" value="Отправить" /></td>
</tr>
</table>
</form>
<div id="container">
<div class="content">
<h1>Последние сообщения</h1>
<div id="loading"><img src="css/images/loading.gif" alt="Загрузка..." /></div>
<ul>
</div>
</div>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="shoutbox.js"></script>
<table>
<tr>
<td><label>Ваше имя</label></td>
<td><input class="text user" id="nick" type="text" MAXLENGTH="25" /></td>
</tr>
<tr>
<td><label>Сообщение</label></td>
<td><input class="text" id="message" type="text" MAXLENGTH="255" /></td>
</tr>
<tr>
<td></td>
<td><input id="send" type="submit" value="Отправить" /></td>
</tr>
</table>
</form>
<div id="container">
<div class="content">
<h1>Последние сообщения</h1>
<div id="loading"><img src="css/images/loading.gif" alt="Загрузка..." /></div>
<ul>
</div>
</div>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="shoutbox.js"></script>
Обычная форма с 3-ми input. После формы идет div#container, пусть вас не смущает наличие одинокого тега p. Все сообщения выводяться в виде
Имя - сообщение
(см. файл shoutbox.php). И в конце мы подключаем jQuery и сам скрипт shoutbox.js (можете это сделать и традиционно между тегами head)CSS здесь отвечает только за внешний вид чата. Поэтому подробно рассматривать его в этом уроке не будем. Просто не забудьте включить стили из файла css/general.css на вашу страницу, или, что еще лучше, сделайте индивидуальный дизайн. Единственное что стоит помнить, id и class из приведенного выше кода использует и скрипт shoutbox.js, поэтому если вы будете изменять имена id и class на свои, не забудьте сделать это также в shoutbox.js
На сегодня это все. Пусть этот урок станет для вас подарком на первомайские праздники, думаю, этот мини-чат вы найдете куда пристроить
P.S. Для тех кто хочет из этого скрипта получить более полноценный чат, слегка доработаем оригинальный скрипт:
Смысл в том, что мы будем обновлять содержание окошка чата через определенное время. Для этого нам понадобится плагин, который существенно упростит задачу jquery.timers.js. Его подключаем как обычно, а в shoutbox.js добавляем следующие строки:
Code
$(".content > p").everyTime(30000, function() {
$.ajax({
type: "POST", url: "shoutbox.php", data: "action=update",
complete: function(data){
loading.fadeOut();
messageList.html(data.responseText);
messageList.fadeIn("fast");
}
});
});
$.ajax({
type: "POST", url: "shoutbox.php", data: "action=update",
complete: function(data){
loading.fadeOut();
messageList.html(data.responseText);
messageList.fadeIn("fast");
}
});
});
everyTime(30000) - время в милисекундах, через которое содержимое окна будет обновляться. В примере стоит 30 секунд.
Скачать плагин с исправленным shoutbox.js здесь. Демка работает по первоначальному варианту, но вы можете легко протестировать обновленный скрипт у себя на сайте.
P.P.S исправляем проблему букв "И" и "ш"
Я решил эти буквы просто заменить на их символы из "Таблица символов Unicode". Найдите строчку case "insert": (66-ая строка) в файле shoutbox.php и замените содержимое case на этот код: напишите следующее правило:
Code
$message = str_replace("ш", "ш", $_POST['message']);
$message = str_replace("И", "И", $message);
$nick = str_replace("ш", "ш", $_POST['nick']);
$nick = str_replace("И", "И", $nick);
echo insertMessage($nick, $message);
$message = str_replace("И", "И", $message);
$nick = str_replace("ш", "ш", $_POST['nick']);
$nick = str_replace("И", "И", $nick);
echo insertMessage($nick, $message);
Решение достаточно простое: мы просто перед тем как новое сообщение добавить в БД, заменяем проблемные буквы на них же, но в символьном варианте
-
FalleN -
9906 -
1 -
308
Но только нужно ставить наверное на те модули которые обновляться должны не раньше через пару тройку минут
С Уважением, Андрей...