Accentsconagua

Hvordan lage en enkel web-basert chat-applikasjon

Kode
Share

I denne opplæringen vil vi skape et enkelt nettbasert chatprogram med PHP og jQuery. Denne typen verktøy ville være perfekt for et live support system for ditt nettsted.

Hvis du leter etter en ferdig laget app, et script eller et plugin, kan du se på en av de mange Chat-skriptene som er tilgjengelige på CodeCanyon. Eller du kan ansette en erfaren apputvikler for å hjelpe deg.

Ellers lærer du å bygge en selv i denne opplæringen.

Introduksjon

Chatprogrammet vi skal bygge i dag, vil være ganske enkelt. Den vil inneholde et innloggings- og logout-system, AJAX-stilfunksjoner, og vil også tilby støtte til flere brukere.

Trinn 1: HTML Markup

Vi starter denne opplæringen ved å lage vår første fil som heter index.php. 

   Chat - kundemodul   
 
 
Velkommen, 
 
Avslutt Chat
  • Vi starter vår html med de vanlige DOCTYPE-, HTML-, hodet- og kroppstempelene. I hodetiketten legger vi til tittelen vår, og kobler til vår css stilark (style.css).
  • Inne i kroppstemmen strukturerer vi vår layout i #wrapper div. Vi vil ha tre hovedblokker: en enkel meny, vår chatbox og vår meldingsinngang; hver med sin respektive div og id.
    • #Menu div vil bestå av to avsnitt elementer. Den første vil være velkommen til brukeren og vil flyte til venstre og den andre vil være en utgangslink og vil flyte til høyre. Vi inkluderer også en div for å fjerne elementene.
    • #Chatbox div vil inneholde vår chatlogg. Vi laster inn loggen vår fra en ekstern fil ved hjelp av jQuery's ajax-forespørsel.
    • Det siste elementet i #wrapper div vil være vårt skjema, som vil inneholde en tekstinngang for brukermeldingen og en send-knapp.
  • Vi legger til våre skript sist for å laste siden raskere. Vi kobler først til Google jQuery CDN, da vi bruker jQuery-biblioteket for denne opplæringen. Vår andre skriptetikett vil være hvor vi skal jobbe med. Vi laster inn all vår kode etter at dokumentet er klart.

Trinn 2: CSS Styling

Vi vil nå legge til noen css for å gjøre vårt chatprogram se bedre ut enn med standard nettleser styling. Koden under vil bli lagt til vår style.css-fil.

 / * CSS Document * / body font: 12px arial; farge: # 222; tekst-Justering: center; padding: 35px;  form, p, span margin: 0; padding: 0;  input font: 12px arial;  en farge: # 0000FF; text-decoration: none;  a: svever tekst-dekorasjon: understreke;  #wrapper, #loginform margin: 0 auto; padding-bottom: 25px; bakgrunn: # EBF4FB; bredde: 504px; grense: 1px solid # ACD8F0;  #loginform padding-top: 18px;  #loginform p margin: 5px;  #chatbox text-align: left; margin: 0 auto; margin-bottom: 25px; padding: 10px; bakgrunn: #fff; høyde: 270px; bredde: 430px; grense: 1px solid # ACD8F0; flow: auto;  #usermsg bredde: 395px; grense: 1px solid # ACD8F0;  #submit width: 60px;  .error color: # ff0000;  #menu polstring: 12.5px 25px 12.5px 25px;  .welcome float: left;  .logout float: right;  .msgln margin: 0 0 2px 0;

Det er ikke noe spesielt med ovennevnte css annet enn det faktum at noen id'er eller klasser, som vi har satt stil for, vil bli lagt til litt senere.

Som du kan se over, er vi ferdige med å bygge chatens brukergrensesnitt.

Trinn 3: Bruk PHP til å opprette en innloggingsskjema.

Nå skal vi implementere en enkel form som vil spørre brukeren sitt navn før de fortsetter videre.

 
 
Vennligst skriv inn navnet ditt for å fortsette:
'; hvis (isset ($ _ POST ['enter'])) if ($ _ POST ['name']! = "") $ _SESSION ['navn'] = stripslashes (htmlspecialchars ($ _ POST ['navn']) ); annet echo 'Vennligst skriv inn et navn'; ?>

Den funksjonen loginForm () vi opprettet består av et enkelt innloggingsskjema som ber brukeren for hans / hennes navn. Vi bruker deretter en if and else-setning for å bekrefte at personen har skrevet inn et navn. Hvis personen skrev inn et navn, satt vi det navnet som $ _SESSION ['navn']. Siden vi bruker en informasjonskapselbasert økt for å lagre navnet, må vi ringe session_start () før alt blir sendt ut til nettleseren.

En ting som du kanskje vil være oppmerksom på, er at vi har brukt funksjonen htmlspecialchars (), som konverterer spesialtegn til HTML-enheter, og dermed beskytter navnetvariabelen fra å bli offer for Cross-site scripting (XSS). Vi vil senere også legge til denne funksjonen til tekstvariabelen som vil bli lagt ut i chatloggen.

Viser innloggingsskjemaet

For å vise innloggingsskjemaet i tilfelle en bruker ikke har logget inn, og dermed ikke har opprettet en økt, bruker vi en annen hvis og annet erklæring rundt #wrapper div og script tags i vår originale kode. I motsatt tilfelle vil dette skjule innloggingsskjemaet, og vise chatboksen hvis brukeren er logget inn og har opprettet en økt.

 
 
 
Velkommen, 
 
Avslutt Chat

Velkommen og Logg ut-menyen

Vi er ikke ferdige med å opprette påloggingssystemet for dette chatprogrammet. Vi må fortsatt tillate brukeren å logge ut og avslutte chat-økten. Hvis du kan huske, inkluderte vår opprinnelige HTML-oppslag en enkel meny. La oss gå tilbake og legge til noen PHP-kode som gir menyen mer funksjonalitet.

Først av alt, la oss legge til brukernavnet til velkomstmeldingen. Vi gjør dette ved å utgjøre økten av brukerens navn.

Velkommen,

For å tillate brukeren å logge ut og avslutte sesjonen, hopper vi foran oss selv og bruker jQuery kort.

Jquery-koden ovenfor enkle viser et bekreftelsesvarsel hvis en bruker klikker på #exit-lenken. Hvis brukeren bekrefter utgangen, og derfor bestemmer seg for å avslutte sesjonen, sender vi dem til index.php? Logout = true. Denne enkle oppretter en variabel som kalles logout med verdien av true. Vi må ta denne variabelen med PHP:

hvis (isset ($ _ GET ['logout'])) // Enkel utgående melding $ fp = fopen ("log.html", 'a'); skriv ut ($ fp, "
Bruker ". $ _SESSION ['navn']." har forlatt chat-økten.
"); fclose ($ fp); session_destroy (); header (" Location: index.php "); // Omdirigere brukeren

Vi ser nå om en variabel av "logout" eksisterer ved hjelp av isset () -funksjonen. Hvis variabelen er sendt via en URL, for eksempel lenken nevnt ovenfor, fortsetter vi å avslutte økten til brukerens navn.

Før du ødelegger brukerens navnesession med funksjonen session_destroy (), vil vi skrive en enkel utgående melding til chat-loggen. Det vil si at brukeren har forlatt chat-økten. Vi gjør dette ved å bruke funksjonene fopen (), fwrite () og fclose () til å manipulere vår log.html-fil, som vi senere vil opprette som vår chat-logg. Vær oppmerksom på at vi har lagt til en klasse av 'msgln' til div. Vi har allerede definert css styling for denne div.

Etter å ha gjort dette, ødelegger vi økten, og omdirigerer brukeren til samme side der innloggingsskjemaet vil vises.

Trinn 4: Håndtering av brukerinngang

Når en bruker sender inn skjemaet, ønsker vi å ta tak i hans innspill og skrive det til vår chat-logg. For å kunne gjøre dette må vi bruke jQuery og PHP til å fungere synkront på klient- og serversiden.

jQuery

Nesten alt vi skal gjøre med jQuery for å håndtere våre data, vil dreie seg om jQuery-postforespørselen.

 // Hvis brukeren sender skjemaet $ ("# submitmsg") klikker du (funksjon () var clientmsg = $ ("# usermsg") .val (); $ .post ("post.php", text: clientmsg ); $ ("# usermsg"). Attr ("verdi", ""); return false;);
  1. Før vi gjør noe, må vi ta tak i brukerens innspill, eller hva han har skrevet inn i #submitmsg-inngangen. Dette kan oppnås med val () -funksjonen, som får verdien satt i et skjemafelt. Vi lagrer nå denne verdien inn i clientmsg-variabelen.
  2. Her er vår viktigste del: jQuery-postforespørselen. Dette sender en POST-forespørsel til post.php-filen som vi vil opprette om et øyeblikk. Det legger inn klientinngangene, eller hva som er lagret i klientmg variabelen.
  3. Til slutt fjerner vi innføringen #usermsg ved å sette verdien attributtet til tomt.

Vær ikke oppmerksom på at koden ovenfor vil gå inn i skriptet, der vi plasserte jQuery logout-koden.

PHP - post.php

For øyeblikket har vi POST-data som sendes til post.php-filen hver gang brukeren sender skjemaet, og sender en ny melding. Vårt mål nå er å ta tak i disse dataene, og skriv det inn i vår chat-logg.

(".date (" g: i A ").") "$ _ SESSION [ 'name'].": ".stripslashes (htmlspecialchars ($ text))."
"); fclose ($ fp);?>
  1. Før vi gjør noe, må vi starte posten .php-filen med session_start () -funksjonen, siden vi bruker brukerens navn i denne filen.
  2. Ved å bruke isset boolean, kontrollerer vi om økten for "navn" eksisterer før du gjør noe annet.
  3. Vi tar nå POST-dataene som ble sendt til denne filen av jQuery. Vi lagrer disse dataene i $ tekstvariabelen.
  4. Disse dataene, som alle overordnede brukerinngangsdata, vil bli lagret i log.html-filen. For å gjøre dette åpner vi filen med modusen på fopen-funksjonen til 'a', som ifølge php.net åpner filen for å skrive bare; plasserer filpekeren på slutten av filen. Hvis filen ikke eksisterer, forsøk å opprette den. Vi skriver deretter vår melding til filen ved hjelp av fwrite () -funksjonen.
    • Meldingen vi skal skrive vil bli vedlagt i .msgln div. Den vil inneholde dato og klokkeslett generert av dato () -funksjonen, økten av brukerens navn og teksten, som også er omkranset av htmlspecialchars () -funksjonen for å forhindre at XSS.

    Til slutt lukker vi vårt filhåndtak ved hjelp av fclose ().

Trinn 5: Viser innholdet i Chatlogg (log.html)

Alt brukeren har postet blir håndtert og lagt ut ved hjelp av jQuery; Det er skrevet til chat-loggen med PHP. Det eneste du må gjøre er å vise den oppdaterte chatloggen til brukeren.

For å spare oss litt tid, vil vi forhåndsføre chatloggen til #chatbox div hvis den har noe innhold.

 
 0) $ handle = fopen ("log.html", "r"); $ content = fread ($ handle, file size ("log.html")); fclose ($ håndtak); ekko $ innhold ?>

Vi bruker en lignende rutine som vi brukte post.php-filen, bortsett fra denne gangen, leser og leser vi bare innholdet i filen.

JQuery.ajax-forespørselen

Ajax-forespørselen er kjernen i alt vi gjør. Denne forespørselen tillater ikke bare å sende og motta data gjennom skjemaet uten å oppdatere siden, men det tillater oss også å håndtere dataene som er forespurt.

// Last filen som inneholder chatloggfunksjonen loadLog () $ .ajax (url: "log.html", cache: falsk, suksess: funksjon (html) $ ("# chatbox"). Html (html) ; // Sett inn chatlogg i #chatbox div,);

Vi pakker inn vår ajax-forespørsel inne i en funksjon. Du vil se hvorfor på et sekund. Som du ser over, vil vi bare bruke tre av jQuery-ajax-forespørselsobjektene.

Som du ser, flytter vi deretter dataene vi ba om (html) i #chatbox div.

Auto-rulle

Som du kanskje har sett i andre chat-applikasjoner, ruller innholdet automatisk ned hvis chat-loggbeholderen (#chatbox) overløper. Vi skal implementere en enkel og lignende funksjon, som vil sammenligne beholderens rullehøyde før og etter at vi gjør ajax-forespørselen. Hvis rullehøyden er større etter forespørselen, vil vi bruke jQuery's animasjonseffekt til å bla #chatbox div.

 // Last filen som inneholder chatloggfunksjonen loadLog () var oldscrollHeight = $ ("# chatbox"). Attr ("scrollHeight") - 20; // Rull høyde før forespørselen $ .ajax (url: "log.html", cache: falsk, suksess: funksjon (html) $ ("# chatbox"). Html (html); // Sett inn chatlogg #chatbox div // Auto-scroll var newscrollHeight = $ ("# chatbox"). Attr ("scrollHeight") - 20; // Rull høyde etter forespørselen hvis (newscrollHeight> oldscrollHeight) $ ("# chatbox") .animate (scrollTop: newscrollHeight, 'normal'); // Autoscroll til bunnen av div,);

Kontinuerlig oppdatering av Chat-loggen

Nå kan et spørsmål oppstå, hvordan vil vi stadig oppdater de nye dataene som sendes frem og tilbake mellom brukerne? Eller for å omformulere spørsmålet, hvordan vil vi kontinuerlig fortsette å sende forespørsler for å oppdatere dataene?

setInterval (loadLog, 2500); // Oppdater filen hver 2500 ms eller x ms hvis du ønsker å endre den andre parameteren

Svaret på spørsmålet ligger i setInterval-funksjonen. Denne funksjonen kjører vår loadLog () -funksjon hvert 2,5 sekund, og loadLog-funksjonen vil be om den oppdaterte filen og autoscroll div.

ferdig

Vi er ferdige! Jeg håper at du har lært hvordan et grunnleggende chat system fungerer, og hvis du har noen forslag til noe, vil jeg gjerne ønske dem velkommen. Dette chatsystemet er enkelt som du kan få med et chatprogram. Du kan jobbe av dette og bygge flere chatrom, legge til en administrativ backend, legge til uttrykksikoner, ect. Himmelen her er grensen din.

Også, hvis du trenger en profesjonell app eller et plugin for ditt neste prosjekt, kan du se på et av de mange Chat-skriptene vi har til salgs på CodeCanyon. 

Nedenfor finner du noen få linker som du kanskje vil sjekke om du tenker på å utvide dette chatprogrammet:

Lær JavaScript: Den komplette veiledningen

Vi har bygget en komplett guide for å hjelpe deg med å lære JavaScript, enten du er bare i gang som webutvikler eller du vil utforske mer avanserte emner.

Kode
×