Как сделать чат php

Простой чат для сайта на PHP, HTML и JavaScript в один файл

Чат без базы данных, без MySQL, без каких-либо jQuery и других фреймворков — только чистый JS.

Чат в двух форматах — windows-1251 и UTF-8

История чата хранится в HTML файле, куда записываются уже оформленные в HTML сообщения.

Чат без авторизации.

Чат без использования WebSockets и long polling.

Запоминание выбранного ника в куках.

Чат с возможностью вырезания всякого «ге» из текста и ника при постинге и ограничение их по длине.

Обрезка подгружаемого куска чата

Отправка данных только в случае, если они были изменены (но отправляется весь кусок)

Отключаемый звук отправки/получения сообщения

Возможность задать время опроса, путь до файла с чатом, длину пересылаемого куска, оформление сообщений

Блокирование диалогов при загрузке и постинге, если скорость низкая

Подсказки в случае всяких фейлов

Кросс-браузерная работа — традиционно WebKit-ы (Chrome, Safari и др.), Firefox.

Отлично смотрится на мобильных устройствах.

Огромное пространство для творчества и модификаций.

Все максимально просто, коротко, понятно и со вкусом

Скачать чат для сайта.

Вопросы и ответы про чат для сайта.

Как убрать вывод IP, чтобы сохранять конфиденциальность?

Есть возможность убрать вывод IP — найдите и удалите в файле такой текст: (‘ . $id . ‘) .

Как очистить чат от ненужных записей?

Возможность быстро очистить чат от ненужных записей — Чат пишется в файл chat.db — это по сути обычный html-файл и там можно подправить все, что надо, открыв его обычным текстовым редактором. Либо вообще удалить этот файл — тогда чат пересоздаст его и будет полностью чист.

Проблемы с отражением на windows-1251

На хостинге нужно правильно настроить кодировку и проверить наличие расширения mbstring у PHP — иначе будут проблемы с работой чата.

Либо используйте чат, написанный под UTF-8.

Как вставить чат на свой сайт?

Скопировать в любой каталог на сайте файл чата (можно даже в корень) и проверить его доступность.

Например, если положили в корень своего сайта, то попробовать открыть URL вида вашсайт/chat.php, или, если в папку — то вашсайт/папка/chat.php.

Если открываться не будет — значит либо надо доступ до него прописать, либо изменить rewrite-правила в зависимости от того, какой веб-сервер используется.

Вставить на все страницы сайта проще всего через iframe.

CppComet

За исключением случаев, когда указано иное, содержимое этой вики предоставляется на условиях следующей лицензии: Public Domain

Вы посетили: • Как сделать чат

Как сделать чат

В данной статье рассмотрим, как сделать чат с авторизацией на php с использованием комет сервера. Наш php chat будет работать по технологии websocket. Для связи php с websocket сервером надо использовать php comet api.

Первый пример это html скрипт чата для сайта, он будет работать без регистрации пользователей и легко вставится в любую html страницу. Мы его рассмотрим первым по тому что это наиболее простой пример чата использующего комет сервер, а затем на его основе напишем чат для сайта на php с авторизацией пользователей в чате и уведомлениями о входе и выходе пользователей.

В данной статье рассматривается вопрос создания чата, где все пользователи общаются в одной общей комнате. Если вам нужен чат для личного общения пользователей между собой (общение в диалогах один на один), то вам больше подойдёт чат плагин личной переписки между пользователями

Пример создания простейшего чата на php

Первое в чём следует разобраться что такое каналы (pipe) в комет сервере. Канал это именованный поток сообщений, в который можно самому отправлять сообщения и можно подписаться на те сообщения которые туда отправляются кем то другим.

Если рассматривать наиболее простой скрипт чата для сайта, то нам понадобится всего один канал. Все участники подписываются на сообщения из этого канала, а для добавления сообщения в чат просто отправляем сообщение в канал.

Вот принцип работы простого чата для сайта

Все сообщения от всех пользователей отправляются в общий канал web_chat_pipe.
Структура сообщения содержит в себе текст сообщения и имя отправившего это сообщение.

Все пользователи участвующие в чате подписаны на канал чата. И полученные из него сообщения отображаются в ленте общения.

Примечание: В примерах будет использована библиотека JQuery.

Сначала разберём как работает простой скрипт онлайн чата. Приведу сразу весь код, а потом разберём его подробно. Первое что надо отметить это то что в данном чате люди общаются, используя только лишь комет сервер. Это имеет ряд недостатков, делающий из чата скорее прощёную учебную модель.

Нет возможности забанить человека
Нет авторизации, это позволяет любому представится кем угодно.
Просто в реализации, фактически это javascript чат (php не используется)
Прост поцес установки чата на сайт

DOCTYPE HTML> head> title>Comet Server - Пример php чатаtitle> script language="JavaScript" type="text/javascript" src="https://comet-server.ru/template/Profitable_site/js/jquery-2.0.3.min.js" >script> script language="JavaScript" type="text/javascript" src="https://comet-server.ru/CometServerApi.js" >script> head> body> div id="WebChatFormForm" >div> input type="text" id="WebChatNameID" placeholder="Укажите ваше имя. " > br> textarea id = "WebChatTextID" placeholder = "Отправьте сообщение в online чат. " >textarea>br> input type="button" onclick="web_send_msg();" value="Отправить" > div id="answer_div" >div> script> // вырезает html теги function strip(html)  var tmp = document.createElement("DIV"); tmp.innerHTML = html; return tmp.textContent  // Отправляет сообщение в чат function web_send_msg() { // Получение значений из элементов ввода. var text = $("#WebChatTextID").val(); // Получаем текст сообщения var name = $("#WebChatNameID").val(); // Получаем имя пользователя // Очистка поля с текстом сообщения $("#WebChatTextID").val(""); // Добавление отправленного сообщения к списку сообщений. $("#WebChatFormForm").append("
"+strip(name)+": "+text+"
"); // Отправка сообщения в канал чата CometServer().web_pipe_send("web_chat_pipe", {"text":text, "name":name}); } // Функция выполнится после загрузки страницы $(document).ready(function() { CometServer().start({dev_id:1}) // Подключаемся к комет серверу // Подписываемся на канал в который и будут отправляться сообщения чата. CometServer().subscription("web_chat_pipe", function(msg) { console.log(msg) // Добавление полученного сообщения к списку сообщений. $("#WebChatFormForm").append("
"+strip(msg.data.name)+": "+msg.data.text+"
"); }); }); script> body> html>

Online demo

Ну вот теперь по кусочкам рассмотрим работу скрипта онлайн чата:

Функция web_send_msg отправляет сообщение в чат.

// вырезает html теги function strip(html)  tmp.innerText  function web_send_msg() { // Получение значений из html элементов ввода. var text = $("#WebChatTextID").val(); // Получаем текст сообщения var name = $("#WebChatNameID").val(); // Получаем имя пользователя // Очистка поля с текстом сообщения $("#WebChatTextID").val(""); // Добавление отправленного сообщения в свой список сообщений. $("#WebChatFormForm").append("
"+strip(name)+": "+strip(text)+"
"); // Отправка сообщения в канал чата. CometServer().web_pipe_send("web_chat_pipe", {"text":text, "name":name}); }

Здесь можно уточнить что строка: $(«#WebChatFormForm»).append(«

»+strip(name)+«: »+strip(text)+«

»); добавляет напечатанное сообщение в нашу чат ленту, так чтоб потом было удобно перечитывать сообщения.

А вот вызов CometServer().web_pipe_send(«web_chat_pipe», ); производит непосредственно отправку нашего сообщения всем остальным участникам онлайн чата. Первый аргумент это имя канала в который мы отправим сообщение. Второй аргумент это само сообщение, содержащие имя отправителя и текст сообщения.

Обратите внимание что имя канала (web_chat_pipe) начинается с префикса «web_». Во все каналы имя которых начинается с префикса «web_» сообщение может отправить любой кто знает имя канала прямо из JavaScript. В ряде случаев это может позволить значительно разгрузить ваш собственный сервер.

Разберём вторую половину скрипта чата:

Следующий код выполняется один раз при загрузке страницы. В нём мы подписываемся на канал для получения сообщений из чата и назначаем функцию обработчик для получения отчёта о доставке сообщений.

$(document).ready(function() { CometServer().start({dev_id:1}) // Подключаемся к комет серверу // Подписываемся на канал в который и будут отправляться сообщения чата. CometServer().subscription("web_chat_pipe", function(msg) { // Добавление полученного сообщения к списку сообщений. $("#WebChatFormForm").append("
"+strip(msg.data.name)+": "+strip(msg.data.text)+"
"); }); });

CometServer().start({dev_id:1})

выполняет подключение к комет серверу. В качестве dev_id надо передавать свой публичный ключ разработчика.

Следующий код назначает функцию обработчик, которая будет вызываться каждый раз, когда в канал web_chat_pipe будет приходить сообщение. Первый аргумент – это имя канала, а второй – это функция обработчик.

CometServer().subscription("web_chat_pipe", function(data) { // Добавление полученного сообщения к списку сообщений. $("#WebChatFormForm").append("
"+strip(msg.data.name)+": "+strip(msg.data.text)+"
"); });

В функцию обработчик передаётся первым параметром объект содержащий информацию о сообщении и само сообщение.

Вот формат входящих сообщений. Поле data содержит те данные которые мы отправили в качестве сообщения. А поле server_info содержит информацию которую добавляет комет сервер к нашему сообщению.

data: name: "" text: "" server_info: event: "undefined" // Имя события history: false // Если true то это данные загружаемые из истории канала а не пришедшие сейчас marker: undefined // Специальный идентификатор, определён только когда history равно true pipe: "web_chat_pipe" // Имя канала которому адресовано сообщение user_id: 0 // Id отправителя, если 0 то не задан. Будет добавляется автоматически если человек авторизован на комет сервере. 

В данном случаи что бы к нам не пришло, мы рассчитываем что это сообщение для чата которое мы уже научились отправлять вызовом

CometServer().web_pipe_send("web_chat_pipe", {"text":text, "name":name}); 

Обработку ошибок оставим на потом чтоб не раздувать код примеров.

Следующий фрагмент кода назначает функцию обработки на получение отчёта о доставке сообщения.

CometServer().subscription("_answer_to_web_chat_pipe", function(p) { $("#answer_div").html("Сообщение доставлено "+p.data.number_messages+" получателям. "+p.data.error); });

Здесь первый аргумент это строка в которой первый символ # и за ним имя канала отчёт о доставки сообщения в который мы ждём. В прицепе нет необходимости в обработке отчёта о доставке. Из него мы можем узнать не возникало ли каких либо ошибок.

Как сделать чат с авторизацией

В предыдущем примере скрипта мини чата каждый может представится любым именем, в большинстве случаев на практике вам понадобятся функции администрирования для чата чтоб были возможности встроить блокировку пользователей нарушающих правила или отправляющих спам. По этому рассмотрим, как сделать чат с авторизацией. Для этого придётся часть кода чата написать на php.

Здесь рабочее online демо чата с авторизацией. Теперь рассмотрим общий алгоритм работы чата с авторизацией:

Сначала появляется окно авторизации в чате.
В момент авторизации отправляется ключ авторизации в комет сервер и пользователю на страницу.
Пользователь соединяется с комет сервером по webSocets и передаёт ему свой ключ и id.

Комет сервер сверяет полученные от пользователя данные с тем, что прислал php и, если всё верно, то авторизация считается пройденной.

После авторизации обмен ведётся, как и в первом примере чата, но теперь к сообщениям от пользователя комет сервер добавляет id пользователя.

Всё. Таким образом, пользователь не может подделать данные и выбрать чужое имя в чате, так как для этого надо знать чужой пароль.

Код примера чата на php

Теперь весь код примера чата на php, а затем мы его рассмотрим подробно:

 // Список пользователей, вместо базы используется массив, чтобы не усложнять пример $users = Array( "victor"=> Array("pass" => "qwerty", "id" => 1, "name" => "Виктор"), "dimon"=> Array("pass" => "qwerty", "id" => 2, "name" => "Димон"), "olga"=> Array("pass" => "qwerty", "id" => 3, "name" => "Оля"), "kate"=> Array("pass" => "qwerty", "id" => 4, "name" => "Катя"), "masha"=> Array("pass" => "qwerty", "id" => 5, "name" => "Маша"), ); // Список соответсвия имени к id пользователя $usersPublicData = Array( 1 => "Виктор", 2 => "Димон", 3 => "Оля", 4 => "Катя", 5 => "Маша", ); // Включаем php ссесию session_start(); /** * Выполняем авторизацию на комет сервере * Второй параметр это ваш публичный идентификатор разработчика * Третий параметр это ваш секретный ключ разработчика */ $comet = mysqli_connect("app.comet-server.ru", "15", "lPXBFPqNg3f661JcegBY0N0dPXqUBdHXqj2cHf04PZgLHxT6z55e20ozojvMRvB8", "CometQL_v1"); // Если получаем команду уничтожить ссесию if( isset($_GET["exit"])) { echo "Вы покинули php чат. /" >Перейти к форме авторизации в чате"; if(isset($_SESSION["userName"])) { // Оповещаем всех что человек покинул чат mysqli_query($comet, "INSERT INTO pipes_messages (name, event, message)VALUES('loginPipe', 'userExit', '".mysqli_real_escape_string($comet,json_encode(Array( "name" => $_SESSION["userName"] )))."')"); } session_destroy(); exit; } // Если получили переменные login и pass то выполним авторизацию if( isset($_GET["login"]) && isset($_GET["pass"])) { if( !isset($users[$_GET["login"]])) { echo "В базе нет такого пользователя"; header("Location: /"); exit; } if( $users[$_GET["login"]]["pass"] !== $_GET["pass"] ) { echo "Пароль не верный"; header("Location: /"); exit; } // Оповещаем всех, что залогинился человек и теперь онлайн в чате mysqli_query($comet, "INSERT INTO pipes_messages (name, event, message)VALUES('loginPipe', 'userLogin', '".mysqli_real_escape_string($comet,json_encode(Array( "name" => $users[$_GET["login"]]["name"])))."')"); // Генерируем ключ авторизации для пользователя на комет сервере. Длиной не более 32 символов. $userCometHash = md5("Соль для хеша ".date("U")); // Сообщаем ключ авторизации комет серверу. mysqli_query($comet, "INSERT INTO users_auth (id, hash)VALUES (".$users[(int)$_GET["login"]]["id"].", '".mysqli_real_escape_string($comet, $userCometHash)."')"); echo "
"; echo $userCometHash."\n"; echo "
"; // Добавляем в сессию данные о пользователе $_SESSION["userHash"] = $userCometHash; $_SESSION["userId"] = $users[$_GET["login"]]["id"]; $_SESSION["userLogin"] = $_GET["login"]; $_SESSION["userName"] = $users[$_GET["login"]]["name"]; echo "Авторизация прошла успешно. /" >Перейти к чату"; exit; } ?>       if( !isset($_SESSION["userLogin"] )) { ?> 
Форма авторизации

Возможные имена: victor, dimon, olga, kate, masha

  } else { ?> Ваше имя в чате  echo $_SESSION["userName"]; ?> 
 Выйти  } ?>   
Теперь рассмотрим код чата на php подробно:
Для реализации авторизации в чате на php нам надо иметь базу пользователей, и какой-то backend для работы с этой базой. Так как это учебный пример, и цель примера научить работе с комет сервером, то мы вместо хранения логинов и паролей пользователей чата в базе данных mysql зададим массив в котором жёстко пропишем имена и пароли для 5 тестовых пользователей php чата.
// Список пользователей, вместо базы используется массив чтоб не усложнять исходники чата на php. $users = Array( "victor"=> Array("pass" => "qwerty", "id" => 1, "name" => "Виктор"), "dimon"=> Array("pass" => "qwerty", "id" => 2, "name" => "Димон"), "olga"=> Array("pass" => "qwerty", "id" => 3, "name" => "Оля"), "kate"=> Array("pass" => "qwerty", "id" => 4, "name" => "Катя"), "masha"=> Array("pass" => "qwerty", "id" => 5, "name" => "Маша"), ); // Список соответсвия имени к id пользователя. $usersPublicData = Array( 1 => "Виктор", 2 => "Димон", 3 => "Оля", 4 => "Катя", 5 => "Маша", );
Код подключения из php к комет серверу. Указываем ваш ключ и пароль для комет сервера.
$comet = mysqli_connect("app.comet-server.ru", "15", "lPXBFPqNg3f661JcegBY0N0dPXqUBdHXqj2cHf04PZgLHxT6z55e20ozojvMRvB8", "CometQL_v1"); 
Код обработки выхода пользователя из php чата:
// Если получаем команду уничтожить сессию if( isset($_GET["exit"])) { session_destroy(); echo "Вы покинули чат. /" >Перейти к форме авторизации"; // Оповещаем всех что человек покинул чат mysqli_query($comet, "INSERT INTO pipes_messages (name, event, message)VALUES('loginPipe', 'userExit', '".mysqli_real_escape_string($comet,json_encode(Array( "name" => $_SESSION["userName"] )))."')"); exit; }
Когда человек нажимает на ссылку выхода из чата, мы уничтожаем сессию и отправляем всем остальным участникам сообщение об этом. Здесь loginPipe это имя канала, а userExit это имя события в канале. Для удобства можно через один канал отправлять события с разными именами.
Следует обратить внимание что канал для уведомлений о попадании в чат называется loginPipe, то есть не содержит префикса «web_» а это означает, что в него можно отправить сообщение только через CometQL при наличии секретного ключа разработчика.
Авторизация пользователей в чате
Теперь авторизация пользователей в чате. В начале идёт код проверки логина и пароля, затем уведомление всех о входе пользователя в чат. А потом начинается интересное.
// Если получили переменные login и pass то выполним авторизацию if( isset($_GET["login"]) && isset($_GET["pass"])) { if( !isset($users[$_GET["login"]])) { echo "В базе нет такого пользователя"; exit; } if( $users[$_GET["login"]]["pass"] !== $_GET["pass"] ) { echo "Пароль не верный"; exit; } // Оповещаем всех что залогинился человек и теперь онлайн в чате mysqli_query($comet, "INSERT INTO pipes_messages (name, event, message)VALUES('loginPipe', 'userLogin', '".mysqli_real_escape_string($comet,json_encode(Array( "name" => $users[$_GET["login"]]["name"])))."')"); // Генерируем ключ авторизации для пользователя на комет сервере. Длиной не более 32 символов. $userCometHash = md5("Соль для хеша ".date("U")); // Сообщаем ключ авторизации комет серверу. mysqli_query($comet, "INSERT INTO users_auth (id, hash)VALUES (".$users[(int)$_GET["login"]]["id"].", '".mysqli_real_escape_string($comet, $userCometHash)."')"); echo "
"; echo $userCometHash."\n"; echo "
"; // Добавляем в сессию данные о пользователе $_SESSION["userHash"] = $userCometHash; $_SESSION["userId"] = $users[$_GET["login"]]["id"]; $_SESSION["userLogin"] = $_GET["login"]; $_SESSION["userName"] = $users[$_GET["login"]]["name"]; echo "Авторизация прошла успешно. /" >Перейти к чату"; exit; }
В переменную $userCometHash генерируется ключ из 32 символов. Вот этот ключ мы в следующей строке кода отправляем комет серверу вместе с идентификатором пользователя.
// Генерируем ключ авторизации для пользователя на комет сервере. Длиной не более 32 символов. $userCometHash = md5("Соль для хеша ".date("U")); // Сообщаем ключ авторизации комет серверу. mysqli_query($comet, "INSERT INTO users_auth (id, hash)VALUES (".$users[(int)$_GET["login"]]["id"].", '".mysqli_real_escape_string($comet, $userCometHash)."')"); 
Всё теперь комет сервер имеет связку id+хеш по которой он может идентифицировать нашего пользователя. Теперь осталось этот же хеш авторизации и id передать пользователю. Это мы сделаем в JavaScript при подключении к комет серверу.
Вот в этом фрагменте кода мы подключаемся к комет серверу и передаём туда публичный идентификатор разработчика, идентификатор пользователя и его ключ авторизации. Стоит посмотреть где этот вызов находится в общем коде.
// Подключаемся к комет серверу CometServer().start({dev_id:15, // Ваш публичный id user_id:"", // id пользователя user_key:""}) // ключ пользователя
С авторизацией думаю ясно. Теперь посмотрим на получение уведомлений о входе и выходе собеседников. Здесь довольно просто. Сообщения как о входе так и о выходе людей отправляются в один и тот же канал, но имеют разное имя события. Что бы назначить обработчик на определённое событие а не на все сообщения в канале мы указываем сначала имя канала потом ставим точку и пишем имя события. Таким образом следующий код ставит две функции каждая из которых обрабатывает свои тип событий из одного и того же канала.
// Подписываемся на сообщения о входе людей в чат CometServer().subscription("loginPipe.userLogin", function(msg) { // Добавление уведомления в ленту сообщений $("#WebChatFormForm").append("
Пользователь "+strip(msg.data.name)+" вошёл в чат.
"); }); // Подписываемся на сообщения о выходе людей из чата CometServer().subscription("loginPipe.userExit", function(msg) { // Добавление уведомления в ленту сообщений $("#WebChatFormForm").append("
Пользователь "+strip(msg.data.name)+" покинул в чат.
"); });
Вот вообщем всё, мы рассмотрели пример создания простого чата на php. Comet сервер позволил в значительной мере упростить создание чата на php.
Сохранение сообщений в бд
Если вам надо сохранять сообщения в бд или дополнительно их фильтровать или как-то дополнять данными. То вот есть ещё пример чата https://github.com/CppComet/php-chat-example похожий на примеры этой статьи, но в нём отправка сообщений идёт не через вызов функции web_pipe_send, а через ajax запрос к php скрипту, который уже направляет сообщение в комет сервер. Если использовать его, то можно вставить свою произвольную обработку сообщений, в том числе и их сохранение в файле https://github.com/CppComet/php-chat-example/blob/master/chat.php 
 Обсуждение 
Станислав , 2015/11/06 20:17
Спасибо за прекрасное описание. К сожалению, после подключения скрипта чата на html-страницу сайта отображаются только свои записи, а записи другого собеседника, который в данный момент присутствует на сайте не выводятся на странице сайта. Что упущено при встраивании скрипта на страницу сайта. С уважением! Буду признателен тому, кто поможет.
Trapenok Victor , 2015/11/07 16:05
Здравствуйте. По вашему описанию проблемы сложно определить причину. Вы можете выслать адрес страницы на которую вставили скрипт чата технической поддержке на почту support@comet-server.ru и вам помогут.
Данияр , 2015/12/22 09:04
Здравствуйте, а можно-ли реализовать, пускай самый примитивный, чат (без регистрации) на чистом php, без каких-либо сторонних библиотек и ЯП?
Trapenok Victor , 2015/12/22 09:20
Да можно но сложно и с производительностью будут проблемы.
Если скажем вместо открытия вебсокета просто аяксом раз в секунду запрашивать новые сообщения это будет называться poling это самый простой способ но нагрузка от ежесекундных запросов будет очень большой. И сообщения будут приходить не сразу а раз в секунду.
Если использовать WebSockets то вот есть например статья ( habrahabr.ru/post/209864/ ) это гораздо лучше чем использование тех же ежесекундных ajax запросов но в реализации всё равно сложнее и скорее всего менее производительно чем использование готового комет сервера.
Александр , 2016/03/24 14:44
Нормально написано, очень даже хорошо. Но у меня работает только простой чат. А сложный не работает ни в какую, хоть расшибись, все строки сто раз пересмотрел, все перепроверил. На экран в браузерах выводит просто содержимое файла authChat.php . Если знаете в чем дело подскажите, несколько часов бьюсь. Немогу уже.
Trapenok Victor , 2016/03/24 18:05
Простой чат работает на только на Js, а этот использует ещё и php. Если ваш веб сервер выводит на экран содержимое php файла то это значит что у него не настроен/отключён или отсутствует интерпретатор php кода.
Вы его локально запустить пытаетесь или на хостинге? Если на хостинге то эту проблему надо решать с вашим хостером. Если локально то ищите проблему не в самом чате, а в настройках своего веб-сервера.
Как создать простое приложение веб-чата
В этом уроке мы будем создавать простое приложение веб-чата с помощью PHP и jQuery. Утилита такого типа прекрасно подойдет для системы онлайн-поддержки вашего сайта.

Введение
 
Приложение чата, которое мы сегодня построим, будет довольно простым. Оно будет включать в себя систему входа и выхода, возможности в AJAX-стиле, а также предложит поддержку нескольких пользователей.
Шаг 1: HTML разметка
Мы начнем этот урок с создания нашего первого файла index.php.
 xmlns="http://www.w3.org/1999/xhtml"> 
 Chat - Customer Module 
 type="text/css" rel="stylesheet" href="style.css" /> 
 id="wrapper"> 
 id="menu"> 
 class="welcome">Welcome, 
 class="logout"> id="exit" href="#">Exit Chat
  
 style="clear:both">

 id="chatbox">