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

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

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

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

Вступление

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

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

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

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

Шаг 2: CSS-стилизация

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

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

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

Шаг 3: Использование PHP для создания формы входа.

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

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

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

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

Чтобы показать форму входа в систему, если пользователь не вошел в систему и, следовательно, не создал сеанс, мы используем другой оператор if и else вокруг тегов #wrapper div и script в нашем исходном коде. В противоположном случае это скроет форму входа и покажет окно чата, если пользователь вошел в систему и создал сеанс .;

Меню приветствия и выхода

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

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

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

 <script type = "text / javascript"> // jQuery Document $ (document) .ready (function () {// Если пользователь хочет завершить сеанс $ ("# exit"). click (function () {var exit = подтверждение («Вы уверены, что хотите завершить сеанс?»); if (exit == true) {window.location = 'index.php? logout = true';}});});  </ Скрипт> 

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

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

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

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

Шаг 4: Обработка пользовательского ввода

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

JQuery

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

  // Если пользователь отправляет форму
	 $ ( "# Submitmsg"). Нажмите (функция () {	
		 var clientmsg = $ ("# usermsg"). val ();
		 $ .post ("post.php", {text: clientmsg});				
		 $ ("# usermsg"). attr ("value", "");
		 вернуть ложь;
	 }); 

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

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

PHP — post.php

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

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

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

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

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

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

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

Запрос jQuery.ajax

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

  // Загружаем файл, содержащий журнал чата
	 function loadLog () {		

		 $ .Ajax ({
			 URL: "log.html",
			 кеш: ложь,
			 success: function (html) {		
				 $ ( "# Chatbox") HTML (HTML).  // Вставляем журнал чата в #chatbox div				
		  	 },
		 });
	 } 

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

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

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

Автоматическая прокрутка

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

  // Загружаем файл, содержащий журнал чата
	 function loadLog () {		
		 var oldscrollHeight = $ ("# chatbox"). attr ("scrollHeight") - 20;  // Высота прокрутки перед запросом
		 $ .Ajax ({
			 URL: "log.html",
			 кеш: ложь,
			 success: function (html) {		
				 $ ( "# Chatbox") HTML (HTML).  // Вставляем журнал чата в #chatbox div	
				
				 //Автопрокрутка			
				 var newscrollHeight = $ ("# chatbox"). attr ("scrollHeight") - 20;  // Высота прокрутки после запроса
				 if (newscrollHeight> oldscrollHeight) {
					 $ ("# chatbox"). animate ({scrollTop: newscrollHeight}, 'normal');  // Автопрокрутка до нижней части div
				 }				
		  	 },
		 });
	 } 

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

Постоянное обновление журнала чата

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

  setInterval (loadLog, 2500);  // Перезагрузить файл каждые 2500 мс или х мс, если вы хотите изменить второй параметр 

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

Законченный

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

Кроме того, если вам нужно профессиональное приложение или плагин для вашего следующего проекта, вы можете взглянуть на один из многочисленных скриптов чата, которые мы продаем на CodeCanyon .

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

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

• Подпишитесь на нас в Твиттере или подпишитесь на RSS-канал NETTUTS, чтобы получать ежедневные обзоры и статьи о веб-разработке.

Изучите JavaScript: полное руководство

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