Пишем чат своими руками

Пишем свой чат

Написание чата ничем особенным не отличается. Та же запись в файлы, чтение из них информации и вывод ее на экран. Однако есть кое-какие тонкости. Сообщения в чат поступают в режиме реального времени, поэтому для поддержания этого режима необходимо периодически обновлять содержимое html-страницы. Это осуществляется с помощью мета-инструкции .В данном случае будем обновлять страницу с интервалом в 10 секунд, этого вполне достаточно. Итак, приступим непосредственно к чату.

Вход в чат

Сгенерируем форму для входа в чат.

Посетитель выбирает себе ник и цвет, под которым будут выводиться его сообщения. Далее,скрипт получает эти данные и обрабатывает их.

Как видите, форма имеет 2 кнопки, предусмотрена кнопка выхода из чата, а также кнопка для отправки сообщения в чат. Это будет рассмотрено далее.

Добавление сообщения в чат

После того, как посетитель ввел сообщение и нажал кнопку «Отправить», сообщение записывается в файл. Ник посетителя и цвет сообщений передаются в скрытых полях формы.

Выход из чата

Если посетитель нажал кнопку «Выход».

Показ посетителей,в данный момент находящихся в чате

Вывод системного журнала

В системный журнал пишутся сообщения о входе в чат и выходе из него. Он постоянно динамически обновляется. Для вывода его на экран читаем файл syslog.txt

Вывод сообщений

Здесь тоже ничего особенного.Просто выводим сообщения на экран,каждые 10 секунд обновляя его.

Главная страница

Вот мы и добрались до главной страницы, на которой, собственно, и происходит все это. Она представляет собой набор фреймов, в каждом из которых производятся совершенно независимые действия.

Источник

Простой чат на JavaScript и PHP

1. CREATE TABLE IF NOT EXISTS `chat` (
2. `id` int ( 15 ) NOT NULL AUTO_INCREMENT ,
3. `name` varchar ( 30 ) NOT NULL ,
4. `text` text NOT NULL ,
5. PRIMARY KEY ( `id` )
6. ) ENGINE = MyISAM DEFAULT CHARSET = cp1251 AUTO_INCREMENT = 1 ;

1. script type = «text/javascript» src = «js/jquery-1.4.4.min.js» > / script >
2. script type = «text/javascript» src = «js/jquery.timers.js» > / script >
3. script type = «text/javascript» src = «js/jquery.cookie.js» > / script >

1. style >
2. #msg-box
3. #msg-box ul
4. #t-box
5. / style >
6. div id = «msg-box» >
7. ul >
8. / ul >
9. / div >
10. form id = «t-box» action = «?» style = «» >
11. Имя: input type = «text» class = ‘name’ style = «width:100px;» >
12. input type = «text» class = ‘msg’ style = «width:500px;» >
13. input type = «submit» value = «Отправить» style = «margin-top:5px;» >
14. / form >

1. //Функции для работы с БД
2. function getQuery ( $query ) <
3. $res = mysql_query ( $query ) or die ( mysql_error ( ) ) ;
4. $row = mysql_fetch_row ( $res ) ;
5. $var = $row [ 0 ] ;
6. return $var ;
7. >
8. function setQuery ( $query ) <
9. $res = mysql_query ( $query ) or die ( mysql_error ( ) ) ;
10. return $res ;
11. >
12. //Соединяемся с базой
13. @ mysql_connect ( ‘localhost’ , ‘root’ , » ) or die ( «Не могу соединиться с MySQL.» ) ;
14. @ mysql_select_db ( ‘best’ ) or die ( «Не могу подключиться к базе.» ) ;
15. @ mysql_query ( ‘SET NAMES utf8;’ ) ;
16. switch ( $_GET [ «event» ] ) <
17. //Тут раздаем последние сообщения
18. case «get» :
19. //Сколько сообщений раздавать пользователям
20. $max_message = 60 ;
21. //Всего сообщений в чате
22. $count = getQuery ( «SELECT COUNT(`id`) FROM `chat`;» ) ;
23. //Максимальный ID сообщения
24. $m = getQuery ( «SELECT MAX(id) FROM `chat` WHERE 1» ) ;
25. //Удаление лишних сообщений.
26. //Если хотите, чтобы сохранялась вся история, смело сносите этот кусочек
27. if ( $count > $max_message ) <
28. setQuery ( «DELETE FROM `chat` WHERE `id` . ( $m — ( $max_message — 1 ) ) . «;» ) ;
29. >
30. //Принимаем от клиента ID последнего сообщения
31. $mg = $_GET [ ‘id’ ] ;
32. //Генерируем сколько сообщений нехватает клиенту
33. if ( $mg == 0 )
34. if ( $mg 0 )
35. $msg = array ( ) ;
36. //Если у клиента не все сообщения, отсылаем ему недостоющие
37. if ( $mg $m ) <
38. //Берем из базы недостобщие сообщения
39. $query = «SELECT * FROM `chat` WHERE `id`>» . $mg . » AND `id` . $m . » ORDER BY `id` » ;
40. $res = mysql_query ( $query ) or die ( mysql_error ( ) ) ;
41. while ( $row = mysql_fetch_array ( $res ) ) <
42. //Заносим сообщения в массив
43. $msg [ ] = array ( «id» => $row [ ‘id’ ] , «name» => $row [ ‘name’ ] , «msg» => $row [ ‘text’ ] ) ;
44. >
45. >
46. //Отсылаем клиенту JSON с данными.
47. echo json_encode ( $msg ) ;
48. break ;
49. case «set» :
50. //Принимаем имя.
51. $name = htmlspecialchars ( $_GET [ ‘name’ ] ) ;
52. //Принимаем текст сообщения
53. $msg = htmlspecialchars ( $_GET [ «msg» ] ) ;
54. //Сохраняем сообщение
55. setQuery ( «INSERT INTO `chat` (`id` ,`name` ,`text` )VALUES (NULL , ‘» . mysql_real_escape_string ( $name ) . «‘, ‘» . mysql_real_escape_string ( $msg ) . «‘);» ) ;
56. break ;
57. >

Как же работает этот скрипт? Сначала, подключается к базе данных. После подключения, смотрим, что запришивает клиент.
Если он запрашивает сообщения, то генерируем сколько сообщений не хватает клиенту. Затем, запрашиваем в безе все необходимые сообщения, добавляем их в массив, генерируем JSON и посылаем все это дело клиенту.

Теперь, у нас есть основа для чата. Все, что нам осталось сделать, так это обновление чата на стороне клиента и добавление новых сообщений в чат. Для всего этого, мы будем использовать Ajax запросы.
Давайте, создадим в файле index.php скрипт для обработки и добавления сообщений.
Добавим между тегов head >. head > наш Javascript:

1. $ ( function ( ) <
2. //Если куки с именем не пустые, тащим имя и заполняем форму с именем
3. if ( $. cookie ( «name» ) != «» )
4. //Переменная отвечает за id последнего пришедшего сообщения
5. var mid = 0 ;
6. //Функция обновления сообщений чата
7. function get_message_chat ( ) <
8. //Генерируем Ajax запрос
9. $. ajaxSetup ( < url : "chat.php" , global : true , type : "GET" , data : "event=get&id=" + mid + "&t=" +
10. ( new Date ) . getTime ( ) > ) ;
11. //Отправляем запрос
12. $. ajax ( <
13. //Если все удачно
14. success : function ( msg_j ) <
15. //Если есть сообщения в принятых данных
16. if ( msg_j. length > 2 ) <
17. //Парсим JSON
18. var obj = JSON. parse ( msg_j ) ;
19. //Проганяем циклом по всем принятым сообщениям
20. for ( var i = 0 ; i obj. length ; i ++ ) <
21. //Присваиваем переменной ID сообщения
22. mid = obj [ i ] . id ;
23. //Добавляем в чат сообщение
24. $ ( «#msg-box ul» ) . append ( «
25. » + obj [ i ] . name + «: » + obj [ i ] . msg + » » ) ;
26. >
27. //Прокручиваем чат до самого конца
28. $ ( «#msg-box» ) . scrollTop ( 2000 ) ;
29. >
30. >
31. > ) ;
32. >
33. //Первый запрос к серверу. Принимаем сообщения
34. get_message_chat ( ) ;
35. //Обновляем чат каждые две секунды
36. $ ( «#t-box» ) . everyTime ( 2000 , ‘refresh’ , function ( ) <
37. get_message_chat ( ) ;
38. > ) ;
39. //Событие отправки формы
40. $ ( «#t-box» ) . submit ( function ( ) <
41. //Запрашиваем имя у юзера.
42. if ( $ ( «#t-box input[class=’name’]» ) . attr ( «value» ) == «» ) < alert ( "Пожалуйста, введите свое имя!" ) >else <
43. //Добавляем в куки имя
44. $. cookie ( «name» , $ ( «#t-box input[class=’name’]» ) . attr ( «value» ) ) ;
45. //Тащим сообщение из формы
46. var msg = $ ( «#t-box input[class=’msg’]» ) . val ( ) ;
47. //Если сообщение не пустое
48. if ( msg != «» ) <
49. //Чистим форму
50. $ ( «#t-box input[class=’msg’]» ) . attr ( «value» , «» ) ;
51. //Генерируем Ajax запрос
52. $. ajaxSetup ( < url : "chat.php" , type : "GET" , data : "event=set&name=" +
53. $ ( «#t-box input[class=’name’]» ) . val ( ) + «&msg=» + msg > ) ;
54. //Отправляем запрос
55. $. ajax ( ) ;
56. >
57. >
58. //Возвращаем false, чтобы форма не отправлялась.
59. return false ;
60. > ) ;
61. > ) ;

Разберем этот скрипт…
Строка (3). Если в куках есть имя пользователя, то заполняем форму с именем. Для чего это сделано? Если пользователь обновил страничку с чатом или зашел заново на страницу с чатом, то ему не придется вводить свое имя заново.
Строка (7). Функция обновления чата. Чат обновляется не полностью, а присылаются только те сообщения, которых нет в чате.
Строка (9). Генерируем Ajax запрос. Для чего нужно отправлять лишнюю переменную «t=»+(new Date).getTime()? Если не отправить, то некоторые браузеры кэшируют одинаковые Ajax запросы. А нам это не нужно! т.к. не смогут обновляться сообщения. Функция (new Date).getTime() возвращает время в миллисекундах. Таким образом, браузер не кэширует запрос, т.к. при каждой отправке, генерируется разная строка.
Строка (16). Почему именно больше двух символов? Да потому что если все сообщения в чате есть, то сервер присылает не пустую строку, а «[]». т.к. ответ генерируется в JSON.
Строка (37). Запрос новых сообщений раз в две секунды. Мне очень понравился плагин jQuery Timers. С помощью него можно очень гибко сделать повторение определенных действий любое количество раз.

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

Источник

Как создать простое приложение веб-чата

В этом уроке мы будем создавать простое приложение веб-чата с помощью PHP и jQuery. Утилита такого типа прекрасно подойдет для системы онлайн-поддержки вашего сайта.

Введение

Приложение чата, которое мы сегодня построим, будет довольно простым. Оно будет включать в себя систему входа и выхода, возможности в AJAX-стиле, а также предложит поддержку нескольких пользователей.

Шаг 1: HTML разметка

Мы начнем этот урок с создания нашего первого файла index.php.

• Мы начнем наш html с обычных DOCTYPE, html, head, и body тагов. В таг head мы добавим наш заголовок и ссылку на нашу таблицу стилей css (style.css).
• Внутри тага body, мы структурируем наш макет внутри блока — обертки #wrapper div. У нас будет три главных блока: простое меню, окно чата и поле ввода нашего сообщения; каждый со своим соответствующим div и id.
  • Блок меню #menu div будет состоять из двух абзацев. Первый будет приветствием пользователю и поплывет налево, а второй будет ссылкой на выход и поплывет направо. Мы также включим блок div для очистки элементов.
  • Блок чата #chatbox div будет содержать лог нашего чата. Мы будем загружать наш лог из внешнего файла с использованием ajax-запроса jQuery.
  • Последним пунктом в нашем блоке-обертке #wrapper div будет наша форма, которая будет включать в себя текстовое поле ввода для сообщения пользователя и кнопку отправки.
• Мы добавляем наши скрипты последними, чтобы грузить страницу быстрее. Сначала мы вставим ссылку Google jQuery CDN, так как в этом уроке мы будем использовать библиотеку jQuery. Наш второй таг скрипта будет там, где мы будем работать. Мы загрузим весь наш код после того, как документ будет готов.

Шаг 2: Создание стиля CSS

Теперь мы добавим немного css, чтобы заставить наше приложение чата выглядеть лучше, чем стиль браузера по умолчанию. Код, указанный ниже будет добавлен в наш файл style.css.

В вышеуказанном css нет ничего особенного, кроме того факта, что некоторые id или классы, для которых мы устанавливаем стиль, будут добавлены немного позже.

Как вы можете видеть выше, мы закончили строить пользовательский интерфейс чата.

Шаг 3: Используем PHP, чтобы создать форму входа.

Теперь мы реализуем простую форму, которая будет спрашивать у пользователя его имя, перед тем, как пустить его дальше.

Функция loginForm(), которую мы создали, состоит из простой формы входа, которая спрашивает у пользователя его/ее имя. Затем мы используем конструкцию if else, чтобы проверить, ввел ли пользователь имя. Если человек ввел имя, мы устанавливаем его, как $_SESSION[‘имя’]. Так как мы используем сессию, основанную на cookie, чтобы хранить имя, мы должны вызвать session_start() перед тем, как что-нибудь выводить в браузер.

Есть одна вещь, на которую вы возможно захотите обратить особое внимание — то, что мы использовали функцию htmlspecialchars(), которая конвертирует специальные символы в HTML сущности, тем самым защищая имя переменной, чтобы оно не стало жертвой межсайтового скриптинга (XSS). Мы также добавим эту функцию позже к текстовой переменной, которая будет опубликована в логе чата.

Отображение формы входа

Для того, чтобы показать форму логина в случае, если пользователь не вошел в систему, и следовательно, не сессия не создалась, мы используем другую инструкцию if else вокруг блока-обертки #wrapper div и тагов скрипта в нашем исходном коде. В противоположном случае, если пользователь вошел в систему и создал сессию, этот код спрячет форму входа и покажет окно чата.

Приветствие и меню выхода из системы

Мы еще не закончили создавать систему входа для этого приложения чата. Нам еще нужно дать пользователю возможность выйти из системы и закончить сессию чата. Как вы помните, наша исходная HTML разметка включала в себя простое меню. Давайте вернемся назад и добавим некоторый PHP код, который придаст меню больше функциональности.

Прежде всего, давайте добавим имя пользователя в сообщение приветствия. Мы сделаем это, выводя сессию имени пользователя.

Для того, чтобы позволить пользователю выйти из системы и завершить сессию, мы прыгнем выше головы и кратко используем jQuery.

Код jquery, приведенный выше просто показывает диалог подтверждения, если пользователь кликнет по ссылке выхода #exit. Если пользователь подтвердит выход, тем самым решив закончить сессию, мы отправим его в index.php?logout=true. Это просто создаст переменную с именем logout со значением true. Мы должны перехватить эту переменную с помощью PHP:

Теперь мы увидим, существует ли get переменная ‘logout’, используя функцию isset(). Если переменная была передана через url, такой, как ссылка, упомянутая выше, мы переходим к завершению сессии пользователя с текущим именем.

Перед уничтожением сессии пользователя с текущим именем с помощью функции session_destroy() мы хотим выводить простое сообщение о выходе в лог чата. В нем будет сказано, что пользователь покинул сессию чата. Мы сделаем это, используя функции fopen(), fwrite() и fclose(), чтобы манипулировать нашим файлом log.html, который, как мы увидим позднее, будет создан в качестве лога нашего чата. Пожалуйста, обратите внимание, что мы добавили класс ‘msgln’ в блок div. Мы уж определили стиль css для этого блока.

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

Шаг 4: Поддержка пользовательского ввода данных

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

jQuery

Практически все, что мы собираемся делать с jQuery для обработки наших данных, будет вращаться вокруг запроса на jQuery post.

1. Перед тем, как мы что-то начнем делать, мы должны захватить пользовательский ввод, или то, что он напечатал в поток ввода #submitmsg. Этого можно достигнуть функцией val(), которая берет значение, установленное в поле формы. Теперь мы сохраняем это значение в переменную clientmsg.
2. Вот и наступает самая важная часть: запрос jQuery post. Она отправляет запрос POST в файл post.php, который мы создадим через мгновение. Он отправляет ввод клиента, или то, что было сохранено в переменную clientmsg.
3. В конце мы очищаем ввод #usermsg, очищая атрибут значения.

Пожалуйста обратите внимание, что код, указанный выше, пойдет в наш таг скрипта, где мы поместили jQuery код выхода из системы.

PHP — post.php

На данный момент мы имеем данные POST, отправляемые в файл post.php каждый раз, когда пользователь отправляет форму и посылает новое сообщение. Наша задача теперь захватить эти данные и записать их в лог нашего чата.

1. Прежде чем мы что-либо сделаем, мы должны начать файл post.php с помощью функции session_start(), так как мы будем использовать сессию по имени пользователя в этом файле.
2. Используя логическую isset, мы проверим, существует ли сессия для ‘name’, перед тем, как что-то делать дальше.
3. Теперь мы захватим данные POST, которые jQuery послал в этот файл. Мы сохраним эти данные в переменную $text.
4. Эти данные, так же, как и вообще все данные, вводимые пользователем, будут храниться в файле log.html. Чтобы сделать это, мы откроем файл в режиме ‘a’ функции fopen, который согласно php.net открывает файл только для записи; помещает указатель файла на конец файла. Если файл не существует, попытаемся создать его. Затем мы запишем наше сообщение в файл, используя функцию fwrite().
   • Сообщение, которое мы будем записывать, будет заключено внутри блока .msgln div. Он будет содержать дату и время, сгенерированную функцией date(), сессию имени пользователя и текст, которые также будет окружен функцией htmlspecialchars(), чтобы избежать XSS.

И наконец, мы закрываем наш файл с помощью fclose().

Шаг 5: Отображение содержимого лога чата (log.html)

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

Чтобы сэкономить нам немного времени, мы предварительно загрузим лог чата в блок #chatbox div, как если бы он что-то содержал.

Мы используем процедуру, похожую на ту, что мы использовали в файле post.php, но на этот раз мы только читаем и выводим содержимое файла.

Запрос jQuery.ajax

Запрос ajax — это ядро всего, что мы делаем. Этот запрос не только позволяет нам посылать и принимать данные через форму без обновления страницы, но также и позволяет нам обрабатывать запрошенные данные.

Мы завернем наш ajax запрос в функцию. Вы увидите, зачем, прямо сейчас. Как вы можете видеть выше, мы использовали только три из объектов запроса jQuery ajax.

• url: Строка URL для запроса. Мы используем имя файла лога нашего чата log.html.
• cache: Это предотвратит кэширование нашего файла. Это обеспечит нам то, что всегда, когда мы посылаем запрос, мы будем иметь обновленный лог чата.
• sucess: Это позволит нам прикрепить функцию, которая передаст запрошенные нами данные.

Как вы видите, затем мы перемещаем запрошенные нами данные (html) в блок #chatbox div.

Автопрокрутка

Как мы, возможно, видели в других приложениях чатов, содержимое автоматически прокручивается вниз, если контейнер лога чата (#chatbox) переполняется. Мы воплотим простую и похожую возможность, которая будет сравнивать высоту полосы прокрутки контейнера до и после того, как мы выполним ajax запрос. Если высота полосы прокрутки стала больше после запроса, мы используем эффект анимации jQuery, чтобы прокрутить блок #chatbox div.

• Сначала мы сохраним высоту полосы прокрутки блока #chatbox div в переменную oldscrollHeight перед выполнением запроса.
• После того, как наш запрос вернет успех, мы сохраним высоту полосы прокрутки блока #chatbox div в переменную newscrollHeight.
• Затем мы сравним высоту полосы прокрутки в обеих переменных, используя конструкцию if. Если newscrollHeight больше, чем oldscrollHeight, мы используем эффект анимации, чтобы прокрутить блок #chatbox div.

Постоянное обновление лога чата

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

Ответ на наш вопрос находится в функции setInterval. Эта функция будет запускать нашу функцию loadLog() каждые 2,5 секунды, которая будет запрашивать обновленный файл и делать автопрокрутку блока.

Закончили

Мы закончили! Я надеюсь, что вы изучили, как работает базовая система чата, и, если у вас есть какие-либо пожелания, я с радостью их приветствую. Это максимально простая система чата, которую вы можете создать как приложение чата. Вы можете оттолкнуться от нее и построить множественные чат комнаты, добавить админку, эмотиконы и т.д. Здесь ваш предел — это небо.

Ниже привожу несколько ссылок, которые вы возможно захотите посмотреть, если задумаетесь о расширении этого приложения чата:

• Защитите ваши формы ключами форм — избегайте XSS (межсайтового скриптинга) и подделок межсайтовых запросов.
• Отправка формы без обновления страницы с использованием jQuery — расширьте наш ajax запрос
• Как делать AJAX запросы на чистом Javascript — изучите, как работает кухня запросов на чистом javascript.

Источник