Cum să-ți creezi propriul chat. Comunicarea între angajații din birou. MyChat este cel mai bun chat pentru birou. Afișarea formularului de conectare

Chat este o pagină de pe Internet care vă permite să comunicați cu mulți utilizatori în același timp. Există foarte multe dintre ele pe tot World Wide Web. Există chat-uri pe rețelele locale, în organizații și există utilizatori care creează chat-uri pentru ei și prietenii lor pentru a comunica fără străini. Acest lucru este foarte convenabil pentru a discuta orice eveniment comun.

Instrucțiuni

Pentru a crea un chat, mai întâi selectați un site care oferă servicii gratuite de înregistrare a chatului. Există acum o mulțime de astfel de resurse pe Internet, de exemplu, http://cbox.ws/getone.php. Înainte de a vă crea chatul, veniți cu un nume pentru acesta care ar interesa utilizatorii și nu ar fi ocupat cu resursa pe care ați ales-o.

Finalizați procedura de înregistrare pe resursă. Pentru a face acest lucru, trebuie să selectați comanda „creați-vă propriul chat” sau „înregistrați-vă” și să completați câmpurile din formular. În primul rând, acesta este numele pentru chat - acesta va fi plasat în fața numelui resursei care oferă serviciul de înregistrare.

Completați câmpul „Adresă de e-mail”. Este necesară o adresă de e-mail pentru a vă activa chatul. Veți primi un e-mail special în care vi se va cere să urmați un link pentru a confirma crearea chat-ului.

Apoi, introduceți parola pentru chat-ul dvs. în câmp. Cu ajutorul acestuia, vă veți autentifica ca administrator și îl veți gestiona. Câmpul Parolă este completat de două ori pentru a evita erorile.

Selectați limba și stilul dvs. de chat. Diferitele resurse oferă stiluri de design diferite. Așa că vă puteți crea propriul chat și îl puteți proiecta după preferințele dvs. Asigurați-vă că bifați caseta „Am citit regulile”. Apoi, când toate câmpurile sunt completate, faceți clic pe butonul „înregistrați-vă” sau „creați-mi chatul”.

După înregistrare, conectați-vă la sistem utilizând numele de utilizator și parola și selectați panoul de control de chat. Conține multe instrumente de management, de exemplu, alegerea unui șablon de chat, gestionarea designului, moderarea și utilizatorii (ștergerea și adăugarea, redenumirea). Pentru a vă crea propriul chat, nu este suficient să îl înregistrați. Veți avea nevoie de cunoștințe de bază despre limbajul HTML pentru a personaliza aspectul chat-ului după cum doriți.

Înainte de a crea un chat pentru un site web, trebuie să înțelegeți că chat-urile web vocale și text sunt o caracteristică importantă pentru proiectele pe Internet. Această metodă permite vizitatorilor să comunice prin Internet folosind un browser. Această metodă este implementată pe arhitectura web a clientului, iar browserul Client este un program care solicită și primește feedback de la server. Serverul funcționează la o adresă separată, primește, stochează și trimite informații la cerere. Comunicarea dintre client și gazda server are loc printr-un protocol de rețea.

Chaturile standard sunt instalate pe computerul utilizatorului sub formă de programe. A doua opțiune este chat-urile pe Internet (comunicare într-o interfață online).

Chatul pe Internet este o metodă de comunicare interactivă în timp real, construită pe baza serverelor Web. În chat-urile web, partea client a aplicațiilor de rețea este realizată de browser, deoarece browserul conține limbajul JavaScript, pe baza căruia funcționează aplicațiile de tip chat.

Chat-urile pentru comunicarea cu vizitatorii de pe site vă permit să lucrați fără instalarea suplimentară de programe terțe. Corespondența dintre server și clienți funcționează pe diferite tehnologii. De obicei, un program client de chat online este dezvoltat în JavaScript, adică implementat în Ajax.

Efectuarea unui chat folosind cod

Puteți crea chat-uri pentru site-uri web în diferite moduri, dar printre ele există două principale:

Scris de mână folosind HTML. Acesta este un document simplu care include biblioteci, foi de stil și scripturi JavaScript. Mai jos este codul final de mini-chat:

Folosind JavaScript vom defini acest cod în interior elementul ul. Dacă faceți clic pe „Scrieți un mesaj”, va apărea un formular de mesaj. Lipiți codul în pagina site-ului.

Programe speciale

De exemplu, puteți lua o resursă specializată în crearea de chat-uri - Chatadelic.net (plătit parțial). Ne înregistrăm și facem clic pe „Creează chat”. După aceea, venim cu un nume pentru chat, introducem adresa blogului unde urmează să-l instalăm. În continuare, va fi generat codul HTML, care trebuie plasat pe paginile site-ului.

Familiarizați-vă cu serviciul și înțelegeți cu atenție funcțiile din această fereastră. Studiați instrucțiunile și evaluați domeniul de activitate cu acest instrument. Apoi, configurați chat-ul în funcție de dorințele dvs., deoarece există un număr mare de opțiuni diferite și fiecare își va putea personaliza chatul în mod special.

Avantaje:

• Poate fi administrat și moderat.
• Acompaniament sonor al evenimentelor de chat.
• Conectarea limbajului JavaScript.
• Fundaluri personalizate și stiluri CSS.
• Schimb de videoclipuri, link-uri, imagini.
• Filtrarea limbajului obscen.
• Abilitatea de a limita viteza de trimitere a mesajelor.
• Blocarea utilizatorilor nedoriți.
• Statistica muncii.
• Integrare în site.

Software de la terți

Mai jos aș dori să abordez alte două programe populare care sunt instalate pe gazda dvs. Un exemplu bun ar fi aplicațiile gratuite:

• Redhelper este un sistem puternic de consultanță online și o alternativă excelentă gratuită pentru uz non-comercial. Instalarea este simplă și simplă - codul final trebuie să fie încărcat pe site în același mod ca contoarele și valorile de trafic. Vă puteți înregistra și vizualiza funcțiile pe site-ul oficial.

• Siteheart (SiteHeart.com/ru/price) este un instrument modern și convenabil care oferă o mulțime de soluții utile, inclusiv instalarea de aplicații pentru lucru prin intermediul unui smartphone, precum și widget-uri și extensii, care pot fi găsite pe site-ul oficial sau descărcate din alte resurse.

Unde este cel mai inteligent loc pentru a instala chat?

Puteți crea un chat pentru site într-un loc în care acesta va fi mai vizibil: acest loc poate fi pagina principală sau pagina articolului. De asemenea, poate fi afișat în widget și subsol. După cum ați înțeles deja, îl puteți instala fără abilități speciale, cunoștințe de cod și stiluri CSS, totul a fost deja inventat, este disponibil gratuit, îl instalăm și îl folosim.

Important!

Nu uitați să includeți reguli de conduită pentru cei care vor folosi chatul.

Asta incheie postarea mea si sper ca ti-a fost de folos. Scrieți în comentarii părerea dvs. despre chat-uri, dacă sunt necesare pe blog și de ce.

Pentru a implementa funcționalitatea de chat video într-un browser, există două tehnologii cele mai potrivite - WebRTC și Flash. Fiecare dintre tehnologii are o serie de caracteristici proprii, de exemplu, în Flash puteți utiliza codecuri video H.264 sau Sorenson, iar în WebRTC VP8 este disponibil în prezent, ceea ce face ca aceste două abordări să fie slab compatibile între ele (pe -fly transcodarea video este o operațiune foarte costisitoare), în plus, este mai bine să faceți chat video peer-to-peer ori de câte ori este posibil, inutil să spunem că conectarea directă a Flash și WebRTC nu va funcționa. În exemplul nostru, vom lua în considerare opțiunea de a apela video un apel de la WebRTC la WebRTC, folosind platforma VoxImplant. În general, putem face o alegere a unei anumite opțiuni, până la o alegere dinamică a tehnologiei în funcție de cine apelăm. Detaliile, ca de obicei, sunt sub tăietură.

Crearea unei aplicații, utilizatori, script și configurație În primul rând, avem nevoie de un cont de dezvoltator VoxImplant (), după ce v-am conectat la panoul de control VoxImplant din secțiunea Aplicații, creați o nouă aplicație și numiți-o videochat. Pentru a organiza un simplu chat video, avem nevoie de cel puțin 2 utilizatori - testuser1 și testuser2, creați-i în secțiunea Utilizatori și legați-i la aplicație folosind butonul Atribuire aplicații (în mod similar, puteți lega utilizatorii deja creați la aplicație în timp ce editați aplicație). Când efectuați un apel de la utilizator la utilizator, se apelează în continuare scriptul de procesare a apelurilor, care este scris în Javascript și executat de motorul VoxEngine. Creăm un nou script în secțiunea Scenarii, numim User2User când folosim modul peer-to-peer, scriptul va arăta astfel:
VoxEngine.forwardCallToUserDirect();
Dacă pe viitor doriți să trimiteți video prin server (forțat), atunci puteți utiliza VoxEngine.forwardCallToUser(null, true); , dar în acest caz apelurile vor costa bani.

Dacă trebuie să controlați semnalizarea pentru, de exemplu, pentru a încheia un apel la un moment dat din partea serverului, atunci puteți utiliza următorul script în loc de helper forwardCallToUserDirect:

Var call1, call2; VoxEngine.addEventListener(AppEvents.CallAlerting, function(e) ( call1 = e.call; call2 = VoxEngine.callUserDirect(e.call, e.destination, e.displayName, e.headers); call2.addEventListener(CallEvents.Connected, handleCallConnected); funcția handleCallConnected(e) ( call1.answerDirect(call2); // Aici puteți, de exemplu, să deconectați apelul după un anumit timp setTimeout(VoxEngine.terminate, 5000); )

După crearea scriptului, trebuie să-l legăm de aplicație printr-o regulă (Regulă) - mergeți la secțiunea Aplicații și editați aplicația noastră, în fila Reguli creăm o nouă regulă (Adăugați regulă). Îl puteți numi orice, de exemplu, Intercom, o expresie regulată este specificată în Pattern - regula este declanșată dacă numărul se potrivește cu această expresie, părăsiți.* și trageți scriptul nostru User2User din Available to Assigned și salvați regula. Salvăm aplicația, tot ce rămâne este să creăm un client folosind VoxImplant Web SDK.

Crearea unui client web Clientul va avea nevoie doar de fișierul voximplant.min.js, care se află pe cdn, precum și de o înțelegere de bază a modului în care funcționează SDK-ul web. Pentru a face totul să arate mai mult sau mai puțin decent, puteți folosi Bootstrap. Nu văd rostul să aruncăm tot codul din fișierul HTML aici, ne vom uita doar la punctele principale, dar îl puteți înțelege oricând mai în profunzime descărcând fișierele de pe pagina noastră de pe GitHub.

// Conectați SDK-ul //funcția pentru a afișa jurnalul direct în funcția HTML log(str) ( document.getElementById("log").innerHTML += str+"
"; ) // Creați o instanță VoxImplant var voxAPI = VoxImplant.getInstance(); // Hang handlere de evenimente voxAPI.on(VoxImplant.Events.SDKReady, onSdkReady); voxAPI.on(VoxImplant.Events.ConnectionEstablished, onConnectionAPIEstablished); .on(VoxImplant.Events.ConnectionFailed, voxAPI.on(VoxImplant.Events.ConnectionClosed); / Inițializați SDK-ul încercați ( voxAPI.init(( micRequired: true, // solicitați acces la microfon/camera înainte de a vă conecta la VoxImplant videoSupport: true // activați suportul video )) ; ) catch(e) ( // dacă o inițializare a apărut o eroare, apoi afișați-o log(e.message) // Acum puteți utiliza funcția SDK - connect onSdkReady())( voxAPI.connect(); // după apel, va apărea un dialog de acces la cameră; /microfon) // Procesează funcția peMicAccessResult(e) ( dacă (e.rezultat) ( // a permis accesul la cameră/microfon) else ( // a refuzat accesul la cameră/microfon) ) // S-a stabilit o conexiune cu funcția VoxImplant onConnectionEstablished() ( // Vă puteți autentifica - aici trebuie să afișați un dialog pentru introducerea datelor și apoi să apelați următoarea funcție // Înlocuiți application_user, application_name, account_name și application_user_password cu datele dvs. pentru testarea voxAPI.login(application_user+"@ "+nume_aplicație+"." +nume_cont+".voximplant.com", parola_utilizator_aplicație); ) // Nu s-a putut conecta la funcția VoxImplant onConnectionFailed() ( // Fie websocket-urile nu au fost conectate, fie UDP este închis ) // Conexiunea a fost închisă funcția onConnectionClosed() ( // Puteți apela din nou conectarea pentru a vă reconecta) funcția onAuthResult( e) ( if (e.result) ( // autentificat - acum puteți efectua sau primi apeluri) else ( // eroare de autorizare, vă puteți uita la e.code pentru a înțelege ce este greșit) ) var currentCall = null; // apel curent // Funcția de apel primit onIncomingCall(e) ( currentCall = e.call; // Închideți handlerele currentCall.on(VoxImplant.CallEvents.Connected, onCallConnected); currentCall.on(VoxImplant.CallEvents.Disconnected, onCallDisconnected ); currentCall.on(VoxImplant.CallEvents.Failed, onCallFailed) // Răspundeți automat la apel într-o aplicație normală, este mai bine să afișați informații despre apelul primit și să dați opțiunea de a accepta sau respinge currentCall.answer. , (), ( receiveVideo: true, sendVideo: true ) ) // Funcție pentru o funcție de apel de ieșire createCall() ( // application_username - numele utilizatorului care apelează (prin video) currentCall = voxAPI.call( application_username, ( receiveVideo: true, sendVideo: true), " TEST CUSTOM DATA", ("X-DirectCall": "true"); // Închidem handlerele currentCall.on(VoxImplant. CallEvents.Connected, onCallConnected); currentCall.on(VoxImplant.CallEvents.Disconnected, onCallDisconnected); currentCall.on(VoxImplant.CallEvents.Failed, onCallFailed); ) // Apelul este conectat funcția onCallConnected(e) ( // Activați trimiterea video și afișați videoclipul de intrare voxAPI.sendVideo(true); currentCall.showRemoteVideo(true); ) // Apelul a încheiat funcția onCallDisconnected(e) ( currentCall = null ) // Eroare la apelarea funcției onCallFailed(e) ( // Cod de eroare e.code, descrierea erorii e.rezon )

Acestea sunt de fapt toate funcțiile și evenimentele principale de care avem nevoie. Desigur, acesta este un JS simplu, trebuie să îi atașați stiluri și aspect. Versiunea pe care am postat-o ​​pe GitHub arată astfel:

Dacă aveți nevoie de suport atât pentru Flash, cât și pentru WebRTC, va trebui să comutați aplicația client în modul corespunzător, deoarece nu am implementat apeluri video WebRTCFlash. Sperăm că suportul WebRTC va apărea în IE12 în viitorul apropiat, urmat de Safari. Dacă aveți nevoie de opțiunea „apel de la site la operator”, atunci puteți face 2 aplicații de operator, una folosind WebRTC, cealaltă folosind Flash și direcționați apelurile de pe site în funcție de modul SDK activat pentru vizitatorul site-ului, fie unuia, fie altui operator.

Nu este un secret că rețeaua socială VKontakte, ca orice alt site similar, există astfel încât utilizatorii să poată comunica între ei fără restricții semnificative. Ca urmare a acestui fapt și, de asemenea, datorită creșterii semnificative a popularității diferitelor comunități, a fost dezvoltat un plus special la funcționalitatea principală a site-ului, care deschide posibilitatea de a crea un chat multi-utilizator pentru membrii oricărui public. .

Vă rugăm să rețineți imediat că oricine este un administrator complet al comunității poate organiza un dialog cu mai mulți utilizatori. În același timp, desigur, ar trebui să existe oameni în grup care să ia parte la o astfel de conversație.

De asemenea, este important să rețineți că o conversație într-o comunitate este într-un fel un analog al unei funcționalități similare în cadrul sistemului de mesagerie instantanee. Cu toate acestea, dacă comparați conversațiile obișnuite și chatul, diferențele radicale în ceea ce privește instrumentele de bază vă atrag imediat atenția.

Creați un chat

Dacă judecăm funcționalitatea conversației în grupul VK în ansamblu, atunci putem spune cu încredere că o astfel de aplicație nu merită activată în toate comunitățile. Acest lucru se datorează faptului că un astfel de dialog universal, la care poate lua parte absolut orice utilizator VK.com, necesită o monitorizare constantă, a cărei complexitate crește progresiv odată cu numărul de participanți publici.

Înainte de a activa această funcție pentru un număr mare de utilizatori, se recomandă să studiați în mod independent modul în care funcționează fiecare element de chat. Datorită acestei abordări, nu vă veți consolida încă o dată abilitățile în gestionarea unui astfel de dialog.

Dacă creați un multi-dialog pentru orice comunitate extrem de populară, este recomandat să angajați moderatori pentru a simplifica controlul corespondenței active.

În acest moment, procesul principal de adăugare a unui chat poate fi considerat finalizat. Următoarele recomandări vă vor ajuta să configurați corect dialogul multiplu pentru un grup.

Configurarea chat-ului

Aplicația pentru organizarea unei conversații într-un grup este un instrument puternic, cu un număr destul de mare de parametri diferiți. În plus, setările pot fi găsite atât direct în interfața de chat în sine, cât și în timpul pregătirii acesteia pentru utilizare.

De asemenea, acordați atenție legendelor de lângă imaginea aplicației. În special, acest lucru se aplică inscripției "Copiază legătură", datorită căruia un link text către chatul nou creat va fi copiat în clipboard-ul Windows.

După cum probabil ați observat, mai există un singur link la sfârșit „Setări”. Făcând clic pe el, veți accesa fereastra de activare a dialogului cu un singur buton care se explică de la sine.

După activarea chat-ului, veți fi redirecționat automat către această aplicație.

Câmpul principal este destinat direct pentru scrierea și citirea mesajelor.

Când vizitați pentru prima dată aplicația, veți primi o notificare care vă permite să vă abonați la alerte pentru acea conversație. Este recomandat să permiteți acestui supliment să vă trimită notificări.

În partea dreaptă a zonei principale există o listă de participanți și două butoane pentru controlul aplicației.

Făcând clic pe butonul „Colțul de administrator”, vi se vor prezenta cele mai detaliate instrucțiuni pentru gestionarea chat-ului.

Deschidere „Setări chat”, vi se vor prezenta patru file de setări suplimentare.

Paragraf "Setari generale" este pe deplin la înălțimea numelui său, deoarece această secțiune conține doar parametrii de bază, de exemplu, vizibilitatea. În plus, aici vi se oferă posibilitatea de a adăuga un link către transmisia video, precum și text specializat, care poate fi un scurt set de reguli de comportament în acest chat.

Următoarea secțiune "Lideri" vă permite să acordați oricărui participant drepturi de manager prin introducerea unui link către pagina sa.

Element de setări „Lista neagră” vă permite să faceți același lucru ca și funcția de rețea socială cu același nume, adică să adăugați un utilizator, chiar dacă această persoană îndeplinește cerințele pentru vizitarea chat-ului sau este manager, la lista de excludere.

Secțiunea finală, a patra a parametrilor multi-dialog este cea mai remarcabilă, deoarece aici puteți activa o caracteristică unică a aplicației - un filtru automat pentru expresii obscene. De asemenea, vi se oferă posibilitatea de a seta parametrii pentru procesarea linkurilor trimise prin formularul de mesaj.

Pe lângă toate cele menționate mai sus, acordați atenție inscripției centrale din fereastra centrală goală. Apasa pe link „Vorbiți despre chatul comunității” pentru a lăsa adresa directă a dialogului tău multiplu pe peretele grupului.

În acest moment, familiarizarea cu setările și procesul de setare a parametrilor confortabili poate fi considerată completă. Când utilizați această aplicație, nu uitați că numai administratorul comunității are acces la toate funcțiile.

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

Introducere

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

Pasul 1: marcaj HTML

Vom începe acest tutorial prin crearea primului nostru fișier index.php.

Chat - Modulul Client

Bine ati venit,

Ieșiți din chat

• Vom începe html-ul nostru cu etichetele obișnuite DOCTYPE, html, head și body. În eticheta head vom adăuga titlul nostru și un link către foaia noastră de stil CSS (style.css).
• În interiorul etichetei body, ne structurăm aspectul într-un wrapper #wrapper div. Vom avea trei blocuri principale: un meniu simplu, o fereastră de chat și un câmp de introducere pentru mesajul nostru; fiecare cu propriul său div și id-ul corespunzător.
  • Blocul de meniu #menu div va fi format din două paragrafe. Primul va fi un salut pentru utilizator și va pluti spre stânga, iar al doilea va fi un link către ieșire și va pluti spre dreapta. Vom include, de asemenea, un div pentru a șterge elementele.
  • Div-ul #chatbox va conține jurnalul nostru de chat. Ne vom încărca jurnalul dintr-un fișier extern folosind o solicitare jQuery ajax.
  • Ultimul element din div-ul nostru #wrapper va fi formularul nostru, care va include un câmp de introducere a textului pentru mesajul utilizatorului și un buton de trimitere.
• Adăugăm scripturile noastre ultimul pentru a încărca pagina mai repede. Mai întâi vom insera linkul Google jQuery CDN, deoarece vom folosi biblioteca jQuery în acest tutorial. A doua noastră etichetă de script va fi locul unde vom lucra. Vom încărca tot codul nostru odată ce documentul este gata.

Pasul 2: Creați stil CSS

Acum vom adăuga niște CSS pentru ca aplicația noastră de chat să arate mai bine decât stilul implicit al browserului. Codul de mai jos va fi adăugat la fișierul nostru style.css.

/* Document CSS */ body ( font:12px arial; culoare: #222; text-align:center; padding:35px; ) form, p, span ( margin:0; padding:0; ) input ( font:12px arial; ) ; ) a ( culoare:#0000FF; text-decoration:none; ) a:hover (text-decoration:subliniat; ) #wrapper, #loginform ( margin:0 auto; padding-bottom:25px; background:#EBF4FB; width :504px; border:1px solid #ACD8F0; ) #loginform ( padding-top:18px; ) #loginform p ( margin: 5px; ) #chatbox ( text-align:left; margin:0 auto; margin-bottom: 25px; padding:10px; înălțime:270px bord:1px solid #ACD8F0; 25px 12.5px 25px ) .welcome ( float:left; ) .logout (float:right; ) .msgln ( margin:0 0 2px 0; )

Nu este nimic special în css-ul de mai sus, în afară de faptul că unele id-uri sau clase pentru care ne stilăm vor fi adăugate puțin mai târziu.

După cum puteți vedea mai sus, am terminat de construit interfața de chat.

Pasul 3: Utilizați PHP pentru a crea un formular de conectare.

Acum vom implementa un formular simplu care va cere utilizatorului numele său înainte de a-l transmite.

Funcția loginForm() creată de noi constă într-un simplu formular de conectare care solicită utilizatorului numele său. Apoi folosim un construct if else pentru a verifica dacă utilizatorul a introdus un nume. Dacă persoana a introdus un nume, îl setăm la $_SESSION[„nume”]. Deoarece folosim o sesiune bazată pe cookie-uri pentru a stoca numele, trebuie să apelăm session_start() înainte de a imprima ceva în browser.

Un lucru căruia ar putea dori să-i acordați o atenție deosebită este că am folosit funcția htmlspecialchars(), care convertește caracterele speciale în entități HTML, protejând astfel numele variabilei de a deveni o victimă a cross-site scripting (XSS). De asemenea, vom adăuga această funcție mai târziu la o variabilă text care va fi publicată în jurnalul de chat.

Afișarea formularului de conectare

Pentru a afișa formularul de autentificare în cazul în care utilizatorul nu este autentificat și, prin urmare, nu este creată nicio sesiune, folosim o altă instrucțiune if else în jurul etichetelor #wrapper div și script din codul nostru sursă. În caz contrar, dacă utilizatorul este autentificat și a creat o sesiune, acest cod va ascunde formularul de conectare și va afișa fereastra de chat.

Bine ati venit,

Ieșiți din chat

// jQuery Document $(document).ready(function())( ));

Meniu de bun venit și de deconectare

Încă nu am terminat de creat sistemul de conectare pentru această aplicație de chat. Încă trebuie să oferim utilizatorului opțiunea de a se deconecta și de a încheia sesiunea de chat. După cum vă amintiți, marcajul nostru HTML original includea un meniu simplu. Să revenim și să adăugăm niște cod PHP care va oferi meniului mai multă funcționalitate.

În primul rând, să adăugăm numele de utilizator la mesajul de bun venit. Vom face acest lucru prin afișarea sesiunii de nume de utilizator.

Bine ati venit,

Pentru a permite utilizatorului să se deconecteze și să încheie sesiunea, vom trece peste bord și vom folosi jQuery pentru scurt timp.

// jQuery Document $(document).ready(function())( //Dacă utilizatorul dorește să încheie sesiunea $("#exit").click(function())( var exit = confirm("Sunteți sigur că doriți pentru a încheia sesiunea?"); if(exit==true)(window.location = "index.php?logout=true";) )); ));

Codul jquery de mai sus arată pur și simplu un dialog de confirmare dacă utilizatorul face clic pe linkul #exit. Dacă utilizatorul confirmă deconectarea, hotărând astfel să încheie sesiunea, o vom trimite la index.php?logout=true. Acest lucru va crea pur și simplu o variabilă numită logout cu valoarea true. Trebuie să interceptăm această variabilă folosind PHP:

If(isset($_GET["logout"]))( //Mesaj de ieșire simplu $fp = fopen("log.html", "a"); fwrite($fp, " Utilizator „. $_SESSION[„nume”] .” a părăsit sesiunea de chat.
"); fclose($fp); session_destroy(); header("Locație: index.php"); //Redirecționează utilizatorul )

Acum vom vedea dacă variabila get „logout” există folosind funcția isset(). Dacă variabila a fost trecută printr-o adresă URL, cum ar fi linkul menționat mai sus, procedăm la încheierea sesiunii utilizatorului cu numele de utilizator curent.

Înainte de a distruge sesiunea utilizatorului cu numele curent folosind funcția session_destroy(), dorim să afișăm un simplu mesaj de deconectare î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 nostru log.html, care, așa cum vom vedea mai târziu, va fi creat ca jurnal de chat. Vă rugăm să rețineți că am adăugat clasa „msgln” la div. Am definit deja stilul css pentru acest bloc.

După ce am făcut acest lucru, distrugem sesiunea și redirecționăm utilizatorul către aceeași pagină în care va apărea formularul de autentificare.

Pasul 4: Suportați intrarea utilizatorului

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

jQuery

Aproape tot ceea ce vom face cu jQuery pentru a ne procesa datele se va învârti în jurul unei cereri post jQuery.

//Dacă utilizatorul trimite formularul $("#submitmsg").click(function())( var clientmsg = $("#usermsg").val(); $.post("post.php", (text: clientmsg )); $("#usermsg").attr("valoare", "");

Înainte de a începe să facem ceva, trebuie să captăm intrarea utilizatorului sau ceea ce a introdus în fluxul de intrare #submitmsg. Acest lucru poate fi realizat cu funcția val(), care preia valoarea setată în câmpul formular. Acum stocăm această valoare în variabila clientmsg.

Aici vine partea cea mai importantă: cererea de postare jQuery. Trimite o solicitare POST către fișierul post.php, pe care o vom crea într-un moment. Trimite intrarea clientului sau orice a fost stocat în variabila clientmsg.

La sfârșit, ștergem intrarea #usermsg ștergând atributul value.

Vă rugăm să rețineți că codul de mai sus va intra în eticheta noastră de script unde am plasat codul de deconectare jQuery.

PHP - post.php

În prezent avem date POST trimise în fișierul post.php de fiecare dată când utilizatorul trimite formularul și trimite un mesaj nou. Sarcina noastră acum este să captăm aceste date și să le scriem în jurnalul nostru de chat.

Înainte de a face ceva, trebuie să pornim fișierul post.php folosind funcția session_start() deoarece vom folosi sesiunea după numele de utilizator în acest fișier.

Folosind un isset boolean, vom verifica dacă există o sesiune pentru „nume” înainte de a face ceva mai departe.

Acum vom captura datele POST pe care jQuery le-a trimis în acest fișier. Vom stoca aceste date în variabila $text.

Aceste date, precum și toate datele introduse de utilizator în general, vor fi stocate în fișierul log.html. Pentru a face acest lucru, vom deschide fișierul în modul „a” al funcției fopen, care conform php.net deschide fișierul doar pentru scriere; plasează indicatorul fișierului la sfârșitul fișierului. Dacă fișierul nu există, vom încerca să-l creăm. Apoi vom scrie mesajul nostru într-un fișier folosind funcția fwrite().

• Mesajul pe care îl vom înregistra va fi conținut într-un div .msgln. Acesta va conține data și ora generate de funcția date(), sesiunea nume de utilizator și text, care vor fi, de asemenea, înconjurate de funcția htmlspecialchars() pentru a evita XSS.

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

Pasul 5: Afișarea conținutului jurnalului de chat (log.html)

Tot ceea ce postează utilizatorul este procesat și publicat folosind jQuery; este scris în jurnalul de chat folosind PHP. Singurul lucru care mai rămâne de făcut este să arăți utilizatorului jurnalul de chat actualizat.

Pentru a ne economisi ceva timp, vom preîncărca jurnalul de chat în div-ul #chatbox ca și cum ar conține ceva.

Folosim o procedură similară cu cea pe care am folosit-o în fișierul post.php, dar de data aceasta citim și scoatem doar conținutul fișierului.

cerere jQuery.ajax

Solicitarea ajax este nucleul a tot ceea ce facem. Această solicitare nu numai că ne permite să trimitem și să primim date prin formular fără a reîmprospăta pagina, dar ne permite și să procesăm datele solicitate.

//Încărcați fișierul care conține funcția jurnal de chat loadLog())( $.ajax(( url: "log.html", cache: false, succes: function(html)( $("#chatbox")).html(html ) ; //Inserați jurnalul de chat în #chatbox div ), ));

Vom împacheta cererea noastră ajax într-o funcție. Vei vedea de ce chiar acum. După cum puteți vedea mai sus, am folosit doar trei dintre obiectele de solicitare ajax jQuery.

• url : șir URL pentru cerere. Folosim fișierul nostru de jurnal de chat numele log.html.
• cache: Acest lucru va împiedica fișierul nostru să fie stocat în cache. Acest lucru ne va asigura că, ori de câte ori trimitem o solicitare, vom avea un jurnal de chat actualizat.
• succes : Acest lucru ne va permite să atașăm o funcție care va transmite datele pe care le-am solicitat.

După cum puteți vedea, mutăm apoi datele pe care le-am solicitat (html) în div-ul #chatbox.

Defilare automată

După cum am văzut în alte aplicații de chat, conținutul derulează automat în jos dacă containerul de jurnal de chat (#chatbox) devine plin. Vom implementa o caracteristică simplă și similară care va compara înălțimea barei de defilare a unui container înainte și după ce facem o solicitare ajax. Dacă înălțimea barei de defilare a devenit mai mare după solicitare, folosim un efect de animație jQuery pentru a derula div-ul #chatbox.

//Încărcați fișierul care conține funcția jurnal de chat loadLog())( var oldscrollHeight = $("#chatbox").attr("scrollHeight") - 20; //Înălțimea derulării înainte de solicitare $.ajax(( url: " log .html", cache: false, succes: function(html)( $("#chatbox").html(html); //Inserați jurnalul de chat în div #chatbox //Auto-scroll var newscrollHeight = $(" # chatbox").attr("scrollHeight") - 20; //Înălțimea derulării după cerere if(newscrollHeight > oldscrollHeight)( $("#chatbox").animate(( scrollTop: newscrollHeight ), "normal"); / / Defilare automată în partea de jos a div ) ), ));

• Mai întâi vom stoca înălțimea barei de defilare a div-ului #chatbox în variabila oldscrollHeight inainte de executarea cererii.
• Odată ce interogarea noastră are succes, vom stoca înălțimea barei de defilare a div-ului #chatbox într-o variabilă newscrollHeight.
• Vom compara apoi înălțimea barei de derulare în ambele variabile folosind o instrucțiune if. Dacă newscrollHeight este mai mare decât oldscrollHeight, folosim un efect de animație pentru a derula div-ul #chatbox.

Actualizarea constantă a jurnalului de chat

Acum se poate pune întrebarea cum de multe ori vom actualiza datele noi transferate între utilizatori. Sau pentru a reformula întrebarea, cu ce regularitate vom trimite solicitări constante de actualizare a datelor?

SetInterval(loadLog, 2500); //Reîncărcați fișierul la fiecare 2500 ms sau x ms dacă doriți să schimbați al doilea parametru

Răspunsul la întrebarea noastră se află în funcția setInterval. Această funcție va rula funcția noastră loadLog() la fiecare 2,5 secunde, care va cere un fișier actualizat și va derula automat blocul.

Terminat

Au fost efectuate! Sper că ați învățat cum funcționează sistemul de chat de bază și, dacă aveți sugestii, sunt bucuros să le urez bun venit. Acesta este cel mai simplu sistem de chat pe care îl puteți crea ca aplicație de chat. Puteți să construiți pe el și să construiți mai multe camere de chat, să adăugați o zonă de administrare, emoticoane etc. Aici limita ta este cerul.

Mai jos sunt câteva link-uri pe care poate doriți să le verificați dacă vă gândiți să extindeți această aplicație de chat:

• Protejați-vă formularele cu chei de formular - evitați XSS (scriptare între site-uri) și falsificarea cererilor între site-uri.
• Trimiterea unui formular fără a reîmprospăta pagina folosind jQuery - extindeți cererea noastră ajax
• Cum să faceți cereri AJAX în pur Javascript - aflați cum funcționează bucătăria de solicitări în pur Javascript.

• Urmareste-ne pe