lightanddesign.ru
You might also like
Здравствуйте, хабрузер! Я хочу поделиться с вами своим опытом. Сегодня я расскажу, как написать простую разговорную комнату на PHP и JavaScript. Под ним вы найдете много кода. Приготовьтесь… Для хранения сообщений чата мы использовали базу данных MySQL. Сначала создайте новую базу данных в phpmyAdmin. Зайдите за небольшой столик.
- Если она не существует, создайте креативную таблицу "Чат" (
- `id` int (15) null not auto_increment,.
- `name` varchar (30) not null, not null, not null, not null
- `text` text not null, not null
- Первичный ключ (`id`)
- ) engine = myisam default charset = cp1251 auto_increment = 1,.
Затем создайте новый документ и назовите его index.php. Это основной документ. Вкратце, в нем находится комната для разговоров. Для разговора я использовал jQuery и некоторые плагины для этого. Давайте подключим jquery и доступные плагины…
Таким образом, разговорная беседа готова. Таблица для хранения сообщений разговора. Затем на стороне сервера пишется сценарий для обработки сообщений. Сценарий должен быть способен хранить и распространять сообщения. Создайте новый документ и назовите chat.php content chat.php:.
- // Функция для обработки базы данных
- Функция getquery ($ запрос).
- $ res = mysql_query ($ query) или die (mysql_error())
- $ row = mysql_fetch_row ($ res)
- $ var = $ row 0,.
- возвращает $ var,.
- >
- функция setquery ($ query).
- $ res = mysql_query ($ query) или die (mysql_error())
- возвращает $ res,.
- >
- //Подключитесь к базе.
- @ mysql_connect (‘localhost’, ‘root’, ») или die ("Не удается подключиться к mysql."). ,.
- @ mysql_select_db (‘best’) or die ("Cannot connect to database") ,.
- @ mysql_query (‘set names utf8;’),.
- switch ($ _get "event")
- // распространить последнее сообщение здесь
- Для "получить":.
- // сколько сообщений выдается пользователю.
- $ max_message = 60,.
- // Общее количество сообщений в разговорной комнате
- $ count = getQuery ("select count(` id`) from `chat`;");
- // max_message_id
- $ m = getQuery ("select max(id)from` chat` where 1");
- // Удалите ненужные сообщения.
- // Уничтожьте эту работу, если вы хотите сохранить всю историю.
- если ($ count> $ max_message)
- setQuery ("from from.
- >
- // Получаем ID последнего сообщения от клиента.
- $ mg = $ _get ‘id’,.
- // Создать количество отсутствующих сообщений от клиента
- если ($ mg == 0)
- если ($ mg)
- $ msg = array(),.
- // Если у клиента нет всех сообщений, отправьте клиенту неполные сообщения.
- если ($ mg< $m )
- //Возврат неисправных сообщений из базы.
- $ query = "select * from` chat` where `did`>". $ mg. "и `id".< #339933">$ m. $ m. "order by" id`",.
- $ res = mysql_query ($ query) или 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),.
- Тайм-аут …
- Для "набора":.
- // Имя загрузки.
- $ name = htmlspecialchars ($ _get ‘name’),.
- // Загрузить текст сообщения.
- $ msg = htmlspecialchars ($ _get "msg", // Загружаем текст сообщения.
- // сохранить сообщение
- setQuery ("Intersing Into` Chat` (`id`, `name`, `text`) values (null, ‘". mysql_real_escape_string ($ name).". , » ‘. ") ;
- Тайм-аут …
- >
Как работает этот сценарий? Изначально вы подключены к базе данных. После установления связи вы знаете, о чем просит клиент. Если вы запрашиваете сообщение, вы создаете ряд сообщений, отсутствующих у клиента. Далее вы запрашиваете у базы данных все сообщения, добавляете их в таблицу, создаете JSON и отправляете все клиенту.
Теперь у вас есть основа для разговора. Все, что вам нужно сделать, это обновить чат на стороне клиента и добавить в него новые сообщения. Для всего этого используйте запросы Ajax. Давайте создадим скрипт в файле index.php для обработки и добавления сообщений. Добавим его между тегами< head >. Наш Javascript:.
- $ (function ())
- // Если файл cookie с именем не пуст, перетащите его и введите имя в форму.
- ЕСЛИ ($. cookie ("имя")! = "")
- // переменная содержит идентификатор последнего входящего сообщения
- var middle = 0,.
- // Функция обновления сообщений в чате
- функция get_message_chat ()
- // генерирует Ajax-запрос
- $. ajaxSetup ()< url : "chat.php" , global : true , type : "GET" , data : "event=get&id #339933">+ mid + "&t #339933"> +
- (новая дата). getTime ()>),.
- // Отправить запрос.
- $. ajax (
- // В случае успеха.
- Успех: функция (msg_j))
- // Если в полученных данных есть сообщение
- if (msg_j. length> 2)
- // Разбор JSON.
- var obj=JSON. parse (msg_j),.
- // Передать все полученные сообщения
- for (var i = 0; i< obj. length ; i ++ )
- // Присвоить переменной ID сообщения
- mid =obji. id,.
- // Добавьте сообщение в беседу.
- $ ("#msg-box ul"). Добавить ("
- "+ obji. name+"": "+obji. msg+"");
- >
- // Показать окно чата до конца.
- $ ("#msg-box"). scrollTop (2000),.
- >
- >
- >>) ;
- >
- // Первый запрос к серверу. Получите сообщение.
- get_message_chat (),.
- //Обновление чата каждые 2 секунды.
- $ ("#t-box"). everyTime (2000, ‘refresh’, function())
- get_message_chat (),.
- >>) ;
- // Событие отправки формы.
- $("#t-box"). Submit (function ())
- // Запросите имя у пользователя.
- if(((( "#t-box input class =’name’"); attr("value") == "")< alert ( "Пожалуйста, введите свое имя!" ) >Иначе.
- //Добавьте имя пользователя в cookie.
- $. 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, так что форма не будет отправлена.
- Возвращает false.
- >>) ;
- >>) ;
Давайте проанализируем этот сценарий… Линия (3). Если в cookie есть имя пользователя, введите его в форму. Если по какой-либо причине пользователь обновляет страницу чата или заходит на страницу с чатом, ему не нужно повторно вводить свое имя. Линия (7). Функция обновления чата. Чат обновляется не полностью. Отправляются только сообщения, не включенные в чат. Линия (9). Создайте Ajax-запрос. Почему мне нужно передавать дополнительную переменную "t=" + (new Date).getTime ()? Если его не отправить, некоторые браузеры кэшируют тот же Ajax-запрос. И нам это не нужно! Это происходит потому, что сообщение не может быть обновлено. (Функция (new Date).getTime() возвращает время в миллисекундах. Таким образом, браузер не кэширует запрос, поскольку каждый раз при отправке запроса генерируется другая строка. Серия (16). Почему именно два или более персонажей? Потому что если все сообщения чата есть, сервер отправит не пустую строку, а "". Это происходит потому, что ответы генерируются в формате JSON. Серия (37). Запрашивать новое сообщение каждые 2 секунды. Мне очень понравился плагин jQuery timer. Он позволяет повторять определенное действие столько раз, сколько вам нужно, очень гибким способом.
Это практически все. Теперь ваш чат готов к работе. Для подтверждения достоверности имени и смайлика оставляю для прочтения.
