Cum se creează o aplicație de chat simplu

În acest tutorial vom crea o simplă aplicație de chat web folosind PHP și jQuery. O utilitate de acest tip este perfectă pentru suportul online al site-ului dvs.

Aplicația de chat pe care o vom construi astăzi va fi destul de simplă. Acesta va include un sistem de intrare și ieșire, caracteristici în stil AJAX și va oferi suport pentru mai mulți utilizatori.

Pasul 1: Marcarea HTML

Vom începe această lecție cu crearea primului fișier index.php.

Vom începe html-ul cu etichetele obișnuite DOCTYPE, html, head și body. În capul tagului, vom adăuga antetul nostru și un link la foaia de stil css (style.css).
În interiorul corpului tagului, structuram structura noastră în interiorul blocului - wrapper #wrapper div. Vom avea trei blocuri principale: un meniu simplu, o fereastră de chat și un câmp pentru introducerea mesajului nostru; fiecare cu div și id corespunzătoare.
- Blocul de meniu #menu div va consta din două paragrafe. Primul va fi un salut pentru utilizator și va pluti la stânga, iar al doilea va fi un link către ieșire și va pluti la dreapta. Vom include și unitatea div pentru a curăța elementele.
- Blocul chat #chatbox div va conține jurnalul chatului nostru. Vom descărca jurnalul nostru dintr-un fișier extern utilizând ajax-query jQuery.
- Ultimul element din blocul de împachetare #wrapper div va fi forma noastră, care va include câmpul de introducere a textului pentru mesajul utilizatorului și butonul de trimitere.
Adăugăm ultimele noastre script-uri pentru a încărca mai repede pagina. Mai întâi, introducem o legătură Google jQuery CDN, deoarece în acest tutorial vom folosi biblioteca jQuery. Al doilea script de tag va fi locul unde vom lucra. Vom încărca toate codul nostru după ce documentul este gata.

Pasul 2: Creați un stil CSS

Acum vom adăuga un pic css pentru ca aplicația noastră de chat să arate mai bine decât stilul browserului implicit. Codul de mai jos va fi adăugat în fișierul nostru stil.css.

În Css de mai sus nu există nimic special, cu excepția faptului că unele id sau clase pentru care am stabilit stilul vor fi adăugate un pic mai târziu.

După cum puteți vedea mai sus, am terminat să construim o interfață de chat pentru utilizatori.

Pasul 3: Utilizați PHP pentru a crea formularul de autentificare.

Acum punem în aplicare o formă simplă care va cere utilizatorului numele său, înainte de al pune pe el.

Funcția loginForm () pe care am creat-o constă dintr-un simplu formular de autentificare care îi solicită numele utilizatorului. Apoi folosim constructul if else pentru a verifica dacă utilizatorul a introdus numele. Dacă o persoană a introdus un nume, l-am setat ca $ _SESSION ['name']. Deoarece utilizăm o sesiune bazată pe un cookie pentru a stoca numele, trebuie să sunăm session_start () înainte ca ceva să fie transmis către browser.

Afișarea formularului de introducere

Pentru a afișa formularul de autentificare în cazul în care utilizatorul nu sa logat și, prin urmare, nu a fost creată nicio sesiune, vom folosi o altă instrucțiune if if în jurul wrapperului #wrapper div divizor și tag-uri script în codul nostru sursă. În caz contrar, dacă un utilizator sa logat și a creat o sesiune, acest cod va ascunde formularul de conectare și va afișa fereastra de chat.

Cum se creează o aplicație de chat simplu

Bine ați venit și ieșiți din meniu

Încă nu am terminat crearea unui sistem de conectare pentru această aplicație de chat. Încă mai trebuie să oferim utilizatorului opțiunea de a deconecta și de a termina sesiunea de chat. După cum vă amintiți, marcajul HTML original a inclus un meniu simplu. Să ne întoarcem și să adăugăm un cod PHP care va oferi meniului mai multă funcționalitate.

Mai întâi, să adăugăm un nume de utilizator mesajului de întâmpinare. Vom face acest lucru afișând sesiunea de nume de utilizator.

Pentru a permite utilizatorului să se deconecteze și să termine sesiunea, vom sări deasupra capului și vom folosi scurt jQuery.

Codul jquery de mai sus arată doar dialogul de confirmare dacă utilizatorul face clic pe linkul de ieșire #exit. Dacă utilizatorul confirmă ieșirea, deci decide să încheie sesiunea, o vom trimite la index.php? Logout = true. Acest lucru creează pur și simplu o variabilă numită logout cu o valoare adevărată. Trebuie să interceptăm această variabilă folosind PHP:

Înainte de a distruge o sesiune de utilizator cu numele curent utilizând funcția session_destroy (), dorim să emităm un mesaj simplu despre deconectarea în jurnalul de chat. Se va spune că utilizatorul a părăsit sesiunea de chat. Vom face acest lucru folosind funcțiile fopen (), fwrite () și fclose () pentru a manipula fișierul log.html, care, după cum vom vedea mai târziu, va fi creat ca jurnal al chatului nostru. Rețineți că am adăugat clasa "msgln" în bloc div. Am definit deja stilul CSS pentru acest bloc.

După aceasta, distrugem sesiunea și redirecționăm utilizatorul către aceeași pagină unde apare formularul de autentificare.

Pasul 4: Sprijin pentru introducerea de către utilizator

După ce utilizatorul și-a confirmat acțiunile în forma noastră, trebuie să-i luăm intrarea de la tastatură și să o scriem în jurnalul chat-ului nostru. Pentru a face acest lucru, trebuie să folosim jQuery și PHP pentru a lucra sincron pe server și pe partea clientului.

Aproape tot ceea ce vom face cu jQuery pentru a procesa datele noastre se va roti în jurul interogării pe postul jQuery.

Înainte de a face ceva, trebuie să capturăm intrarea utilizatorului sau ce a introdus în fluxul de intrare #submitmsg. Aceasta se poate realiza prin funcția val (), care ia valoarea stabilită în câmpul de formă. Acum stocăm această valoare în variabila clientmsg.
Aici vine cea mai importantă parte: interogare jQuery. Trimite o cerere POST fișierului post.php, pe care îl vom crea într-un moment. Trimite clientul sau ceea ce a fost salvat în variabila clientmsg.
În cele din urmă, eliminăm intrarea #usermsg, eliminând atributul value.

Rețineți că codul de mai sus va merge la eticheta scriptului unde am plasat codul de ieșire jQuery.

PHP - post.php

În momentul în care avem date POST trimise în fișierul post.php de fiecare dată când utilizatorul trimite formularul și trimite un mesaj nou. Sarcina noastră este să capturați aceste date și să le scrieți în jurnalul chatului nostru.

Înainte de a face ceva, trebuie să pornim fișierul post.php cu funcția session_start (), deoarece vom folosi sesiunea cu numele de utilizator în acest fișier.
Folosind un isset logic, vom verifica dacă există o sesiune pentru "nume" înainte de a face orice altceva.
Acum vom capta datele POST pe care jQuery le-a trimis acestui fișier. Vom stoca aceste date în variabila text $.
Aceste date, precum și toate datele introduse de utilizator, vor fi stocate în fișierul log.html. Pentru a face acest lucru, deschidem fișierul în modul "a" al funcției fopen, care în conformitate cu php.net deschide fișierul numai pentru scriere; pune pointerul fișierului la sfârșitul fișierului. Dacă fișierul nu există, încercați să îl creați. Apoi vom scrie mesajul nostru într-un fișier folosind funcția fwrite ().
- Mesajul pe care îl vom scrie va fi inclus în blocul .msgln div. Acesta va conține data și ora generate de funcția date (), sesiunea de nume de utilizator și textul, care va fi, de asemenea, înconjurat de funcția htmlspecialchars () pentru a evita XSS.

În cele din urmă, închidem fișierul nostru cu fclose ().

Pasul 5: Afișați conținutul jurnalului de chat (log.html)

Pentru a ne salva ceva timp, preîncărcăm jurnalul de chat în #chatbox div, ca și cum ar conține ceva.

Folosim o procedură similară cu cea utilizată în fișierul post.php, dar de data aceasta citim și afișăm doar conținutul fișierului.

Solicitați jQuery.ajax

Cererea ajax este nucleul a tot ceea ce facem. Această solicitare nu numai că ne permite să trimitem și să primim date printr-un formular fără actualizarea paginii, dar, de asemenea, ne permite să procesăm datele solicitate.

Ne înfășurăm cererea ajax într-o funcție. Veți vedea de ce, chiar acum. După cum puteți vedea mai sus, am folosit doar trei obiecte de interogare jQuery ajax.

URL-ul. Șirul de adresă URL pentru interogare. Folosim numele fișierului jurnal al chat-ului nostru log.html.
cache. Acest lucru va împiedica cache-ul fișierului nostru. Acest lucru ne va asigura că avem întotdeauna un jurnal de chat actualizat când trimitem o solicitare.
sucess. Acest lucru ne va permite să atașăm o funcție care va transmite datele solicitate.

După cum puteți vedea, vom muta datele solicitate (html) în #chatbox div.

Derulare auto

După cum am văzut și în alte aplicații de chat, conținutul se derulează automat dacă containerul pentru jurnalul de chat (#chatbox) este plin. Vom implementa o caracteristică simplă și similară care va compara înălțimea barei de derulare a containerului înainte și după executarea solicitării ajax. Dacă înălțimea bara de deplasare devine mai mare după solicitare, vom folosi efectul de animație jQuery pentru a derula prin #chatbox div.

Mai întâi, salvăm înălțimea barei de derulare #chatbox div la variabila oldscrollHeight înainte de a executa interogarea.
După ce cererea noastră revine la succes, vom salva înălțimea barei de derulare #chatbox div la variabila newscrollHeight.
Apoi comparăm înălțimea barei de derulare în ambele variabile folosind constructul if. Dacă newscrollHeight este mai mare decât oldscrollHeight, folosim efectul de animație pentru a derula prin #chatbox div.

Actualizarea permanentă a jurnalului de chat

Acum poate apărea întrebarea: cât de des vom actualiza noile date transferate între utilizatori. Sau pentru a parafraza întrebarea, cu ce regularitate vom trimite solicitări constante de actualizare a datelor?

Răspunsul la întrebarea noastră este în funcția set Interval. Această funcție va executa funcția loadLog () la fiecare 2,5 secunde, care va solicita fișierul actualizat și va efectua o auto-derulare a blocului.

Am terminat! Sper că ați învățat cum funcționează sistemul de bază de discuții și dacă aveți vreo dorință, îi urez bun venit. Acesta este cel mai simplu sistem de chat pe care îl puteți crea ca o aplicație de chat. Puteți să vă împingeți din ea și să construiți mai multe camere de chat, să adăugați zona de administrare, emoticoane etc. Aici limita ta este cerul.

Mai jos sunt câteva link-uri pe care ați putea dori să le vedeți dacă vă gândiți la extinderea acestei aplicații de chat: