Простой чат на JavaScript и PHP
Привет, Хабраюзеры! Хочу поделиться с вами своим опытом. Сегодня я расскажу, как написать простой чат на php и javascript.
Под катом много кода. Приготовитесь…
Я использовал MySQL базу данных для хранения сообщений чата. Для начала, создадим новую базу в phpMyAdmin. И импортируем туда небольшую таблицу.
- CREATE TABLE IF NOT EXISTS `chat` (
- `id` int ( 15 ) NOT NULL AUTO_INCREMENT ,
- `name` varchar ( 30 ) NOT NULL ,
- `text` text NOT NULL ,
- PRIMARY KEY ( `id` )
- ) ENGINE = MyISAM DEFAULT CHARSET = cp1251 AUTO_INCREMENT = 1 ;
Далее, создаем новый документ и называем его index.php. Именно этот документ будет основным. Проще говоря, в нем будет наш чат.
Для чата я использовал jQuery и несколько плагинов для него.
Подключим jQuery и имеющиеся плагины…
Итак, готова разметка для чата, таблица для хранения сообщений чата. Теперь, мы напишем серверный скрипт для обработки сообщений. Скрипт должен уметь сохранять и раздавать сообщения. Создаем новый документ и назовем его chat.php
Содержание chat.php:
- //Функции для работы с БД
- function getQuery ( $query )
- $res = mysql_query ( $query ) or die ( mysql_error ( ) ) ;
- $row = mysql_fetch_row ( $res ) ;
- $var = $row [ 0 ] ;
- return $var ;
- >
- function setQuery ( $query )
- $res = mysql_query ( $query ) or die ( mysql_error ( ) ) ;
- return $res ;
- >
- //Соединяемся с базой
- @ mysql_connect ( ‘localhost’ , ‘root’ , » ) or die ( «Не могу соединиться с MySQL.» ) ;
- @ mysql_select_db ( ‘best’ ) or die ( «Не могу подключиться к базе.» ) ;
- @ mysql_query ( ‘SET NAMES utf8;’ ) ;
- switch ( $_GET [ «event» ] )
- //Тут раздаем последние сообщения
- case «get» :
- //Сколько сообщений раздавать пользователям
- $max_message = 60 ;
- //Всего сообщений в чате
- $count = getQuery ( «SELECT COUNT(`id`) FROM `chat`;» ) ;
- //Максимальный ID сообщения
- $m = getQuery ( «SELECT MAX(id) FROM `chat` WHERE 1» ) ;
- //Удаление лишних сообщений.
- //Если хотите, чтобы сохранялась вся история, смело сносите этот кусочек
- if ( $count > $max_message )
- setQuery ( «DELETE FROM `chat` WHERE `id`
- >
- //Принимаем от клиента ID последнего сообщения
- $mg = $_GET [ ‘id’ ] ;
- //Генерируем сколько сообщений нехватает клиенту
- if ( $mg == 0 )
- if ( $mg
- $msg = array ( ) ;
- //Если у клиента не все сообщения, отсылаем ему недостоющие
- if ( $mg < $m )
- //Берем из базы недостобщие сообщения
- $query = «SELECT * FROM `chat` WHERE `id`>» . $mg . » AND `id`< #339933">. $m . » ORDER BY `id` » ;
- $res = mysql_query ( $query ) or die ( mysql_error ( ) ) ;
- while ( $row = mysql_fetch_array ( $res ) )
- //Заносим сообщения в массив
- $msg [ ] = array ( «id» => $row [ ‘id’ ] , «name» => $row [ ‘name’ ] , «msg» => $row [ ‘text’ ] ) ;
- >
- >
- //Отсылаем клиенту JSON с данными.
- echo json_encode ( $msg ) ;
- break ;
- case «set» :
- //Принимаем имя.
- $name = htmlspecialchars ( $_GET [ ‘name’ ] ) ;
- //Принимаем текст сообщения
- $msg = htmlspecialchars ( $_GET [ «msg» ] ) ;
- //Сохраняем сообщение
- setQuery ( «INSERT INTO `chat` (`id` ,`name` ,`text` )VALUES (NULL , ‘» . mysql_real_escape_string ( $name ) . «‘, ‘» . mysql_real_escape_string ( $msg ) . «‘);» ) ;
- break ;
- >
Как же работает этот скрипт? Сначала, подключается к базе данных. После подключения, смотрим, что запришивает клиент.
Если он запрашивает сообщения, то генерируем сколько сообщений не хватает клиенту. Затем, запрашиваем в безе все необходимые сообщения, добавляем их в массив, генерируем JSON и посылаем все это дело клиенту.
Теперь, у нас есть основа для чата. Все, что нам осталось сделать, так это обновление чата на стороне клиента и добавление новых сообщений в чат. Для всего этого, мы будем использовать Ajax запросы.
Давайте, создадим в файле index.php скрипт для обработки и добавления сообщений.
Добавим между тегов < head >. наш Javascript:
- $ ( function ( )
- //Если куки с именем не пустые, тащим имя и заполняем форму с именем
- if ( $. cookie ( «name» ) != «» )
- //Переменная отвечает за id последнего пришедшего сообщения
- var mid = 0 ;
- //Функция обновления сообщений чата
- function get_message_chat ( )
- //Генерируем Ajax запрос
- $. ajaxSetup ( < url : "chat.php" , global : true , type : "GET" , data : "event=get&id #339933">+ mid + «&t #339933″>+
- ( new Date ) . getTime ( ) > ) ;
- //Отправляем запрос
- $. ajax (
- //Если все удачно
- success : function ( msg_j )
- //Если есть сообщения в принятых данных
- if ( msg_j. length > 2 )
- //Парсим JSON
- var obj = JSON. parse ( msg_j ) ;
- //Проганяем циклом по всем принятым сообщениям
- for ( var i = 0 ; i < obj. length ; i ++ )
- //Присваиваем переменной ID сообщения
- mid = obj [ i ] . id ;
- //Добавляем в чат сообщение
- $ ( «#msg-box ul» ) . append ( «
- » + obj [ i ] . name + «: » + obj [ i ] . msg + «» ) ;
- >
- //Прокручиваем чат до самого конца
- $ ( «#msg-box» ) . scrollTop ( 2000 ) ;
- >
- >
- > ) ;
- >
- //Первый запрос к серверу. Принимаем сообщения
- get_message_chat ( ) ;
- //Обновляем чат каждые две секунды
- $ ( «#t-box» ) . everyTime ( 2000 , ‘refresh’ , function ( )
- get_message_chat ( ) ;
- > ) ;
- //Событие отправки формы
- $ ( «#t-box» ) . submit ( function ( )
- //Запрашиваем имя у юзера.
- if ( $ ( «#t-box input[class=’name’]» ) . attr ( «value» ) == «» ) < alert ( "Пожалуйста, введите свое имя!" ) >else
- //Добавляем в куки имя
- $. cookie ( «name» , $ ( «#t-box input[class=’name’]» ) . attr ( «value» ) ) ;
- //Тащим сообщение из формы
- var msg = $ ( «#t-box input[class=’msg’]» ) . val ( ) ;
- //Если сообщение не пустое
- if ( msg != «» )
- //Чистим форму
- $ ( «#t-box input[class=’msg’]» ) . attr ( «value» , «» ) ;
- //Генерируем Ajax запрос
- $. ajaxSetup ( < url : "chat.php" , type : "GET" , data : "event=set&name #339933">+
- $ ( «#t-box input[class=’name’]» ) . val ( ) + «&msg #339933″>+ msg > ) ;
- //Отправляем запрос
- $. ajax ( ) ;
- >
- >
- //Возвращаем false, чтобы форма не отправлялась.
- return false ;
- > ) ;
- > ) ;
Разберем этот скрипт…
Строка (3). Если в куках есть имя пользователя, то заполняем форму с именем. Для чего это сделано? Если пользователь обновил страничку с чатом или зашел заново на страницу с чатом, то ему не придется вводить свое имя заново.
Строка (7). Функция обновления чата. Чат обновляется не полностью, а присылаются только те сообщения, которых нет в чате.
Строка (9). Генерируем Ajax запрос. Для чего нужно отправлять лишнюю переменную «t=»+(new Date).getTime()? Если не отправить, то некоторые браузеры кэшируют одинаковые Ajax запросы. А нам это не нужно! т.к. не смогут обновляться сообщения. Функция (new Date).getTime() возвращает время в миллисекундах. Таким образом, браузер не кэширует запрос, т.к. при каждой отправке, генерируется разная строка.
Строка (16). Почему именно больше двух символов? Да потому что если все сообщения в чате есть, то сервер присылает не пустую строку, а «[]». т.к. ответ генерируется в JSON.
Строка (37). Запрос новых сообщений раз в две секунды. Мне очень понравился плагин jQuery Timers. С помощью него можно очень гибко сделать повторение определенных действий любое количество раз.
В общем-то, и всё. Вот и готов наш чат. Проверку имени на валидность и смайлы оставляю для домашнего задания.
Как сделать чат на PHP
В этой статье мы разберём как сделать простой чат на языке программирования PHP для вашего сайта.
Ещё стоит сказать, что наш чет использует WebSocket на PHP, для этого мы будем использовать библиотеку Ratchet, но мы не будем подробно про неё рассказывать, для этого посмотрите статью: «Основы PHP библиотеки Ratchet», в ней вы узнает всё самое важное, что стоит знать.
Back-end:
Так как мы делаем чат на языке PHP, начнём со серверной части, сперва нужно установить библиотеку Ratchet, для этого используйте эту команду:
После того как всё установили, создадим файл «chat.php», где создадим класс для работы с нашем чатом, вот что в нём будет.
В начале мы создаём пространство имён для этого скрипта, потом подключаем все нужные зависимости.
Потом создаём класс Chat и наследуем его от класса MessageComponentInterface , создаём защищенное свойство для хранения всех подключённых клиентов, и в конструкторе ему даём значение объекта класса SplObjectStorage .
Потом создаём несколько методов, первый onOpen() , следит за подключением новых пользователей и добавляем их в clients .
Второй метод onMessage() нужен для обработки полученных сообщений и отправки их остальным клиентам, в нём для отправки проходимся по всем пользователям и отправляем каждому.
Следующий метод проверяем отключение клиента от сервера и убирает его, последний нужен для вывода ошибок, если есть, то закрывает сервер.
Теперь создадим файл «index.php», в котором запустим WS сервер.
Создаем простой чат на PHP. Часть 1
В настоящее время, ввиду огромнейшей конкуренции среди веб-сайтов и необходимости удержания клиента на своих страницах, все большую популярность набирают различные инструменты по общению и взаимодействию с пользователями, в плане быстрого предоставления ему нужной информации.
Поэтому все чаще на страницах сайтов мы видим различные чаты, которые в реальном времени позволяют соединить посетителя с администрацией, менеджером или любым другим пользователем и организовать общение. При этом, как правило, данные инструменты реализованы с использованием front-end технологий, node.js и веб-сокетов.
Онлайн курс «PHP-разработчик»
Изучите курс и создайте полноценный проект — облачное хранилище файлов
С нуля освоите язык программирования PHP, структурируете имеющиеся знания, а эксперты помогут разобраться с трудными для понимания темами, попрактикуетесь на реальных задачах. Напишете первый проект для портфолио.
Ну а если подумать — что собой представляет чат? По сути — это приложение, которое состоит из двух частей. Первая — это пользовательская, которая доступна пользователям, а вторая серверная, которая обрабатывает полученную информацию и отправляет ответы в предыдущую посредством сокетов.
Сокеты поддерживаются многими языками программирования, а значит, серверную часть можно написать на одном из них. Поэтому я хотел бы предложить вам посмотреть, как же можно реализовать чат, в котором на стороне сервера будет использоваться PHP скрипт. Мы с вами напишем простой чат, используя язык PHP.
На PHP мы реализуем только серверную часть, так как на стороне клиента будет использован все тот же JavaScript.
Непосредственно в данном уроке мы реализуем пользовательскую часть на минимально-необходимом уровне, который потребуется для отправки запроса на сервер, а также начнем создавать обработчик на стороне сервера.
Таким образом, по итогам текущего урока на клиентской стороне будет отправлен запрос на подключение, а со стороны сервера данный запрос будет принят, обработан и отправлен успешный ответ.