Как написать чат для сайта

Простой чат на 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. С помощью него можно очень гибко сделать повторение определенных действий любое количество раз.

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

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

Источник статьи: http://habr.com/ru/sandbox/21047/

Создаем чат для сайта: HTML, JS, PHP и AJAX

Когда обычных комментариев становится недостаточно, приходит время создать чат.

С помощью чата пользователи общаются друг с другом, повышая интерес к сайту. Это важный элемент для вебинарных площадок, порталов со службой поддержки и страниц, где необходимо более живое, нефорумное общение. Гайд поможет на практике скомбинировать знания по HTML, JS, PHP и AJAX и создать готовый продукт.

Если знаний ещё недостаточно, обратите внимание на курс «Веб-разработчик c нуля до PRO».

Пишет о программировании, в свободное время создает игры. Мечтает открыть свою студию и выпускать ламповые RPG.

Каким должен быть чат

Удобство для пользователей превыше всего. Позаботьтесь, чтобы чат соответствовал современным требованиям:

• сообщения отображаются корректно на всех устройствах;
• их загрузка и отправка происходят без обновления страницы;
• есть дополнительный контент — изображения, аудиосообщения, смайлики, стикеры и прочее.

Каркас чата на HTML

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

Задаём стили

В первую очередь уделим внимание главным функциям чата, а после доработаем внешний вид.

Основная часть чата
на JS + PHP

Сообщения будут отправляться и загружаться с помощью AJAX. На JavaScript пишем функции работы с интерфейсом и связи с серверной частью, а на PHP — методы обработки полученных данных и взаимодействия с базой данных.

Создаем переменные на JS

Создаем функцию для запросов

Она получает переменную act, в которой хранится одно из трёх значений: auth (авторизация), load (загрузка) и send (отправка). От них зависит, какая информация будет передана в PHP-файл.

Создаём функцию обновления чата

И укажем для нашей функции интервал выполнения:

После отлавливается событие отправки формы — это поможет отказаться от обновления страницы:

Теперь займёмся самим обработчиком. В первую очередь с помощью функции session_start () запускается сессия, затем подключается база данных:

Создаём функцию авторизации

Создаём функцию загрузки

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

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

• проверку на дублирование прошлого сообщения;
• удаление внешних ссылок;
• цензуру мата;
• премодерацию сообщений у некоторых групп пользователей и так далее.

Теперь, когда все функции готовы, пропишем их вызов.

Вызываем функции

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

Теперь, когда чат работает, пора добавить авторизацию. Для этого можно создать отдельную форму во фронте, но можно обойтись и модальными окнами. В функции send_request () дополним отправку запроса:

Дополнительные функции

Минимальные возможности чата у нас есть, и продукт можно запускать в релиз, но добавим ещё несколько полезных штук.

Смайлики

Создадим свой набор смайликов чата. Работать это будет так:

• пользователь открывает специальное окошко и кликает по смайлику;
• в поле ввода добавляется код смайлика (например, : sad: или: crazy:);
• при выводе сообщения код смайлика заменяется на изображение.

Для начала добавим контейнер со смайликами и кнопку для его открытия:

Добавим скрипт для загрузки смайликов и открытия меню с ними:

А теперь и функцию добавления смайлика в поле:

После этого укажем, когда вызываются функции:

Приступим к загрузке смайликов и их преобразованию на PHP:

Эта функция сканирует папку со смайликами, а потом проверяет расширение файлов. Она очень удобна, потому что отображает в формате PNG все смайлики, которые мы добавили.

Чтобы вызвать её, добавим ещё один case в функцию switch () в конце обработчика:

Теперь с помощью регулярных выражений можно заменять код смайлика на изображение:

Вызывается эта функция при загрузке сообщений:

Ответ на сообщения

Чтобы добавить возможность отвечать кому-то конкретному, изменим функцию addEmoji (). При нажатии на ник собеседника будет меняться текст в поле ввода.

Для этого в load () изменим формат сообщений, добавив span к нику:

Заключение

Одной статьи недостаточно, чтобы охватить все возможности PHP и JS для разработки чатов. С помощью этих языков легко добавить:

• ответ на конкретные сообщения;
• форматирование текста;
• отправку аудио;
• разные «комнаты»;
• чат-бота и многое другое.

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

Веб-разработчик c нуля до PRO

Практический курс для тех, кто хочет стать профессиональным
веб-разработчиком, запустить свой интернет-проект или веб-сервис и получить первые заказы на разработку. Помимо просмотра уроков, вы будете делать реальные проекты, которые оценят. Ведь работодатели будут встречать вас в том числе и по тому, что увидят на аккаунте вашего GitHub. После прохождения обучения — гарантированное трудоустройство

Источник статьи: http://skillbox.ru/media/code/chat_dlya_sayta_html_js_php_i_nemnogo_ajax/