В този урок ще създадем просто приложение, уеб чат с помощта на PHP и JQuery. Ползата от този тип система е идеална за онлайн поддръжка на сайта Ви.

Чат приложение, което ние конструираме днес ще бъде доста проста. То ще включва влизане и излизане система, възможности за AJAX стил, както и оферта поддръжка на множество потребители.

Стъпка 1: HTML е

Ще започнем този урок чрез създаване на първата ни index.php файл.

• Започваме с HTML тагове, обичайните DOCTYPE, HTML, главата и тялото. Маркерът на главата ние добавяме нашата заглавие и връзка към нашите маса CSS стилове (style.css).
• Вътре тялото на етикет, ние структурираме оформление в рамките на блока - обвивка #wrapper DIV на. Ние ще имаме три основни блокове: прост меню, прозорец на разговор и поле за въвеждане на нашето послание; всеки със съответната им Разделение и номер.
  • меню блок #menu Разделение ще се състои от две точки. Първият ще бъде поздрав за потребителя и да изплува от ляво, а втората референтна продукцията ще плува в дясно. Ние също така ще включи DIV за почистване на елементите.
  • Блок чат #chatbox Разделение ще съдържа дневник на нашия разговор. Ние ще се зареди нашия дневник от външен файл с помощта на JQuery Аякс заявка.
  • Последната точка в нашата заключителната блок #wrapper Разделение ще бъде нашата форма, която ще включва запис текстово поле за съобщението на потребителя и бутон за бутона.
• Ние добавяме най-новите ни скриптове, за да се зареди страниците по-бързо. Отначало ние поставяме Google JQuery CDN връзка, тъй като в този урок, ние ще използваме JQuery библиотеката. Втората ни маркер за скриптове ще бъде мястото, където ще работим. Ние ще се качи цялата ни код, след като документът е готов.

Стъпка 2: Създаване на CSS стил

Сега ще добавим някои CSS, за да направим нашия чат приложение изглеждат по-добре, отколкото на стила на браузъра по подразбиране. Кодът по-долу ще бъде добавен към нашия style.css файл.

В горния CSS не е нищо особено, с изключение на факта, че някои от лична карта или класовете, за които сме си поставили стила ще бъдат добавени по-късно.

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

Стъпка 3: Използване на PHP, за да се създаде форма за вход.

Сега ние ще приложи проста форма, която пита потребителя за името си, преди да го поставите.

функция loginForm (), създадохме състои от проста форма влизане, в който потребителят за неговото / нейното име. След това ние използваме конструкцията, ако друго, за да видите дали потребителят въведе името. Ако човек е влязъл в името, ние го настроите като $ _SESSION [ 'име']. Откакто използваме заседание въз основа на бисквитка, запаметите име, ние трябва да се обадя session_start () преди всичко показва в браузъра.

Показва формата за вход

За да се покаже формата на вход, ако потребителят не е влязъл, и поради това не сесията не е създаден, ние използваме друга инструкция, ако друго около блок обвиващи #wrapper Разделение тагове и скрипт в нашия код. В обратния случай, ако потребителят е влязъл в и създаде сесия, този код ще скрие логин формата и показване на прозореца за чат.

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

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

На първо място, нека да добавите потребителско име в поздравителното съобщение. Ние правим това чрез привеждане на името на потребителска сесия.

С цел да се даде възможност на потребителя да излезете и да приключи сесията, ние ще скочи по-високо от главата му и за кратко се използва JQuery.

JQuery код по-горе просто показва диалогов прозорец за потвърждение, когато потребителят кликне върху изхода на линк #exit. Ако потребителят потвърждава изхода, като по този начин да реши да сложи край на сесията, ние ще изпратим да index.php? Изход = вярно. То просто създава променлива, наречена излизане със стойност истина. Ние трябва да се възползваме от тази променлива с помощта на PHP:

Преди унищожаването на потребителската сесия с текущото име, използвайки session_destroy (), ние искаме да се покаже просто съобщение за оттегляне в дневника за чат. Тя ще се казва, че потребителят е напуснал чат сесия. Ние правим това с помощта на fopen (), неуспешно () и fclose (), за да манипулират нашата log.html файл, който, както ще видим, ще бъде създаден като дневник на нашия разговор. Моля, имайте предвид, че ние добавихме класа "msgln" в блока Разделение. Ще трябва да се определи CSS стил за този блок.

Правейки това, ние сме унищожаване на сесията и пренасочим потребителя към една и съща страница, където формата за вход в системата.

Стъпка 4: Подкрепа за приноса на потребителите

След като потребителят е потвърдил действията му в нашата форма, трябва да се разбере неговото въвеждане от клавиатурата и ще го напиша в нашия чат лог. За да направите това, трябва да използвате JQuery и PHP, да работят синхронно на сървъра страна и страна на клиента.

Почти всичко, което искаме да направим с JQuery да се справят с нашите данни, ще се въртят около искане за JQuery пост.

1. Преди да започнем нещо общо, ние трябва да улови данни от потребителя, или от факта, че той публикува в поток #submitmsg вход. Това може да се постигне функция Вал (), който се стойността в полето за форма. Сега ние съхраняваме тази стойност в променлива clientmsg.
2. Тук идва най-важната част: JQuery след искането. Той изпраща искане за длъжността, на файла post.php, че ние ще създадем в един миг. Той изпраща входа на клиента, или че е бил съхраняван в променлива clientmsg.
3. В края ние ясно вход #usermsg, изчистването на стойностите на атрибутите.

Моля, имайте предвид, че кодът по-горе, отидете на нашия скрипт таг, където ще се постави код изход JQuery от системата.

PHP - post.php

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

1. Преди да се направи нещо, ние трябва да започнем post.php на файл с помощта на функцията session_start (), тъй като ние ще използваме сесия за името на потребителя в този файл.
2. Използване на логически Isset, ние проверяваме дали има сесия за "име", преди да направите нещо допълнително.
3. Сега ние ще се публикуване на данни, че JQuery, изпратени до този файл. Ще запазим тези данни в текста на променливата $.
4. Тези данни, както и всички данни, въведени от потребителя, ще бъдат съхранявани в log.html файл. За да направите това, ние отворите файла в режим "а" fopen функция, която, според php.net отваря файла за писане само; поставя на показалеца на файл в края на файла. Ако файлът не съществува, се опитват да го създадете. След това пишем нашия доклад във файл, използвайки неуспешно (функция).
   • Посланието, което ще бъде написано, ще бъдат затворени в блок .msgln Разделение а. Той ще съдържа датата и часа, генерирани от дата функция (), на сесията потребителското име и текстът, който също ще бъде заобиколен от функция htmlspecialchars (), за да се предотврати XSS.

И накрая, ние затваряме файл със fclose ().

Стъпка 5: Показва съдържанието на дневника за чат (log.html)

За да ни спаси от известно време, ние може да зарежда предварително писаното от чата в блок #chatbox Разделение, като че ли се съдържа нещо.

Ние използваме процедура, подобна на тази, която ние използвахме във файла post.php, но този път ние просто чете и съдържанието на дисплея на файлове.

Запитване jQuery.ajax

Запитване Аякс - е в основата на всичко, което правим. Това искане не само ни позволява да изпращате и получавате данни чрез формата, без да опресните страницата, но също така ни дава възможност за обработка на исканите данни.

Ние увийте наше искане Аякс на функцията. Вие ще видите защо, точно сега. Както можете да видите по-горе, ние сме използвали само три от заявки Аякс обекти JQuery.

• URL адрес. URL низ за искането. Ние използваме името на лог файл нашия чат log.html.
• кеш. Това ще попречи на кеширането на нашия файл. Това ще ни даде това, че всеки път, когато изпратите заявка, ние ще имаме актуализиран регистър чат.
• успех. Това ще ни позволи да прикачите функция, която ще ни даде исканата информация.

Както можете да видите, а след това се премести на исканите от нас (HTML) в #chatbox Разделение блок данни.

Auto Scroll

Както може да е виждал в други приложения, чат, съдържанието се превърта автоматично надолу, когато контейнерът за дневник чат (#chatbox) прелива. Ние ще се реализира един прост и подобна функция, която ще сравни височината на контейнер за превъртане нагоре и след като извърши Аякс поискване. Ако височината на лентата за превъртане стане по-след заявката, ние използваме JQuery анимация ефект, за да превъртите единица #chatbox Разделение.

• Първоначално ще запазим височината на Разделение прелистване на блок #chatbox в oldscrollHeight променлива, преди да пуснете заявката.
• След нашата заявка ще се върне в успех, ние ще продължим да променлива newscrollHeight единичната #chatbox плъзгач височина Разделение.
• След това сравнение височината на лентите с превъртане на две променливи, като се използва, ако изявлението. Ако newscrollHeight повече от oldscrollHeight използваме анимация ефект, за да превъртите единица #chatbox Разделение.

Постоянно актуализиране на писаното от чата

Сега може да възникне въпросът, колко често ще се актуализира новите данни, предавани между потребителите. Или да перифразирам въпроса, с редовност ние ще изпратим на многократните искания за актуализиране на данните?

Отговорът на нашия въпрос е в setInterval функция. Тази функция ще започне нашата функция loadLog () на всеки 2.5 секунди, които ще поискат актуализирания файл и да направя Автоматично преместване блок.

Ние сме готови! Надявам се, че сте се научили как основната система на чата, и ако имате някакви предложения, аз съм щастлив да ги посрещне. Това е най-проста система на разговор, можете да създадете като приложение за чат. Можете да натиснете на разстояние от него и да изгради множество чат стаи, административен панел за добавяне, емотикони и т.н. Това е вашият лимит - небето.

Следният цитат някои връзки, които може да искате да видите, ако се мисли за разширяване на приложението на чата:

• Следете ни в Twitter. или да се абонирате за RSS NETTUTS. за да получите повече дневни уроци и статии за уеб програмиране.

Свързани статии

• Как да създадете чужденец костюм със собствените си ръце