Važan aspekt pri razvoju komercijalne web stranice je organizacija povratne informacije sa svojom publikom. I, naravno, direktna komunikacija s posjetiteljima stranice mnogo je poželjnija od korespondencije putem e-pošte ili popunjavanja kontakt obrazaca. Upravo u te svrhe razvijene su mnoge aplikacije za komunikaciju korisnika putem tekstualnih, audio ili video poruka.

Skripte za organizovanje ćaskanja, sa kojima želimo da vas upoznamo, lako se mogu integrisati u vašu web stranicu, što će podići nivo komunikacije između posjetitelja web stranice i sa online konsultantom korporativne web stranice ili online trgovine na novu visinu. Odmah napravimo rezervaciju - sve ovdje prikupljene skripte pripadaju premium klasi, tj. nije besplatno. Međutim, njihova cijena je u vrlo razumnim granicama i neće imati primjetan utjecaj na vaš budžet. Uskoro ćemo objaviti izbor besplatnih skripti za kreiranje chata. Pratite nas dalje društvene mreže ili na RSS kako ne bi propustili post.

PHP Flat Visual Chat Ovaj jedinstveni chat za organizovanje onlajn konsultanta, pored svoje osnovne svrhe, može poslužiti i kao neka vrsta vodiča za vaš sajt. Tokom komunikacije, možete vizualno istaknuti jedan ili drugi element na stranici stranice i pokazati ga korisniku. Ovaj samostalni proizvod ima svoj nezavisni panel za upravljanje računima operatera.
Cijena: $16

ShoutCloudShouldCloud je fleksibilan i bogat funkcijama PHP/AJAX chat koji je izuzetno lako integrirati u vašu web stranicu za nekoliko minuta. Ne zahtijeva MySQL bazu podataka, a datoteke potrebne za rad kreira automatski. GUI automatski do veličine kontejnera u kojem se chat nalazi.
Cijena: $8

Chat Plus ProChat Plus PRO je moćna PHP/AJAX skripta za ćaskanje sa prilagodljivim interfejsom. Uz ovaj divan proizvod, vaši posjetioci će provesti više od jedne neprospavane noći u ležernim razgovorima. U porukama je dozvoljeno korištenje slika, linkova do video zapisa na YouTube-u ili drugim stranicama. Podržani su korisnički profili u koje mogu postaviti različite lične podatke. Moguće je kreirati zasebne „sobe“ na osnovu interesovanja i objavljivati ​​ih na različitim sajtovima.
Cijena: $24

Social Meet ScriptSocial Meet Script je napravljen u takozvanom tinder stilu - aplikaciji za pronalaženje upoznavanja i komunikacije. Otvaranjem chata možete odabrati korisnika koji vam se sviđa i, ako vam on uzvrati osjećaje, započnite komunikaciju. Social Meet Script ima ugrađeni chat, sistem geolokacije i VIP članstvo.
Cijena: $23

PHP Chat sa WebClientEngage Visitor Chat je vrlo prilagodljiva online konsultantska skripta. Jednostavan i zgodan administratorski interfejs. Značajna karakteristika ovog ćaskanja je prisustvo Windows klijenta - moći ćete da vidite dolazne poruke u području obavijesti na radnoj površini i komunicirajte s klijentima direktno iz Windowsa, čak i bez odlaska na administrativni panel web-mjesta.
Cijena: $32

Quick PHP ChatQuick PHP Chat je skripta koja se lako koristi za organizovanje ćaskanja na vašoj web stranici. Ima 10 ugrađenih shema boja za prilagođavanje izgled u skladu sa shema boja Vaša web stranica. Administrativne funkcije vam omogućavaju da upravljate korisničkim nalozima, posebno "zabranite" pojedinačne korisnike, kao i da ih obavijestite o razlogu "zabrane".
Cijena: $7

PHP centar za podršku i Live ChatPHP centar za podršku je sistem za upravljanje tehničkom podrškom u minimalističkom stilu. Fokusiran na organizaciju usluge tehničke podrške, omogućava vam da dodijelite operatere i administratore pojedinačnim kompanijama, klijentima, odjelima i korisnicima. Moguće je koristiti uređivač mailchip-a kako bi vašim mailing listama dali jedinstven izgled.
Cijena: $32

PHP Live Support ChatPHP Live Chat - samostalna aplikacija online konsultant, koji se može ugraditi u bilo koju web stranicu. Za razliku od servisa koji pružaju chat usluge, dobijate potpunu slobodu u njihovom korištenju. Bez mjesečnih naknada - platite jednom i koristite koliko želite!
Cijena: 19 dolara

Boom ChatBoomchat ima prijateljski korisnički interfejs i nekoliko jedinstvene karakteristike. Kompletan interfejs osigurava jednostavnu upotrebu na bilo kom uređaju, bilo da se radi o računaru, tabletu ili pametnom telefonu.
Cijena: $18

ReadyChat Novi proizvod od developera DesignSkate. Značajno poboljšan u odnosu na prethodni razvoj „moChat“-a: optimiziraniji i vizualno ugodniji i za korisnika i za administratora.
Cijena: $15

Simple Chat Script Jednostavan i lagan SimpleChat može se integrirati u bilo koju PHP stranicu. Ima HTML

Kao i obično, prvi korak se odnosi na HTML označavanje. Naš dokument je napravljen prema HTML5, što nam omogućava da koristimo novu, kraću sintaksu DOCTYPE, i izostavite atribut tip u oznakama script.

index.html

Pravljenje AJAX web chata sa koristeći PHP, MySQL i jQuery | Demo za web stranicu Izrada AJAX web chata koristeći PHP i jQuery

Da bi se optimiziralo učitavanje, stilovi su uključeni u odjeljke glava, i JavaScript datoteke su uključene na dnu dokumenta, prije završne oznake tijelo.

Da bismo organizirali područje koje se može pomicati s linijama za ćaskanje, koristimo dodatak jScrollPane. Ovaj dodatak ima svoje stilove, koji su uključeni u odjeljke glava.

Označavanje ćaskanja sastoji se od četiri glavna elementa div- gornji panel, kontejner za ćaskanje, korisnički kontejner i donji panel. Last div sadrži obrasce za registraciju korisnika i slanje poruka. Obrazac za slanje poruke je skriven po defaultu i prikazuje se samo ako se korisnik uspješno prijavio na chat sistem.

Zatim uključujemo JavaScript datoteke: biblioteku jQuery, dodatak za kotačić miša (koji se koristi u jScrollPane), dodatak jScrollPane i našu datoteku script.js.

Šema baze podataka

Pre nego što pređemo na PHP deo, moramo prvo da pogledamo kako su organizovani podaci za ćaskanje u MySQL bazi podataka.

Za našu skriptu koristimo dvije tabele. U tabeli webchat_users informacije o učesnicima chata se pohranjuju. Tabela ima polja id , ime, gravatar I posljednja_aktivnost. Polje ime definiran kao jedinstven, čime se sprječava korištenje duplih imena u chatu.

Još jedno korisno svojstvo polja sa jedinstveni indeks je da zahtjev za umetanje neće uspjeti s greškom i svojstvom umetnuti_redovi MySQLi objekat će biti postavljen na 0 ako pokušate da umetnete duple redove. U PHP klasi Chat ove nekretnineće se aktivno koristiti.

Polje posljednja_aktivnost sadrži vrijednost vremena. Vrijednost se ažurira svakih 15 sekundi za svakog korisnika. Polje je također definirano kao indeks, koji vam omogućava da brzo uklonite neaktivne korisnike (vrijednost u polju posljednja_aktivnost više od 15 znači da korisnik više ne gleda prozor za ćaskanje).

Table webchat_lines sadrži unose za ćaskanje. Imajte na umu da ovdje pohranjujemo i ime autora i gravatar. Ovo dupliranje nam omogućava da izbjegnemo korištenje skupe direktive pridruži se kada tražite najnovije unose - one najčešće korištene u našoj aplikaciji.

Definicije tablica su dostupne u datoteci tables.sql u izvorima. Možete koristiti tekst upita za kreiranje tabela. Takođe, kada instalirate chat na svom hostu, potrebno je da promenite podešavanja u ajax.php vašim podacima za povezivanje sa MySQL bazom podataka.

PHP

Sada imamo bazu podataka, hajde da razgovaramo o PHP skripti koja kontroliše ćaskanje.

Prva datoteka koju ćemo pogledati je ajax.php. Obrađuje AJAX zahtjeve sa strane klijenta iz jQueryja i izlazi podatke u JSON formatu.

ajax.php

/* Konfiguracija baze podataka. Dodajte svoje podatke */ $dbOptions = array("db_host" => "", "db_user" => "", "db_pass" => "", "db_name" => ""); /* Kraj sekcije konfiguracije baze podataka */ error_reporting(E_ALL ^ ​​E_NOTICE); zahtijevaju "classes/DB.class.php"; zahtijevaju "classes/Chat.class.php"; zahtijevaju "classes/ChatBase.class.php"; zahtijevaju "classes/ChatLine.class.php"; zahtijevaju "classes/ChatUser.class.php"; session_name("webchat"); session_start(); if(get_magic_quotes_gpc())( // Uklonite dodatne kose crte array_walk_recursive($_GET,create_function("&$v,$k","$v = stripslashes($v);")); array_walk_recursive($_POST,create_function(") &$v,$k","$v = stripslashes($v);")); ) try( // Povezivanje sa bazom podataka DB::init($dbOptions); $response = array(); // Obrada podržane akcije: switch($_GET["action"])( case "login": $response = Chat::login($_POST["name"],$_POST["email"]); prekid; slučaj "checkLogged" : $response = Chat::checkLogged(); $response = Chat::logout(); $response = Chat::submitChat; pauza "getUsers": $response = "getChats" ("pogrešna akcija"); ) echo json_encode($response) catch(Exception $e)( die(json_encode(array("error" => $e->getMessage())));

Radi praktičnosti, koristi se operator prekidač za definiranje radnji kojima skripta rukuje. Implementira podsisteme za ćaskanje, funkcionalnost prijavljivanja/odjavljivanja i akcije za ispitivanje liste replika i korisnika na mreži.

Izlaz je u obliku JSON poruka (koje se mogu jednostavno obraditi sa koristeći jQuery), greške stvaraju izuzetke. Operater prekidač distribuira sve zahtjeve odgovarajućim statičkim metodama klase Chat, o čemu će biti reči kasnije u ovom odeljku.

DB.class.php

Klasa DB (privatna statička $instanca; privatna $MySQLi; privatna funkcija __construct(niz $dbOptions)( $this->MySQLi = @ new mysqli($dbOptions["db_host"], $dbOptions["db_user"], $dbOptions[ "db_pass"], $dbOptions["db_name"] if (mysqli_connect_errno()) ( throw new Exception("Greška baze podataka."); ) $this->MySQLi->set_charset("utf8" ) javna statička funkcija init); (niz $dbOptions)( if(self::$instance of self)( return false; ) self::$instance = new self($dbOptions); ) javna statička funkcija getMySQLiObject())( vrati self::$ instance- >MySQLi ) javna statička funkcija query($q)( return self::$instance->MySQLi->query($q); ) javna statička funkcija esc($str)( return self::$instance-> MySQLi-); >real_escape_string(htmlspecialchars($str) )

DB klasa je upravitelj baze podataka. Konstruktor je deklarisan kao privatni prema tome, objekat se ne može kreirati izvan klase, a inicijalizacija je moguća samo iz statičke init() metode. Uzima niz parametara MySQL veze i kreira instancu klase koja je sadržana u statičkoj varijabli self::$instance. Ovo osigurava da postoji samo jedna veza s bazom podataka u datom trenutku.

Ostatak klase implementira komunikaciju sa bazom podataka, koja je bazirana na statičkoj metodi query().

ChatBase.class.php

/* Osnovna klasa koju koriste klase ChatLine i ChatUser */ class ChatBase( // Ovaj konstruktor koriste sve klase chata: javna funkcija __construct(array $options)(foreach($options kao $k=>$v) ( if(isset ($this->$k))( $this->$k = $v; ) ) ) )

Ovo je jednostavna osnovna klasa. Njegova glavna svrha je definiranje konstruktora koji uzima niz parametara, ali pohranjuje samo one definirane u klasi.

ChatLine.class.php

/* Linija za ćaskanje */ klasa ChatLine proširuje ChatBase( zaštićen $text = "", $author = "", $gravatar = ""; javna funkcija save())( DB::query(" INSERT INTO webchat_lines (autor, gravatar , tekst) VRIJEDNOSTI ("".DB::esc($this->author)."", ".DB::esc($this->gravatar)."", "".DB::esc($$this->gravatar)." this ->text)."")"); // Vrati MySQLi objekt klase DB vrati DB::getMySQLiObject(); ) )

Klasa ChatLine je izvedena klasa iz ChatBase. Objekt ove klase može se lako kreirati prosljeđivanjem niza konstruktoru s tekstom, imenom autora i elementom gravatar. Svojstvo klase gravatar sadrži md5 hash adrese e-pošte. Potrebno je da dobijete korisnički avatar koji odgovara adresi e-pošte sa stranice gravatar.com.

Ova klasa također definira metodu spasiti, koji pohranjuje objekt u bazi podataka. Budući da metoda vraća MySQLi objekt sadržan u DB klasi, možete provjeriti da li je operacija uspješno završena pomoću svojstva affected_rows.

ChatUser.class.php

Klasa ChatUser proširuje ChatBase( zaštićeno $name = "", $gravatar = ""; javna funkcija save())( DB::query(" INSERT INTO webchat_users (ime, gravatar) VRIJEDNOSTI ("".DB::esc($) this ->name)."", "".DB::esc($this->gravatar)."")"); return DB::getMySQLiObject(); ) javna funkcija update())( DB::query). (" INSERT INTO webchat_users (ime, gravatar) VRIJEDNOSTI ("".DB::esc($this->name)."", ".DB::esc($this->gravatar)."") NA DUPLIKATU. AŽURIRANJE KLJUČA last_activity = SADA()"); ) )

Klasa ima svojstva ime I gravatar(obratite pažnju na modifikator pristupa zaštićeno- svojstva su dostupna u klasi ChatBase, a njihove vrijednosti možemo postaviti u konstruktoru).

Klasa definira metodu update() koja ažurira polje posljednja_aktivnost vrijednost trenutnog vremena. Ovo pokazuje da korisnik drži prozor za ćaskanje otvoren i da ga treba računati kao online autora.

Chat.class.php - Dio 1

/* Chat klasa sadrži javne statičke metode koje se koriste u ajax.php */ class Chat( javna statička funkcija login($name,$email)( if(!$name || !$email)( throw new Exception(" Popunite sva obavezna polja."); ) if(!filter_input(INPUT_POST,"email",FILTER_VALIDATE_EMAIL))( throw new Exception("Nevažeća adresa e-pošte."); ) // Priprema gravatar keša: $gravatar = md5(strtolower (trim ($email))) $user = new ChatUser("name" => $name, "gravatar" => $gravatar) // Metoda save vraća objekat MySQLi ($user->). save()- >affected_rows != 1)( throw new Exception("Dato ime je u upotrebi."); ) $_SESSION["user"] = array("name" => $name, "gravatar" => $gravatar => 1, "name" => $name, "gravatar" => Chat::gravatarFromHash($gravatar) ) javna statička funkcija checkLogged())( $response = array("logged" =); > false) ; if($_SESSION["user"]["name"])( $response["logged"] = true; $response["loggedAs"] = array("name" => $_SESSION["user"]; "][ "name"], "gravatar" => Chat::gravatarFromHash($_SESSION["user"]["gravatar"]));

) vrati $response; prekidač) javna statička funkcija logout())( DB::query("DELETE FROM webchat_users WHERE name = "".DB::esc($_SESSION["user"]["name"])."""); $_SESSION = array($_SESSION return array("status" =>);

Ovaj kod obavlja sav posao. U operateru gravatar u datoteci ajax.php izabrane su akcije koje odgovaraju metodama ove klase. Svaka od ovih metoda vraća niz, koji se zatim konvertuje u JSON objekat pomoću funkcije json_encode() (ovo se dešava na dnu ajax.php datoteke). Kada se korisnik prijavi, njegovo ime i pohranjeni kao elementi niza

$_SESSION

Javna statička funkcija submitChat($chatText)( if(!$_SESSION["user"])( throw new Exception("Napustili ste chat"); ) if(!$chatText)( throw new Exception("Niste unio poruku ."); ) $chat = new ChatLine(array("author" => $_SESSION["user"]["name"], "gravatar" => $_SESSION["user"]["gravatar") ], "text" => $chatText) // Metoda spremanja vraća MySQLi objekat $insertID = $chat->save()->insert_id return array("status" => 1, "insertID" =>; $insertID ) javna statička funkcija getUsers())( if($_SESSION["user"]["name"])( $user = new ChatUser("name" => $_SESSION["user"][); "naziv"])) ;< SUBTIME(NOW(),"0:5:0")"); DB::query("DELETE FROM webchat_users WHERE last_activity < SUBTIME(NOW(),"0:0:30")"); $result = DB::query("SELECT * FROM webchat_users ORDER BY name ASC LIMIT 18"); $users = array(); while($user = $result->fetch_object())( $user->gravatar = Chat::gravatarFromHash($user->gravatar,30); $users = $user; ) return array("users" => $users, "total" => DB: :query("SELECT COUNT(*) as cnt FROM webchat_users")->fetch_object()->cnt);

) javna statička funkcija getChats($lastID)( $lastID = (int)$lastID; $result = DB::query("SELECT * FROM webchat_lines WHERE id > ".$lastID." ORDER BY id ASC"); $chats = array($chat = $result->fetch_object())( // Vraća vrijeme kreiranja poruke u GMT (UTC) formatu: $chat->time = array("hours" => gmdate("H); " ,strtotime($chat->ts)), "minutes" => gmdate("i",strtotime($chat->ts))); $chat->gravatar = Chat::gravatarFromHash($chat->gravatar ) $chats = $chat ) return array("chats" => $chats) javna statička funkcija gravatarFromHash($hash, $size=23)( return "http://www.gravatar.com/avatar/); " .$hash."?size=".$size."&default=". urlencode("http://www.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?size=".$size) ) jQuery šalje zahtjeve getUsers() svakih 15 sekundi. Ovu činjenicu koristimo za uklanjanje replika koje su starije od 5 minuta i neaktivnih korisnika iz baze podataka. Potencijalno bi bilo moguće izbrisati podatke zapisa u getChats

, ali ovaj zahtjev dolazi svake sekunde i dodatno opterećenje može utjecati na performanse aplikacije. Metoda getChats() koristi funkciju gmdate za prikaz vremena u GMT formatu. Na strani klijenta koristimo sate i minute za postavljanje JavaScript objekat

, i kao rezultat, vrijeme se prikazuje prema vremenskoj zoni korisnika.

Živa komunikacija na sajtu posetioca neće ostaviti ravnodušnim, jer uvek možete da pišete na chat, a oni će vam odgovoriti nešto, nešto što se retko može videti na sajtovima ovu funkciju, programeri su počeli da zaboravljaju na to, pozivajući se više na forume i komentare. Ali ako je moguće instalirati chat na web mjestu, onda nema potrebe gubiti ovu priliku, korisnici će biti samo zahvalni. U ovoj lekciji ćemo pogledati kako napraviti vrlo zanimljiv chat za web stranicu, koristeći usluge avatara, koji će komunikaciji dati ugodniji oblik. Za kreiranje takvog AJAX chata koristićemo PHP, MySQL i jQuery. Prvo ćemo pogledati HTML oznake, koje su izgrađene prema HTML5, koje omogućavaju korištenje nove, kraće DOCTYPE sintakse i izostavljanje atributa tipa iz oznaka skripte.
index.html

Kako kreirati chat za web stranicu sa koristeći PHP| Demo za RUDEBOX web stranicu

Da bismo organizirali područje koje se može pomicati s linijama za ćaskanje, koristimo dodatak jScrollPane. Ovaj dodatak ima svoje stilove, koji su uključeni u sekcije za glavu.
Izgled chata se sastoji od četiri glavna diva - gornje trake, kontejnera za ćaskanje, kontejnera korisnika i donje trake. Zadnji div sadrži obrasce za registraciju korisnika i slanje poruka. Obrazac za slanje poruke je skriven po defaultu i prikazuje se samo ako se korisnik uspješno prijavio na chat sistem.
Napomena! Definicije tablica su dostupne u datoteci tables.sql u izvorima. Možete koristiti tekst upita za kreiranje tabela. Takođe, kada instalirate chat na svom hostu, potrebno je da promenite podešavanja u ajax.php vašim podacima za povezivanje sa MySQL bazom podataka.
Kada ste kreirali tabelu i uradili sve što je rečeno u napomeni, hajde da razgovaramo o PHP skripti koja kontroliše ćaskanje. Prva datoteka koju ćemo pogledati je ajax.php. Obrađuje AJAX zahtjeve sa strane klijenta iz jQueryja i izlazi podatke u JSON formatu.
ajax.php

/* Konfiguracija baze podataka. Dodajte svoje podatke */ $dbOptions = array("db_host" => "", "db_user" => "", "db_pass" => "", "db_name" => ""); /* Kraj sekcije konfiguracije baze podataka */ error_reporting(E_ALL ^ ​​E_NOTICE); zahtijevaju "classes/DB.class.php"; zahtijevaju "classes/Chat.class.php"; zahtijevaju "classes/ChatBase.class.php"; zahtijevaju "classes/ChatLine.class.php"; zahtijevaju "classes/ChatUser.class.php"; session_name("webchat"); session_start(); if(get_magic_quotes_gpc())( // Uklonite dodatne kose crte array_walk_recursive($_GET,create_function("&$v,$k","$v = stripslashes($v);")); array_walk_recursive($_POST,create_function(") &$v,$k","$v = stripslashes($v);")); ) try( // Povezivanje sa bazom podataka DB::init($dbOptions); $response = array(); // Obrada podržane akcije: switch($_GET["action"])( case "login": $response = Chat::login($_POST["name"],$_POST["email"]); prekid; slučaj "checkLogged" : $response = Chat::checkLogged(); $response = Chat::logout(); $response = Chat::submitChat; pauza "getUsers": $response = "getChats" ("pogrešna akcija"); ) echo json_encode($response) catch(Exception $e)( die(json_encode(array("error" => $e->getMessage())));

Radi praktičnosti, naredba switch se koristi za definiranje akcija koje skripta obrađuje. Implementira podsisteme za ćaskanje, funkcionalnost prijavljivanja/odjavljivanja i akcije za ispitivanje liste replika i korisnika na mreži.
Izlaz je u obliku JSON poruka (koje se lako mogu obraditi pomoću jQueryja), greške generiraju izuzetke. Naredba switch distribuira sve zahtjeve odgovarajućim statičkim metodama klase Chat, o čemu će biti riječi kasnije u ovom dijelu.
DB.class.php

DB (privatna statička $instanca; privatna $MySQLi; privatna funkcija __construct(niz $dbOptions)( $this->MySQLi = @ new mysqli($dbOptions["db_host"], $dbOptions["db_user"], $dbOptions[" db_pass"], $dbOptions["db_name"]); if (mysqli_connect_errno()) ( izbaci novi izuzetak("Greška baze podataka."); ) $this->MySQLi->set_charset("utf8"); ) javna statička funkcija init(niz $dbOptions)( if(self::$instance instanceof self)( return false; ) self::$instance = new self($dbOptions); ) javna statička funkcija getMySQLiObject())( vrati self::$instance ->MySQLi ) javna statička funkcija query($q)( return self::$instance->MySQLi->query($q); ) javna statička funkcija esc($str)( return self::$instance->MySQLi; ->real_escape_string(htmlspecialchars($str));

DB klasa je upravitelj baze podataka. Konstruktor je deklarisan privatnim, tako da se objekat ne može kreirati izvan klase, a inicijalizacija je moguća samo iz statičke init() metode. Uzima niz parametara MySQL veze i kreira instancu klase koja je sadržana u statičkoj varijabli self::$instance. Ovo osigurava da postoji samo jedna veza s bazom podataka u datom trenutku.
Ostatak klase implementira komunikaciju sa bazom podataka, koja je bazirana na statičkoj metodi query().
ChatBase.class.php

/* Osnovna klasa koju koriste klase ChatLine i ChatUser */ class ChatBase( // Ovaj konstruktor koriste sve klase chata: javna funkcija __construct(array $options)(foreach($options kao $k=>$v) ( if(isset ($this->$k))( $this->$k = $v; ) ) ) )

Ovo je jednostavna osnovna klasa. Njegova glavna svrha je definiranje konstruktora koji uzima niz parametara, ali pohranjuje samo one definirane u klasi.
ChatLine.class.php

/* Linija za ćaskanje */ klasa ChatLine proširuje ChatBase( zaštićen $text = "", $author = "", $gravatar = ""; javna funkcija save())( DB::query(" INSERT INTO webchat_lines (autor, gravatar , tekst) VRIJEDNOSTI ("".DB::esc($this->author)."", ".DB::esc($this->gravatar)."", "".DB::esc($$this->gravatar)." this ->text)."")"); // Vrati MySQLi objekt klase DB vrati DB::getMySQLiObject(); ) )

ChatLine klasa je izvedena klasa iz ChatBase-a. Objekt ove klase može se lako kreirati prosljeđivanjem niza teksta, imena autora i gravatar elementa konstruktoru. Svojstvo gravatar klase sadrži md5 hash adrese e-pošte. Potrebno je da dobijete korisnički avatar koji odgovara adresi e-pošte sa stranice gravatar.com.
Ova klasa također definira metodu spremanja koja sprema objekt u bazu podataka. Budući da metoda vraća MySQLi objekt sadržan u DB klasi, možete provjeriti da li je operacija uspješno završena pomoću svojstva affected_rows.
ChatUser.class.php

Klasa ChatUser proširuje ChatBase( zaštićeno $name = "", $gravatar = ""; javna funkcija save())( DB::query(" INSERT INTO webchat_users (ime, gravatar) VRIJEDNOSTI ("".DB::esc($) this ->name)."", "".DB::esc($this->gravatar)."")"); return DB::getMySQLiObject(); ) javna funkcija update())( DB::query). (" INSERT INTO webchat_users (ime, gravatar) VRIJEDNOSTI ("".DB::esc($this->name)."", ".DB::esc($this->gravatar)."") NA DUPLIKATU. AŽURIRANJE KLJUČA last_activity = SADA()"); ) )

Klasa ima ime svojstva i gravatar (obratite pažnju na modifikator zaštićenog pristupa - svojstva su dostupna u ChatBase klasi, a njihove vrijednosti možemo postaviti u konstruktoru).
Klasa definira metodu update() koja ažurira polje last_activity s trenutnom vrijednošću vremena. Ovo pokazuje da korisnik drži prozor za ćaskanje otvoren i da ga treba računati kao online autora.
Chat.class.php

/* Chat klasa sadrži javne statičke metode koje se koriste u ajax.php */ class Chat( javna statička funkcija login($name,$email)( if(!$name || !$email)( throw new Exception(" Popunite sva obavezna polja."); ) if(!filter_input(INPUT_POST,"email",FILTER_VALIDATE_EMAIL))( throw new Exception("Nevažeća adresa e-pošte."); ) // Priprema gravatar keša: $gravatar = md5(strtolower (trim ($email))) $user = new ChatUser("name" => $name, "gravatar" => $gravatar) // Metoda save vraća objekat MySQLi ($user->). save()- >affected_rows != 1)( throw new Exception("Dato ime je u upotrebi."); ) $_SESSION["user"] = array("name" => $name, "gravatar" => $gravatar => 1, "name" => $name, "gravatar" => Chat::gravatarFromHash($gravatar) ) javna statička funkcija checkLogged())( $response = array("logged" =); > false) ; if($_SESSION["user"]["name"])( $response["logged"] = true; $response["loggedAs"] = array("name" => $_SESSION["user"]; "][ "name"], "gravatar" => Chat::gravatarFromHash($_SESSION["user"]["gravatar"]));

Ovaj kod obavlja sav posao. Naredba switch u ajax.php datoteci je odabrala akcije koje su odgovarale metodama ove klase. Svaka od ovih metoda vraća niz, koji se zatim konvertuje u JSON objekat pomoću funkcije json_encode() (ovo se dešava na dnu ajax.php datoteke).
Kada se korisnik prijavi, njegovo ime i gravatar se pohranjuju kao elementi niza $_SESSION i dostupni su u narednim zahtjevima.
Chat.class.php

Javna statička funkcija submitChat($chatText)( if(!$_SESSION["user"])( throw new Exception("Napustili ste chat"); ) if(!$chatText)( throw new Exception("Niste unio poruku ."); ) $chat = new ChatLine(array("author" => $_SESSION["user"]["name"], "gravatar" => $_SESSION["user"]["gravatar") ], "text" => $chatText) // Metoda spremanja vraća MySQLi objekat $insertID = $chat->save()->insert_id return array("status" => 1, "insertID" =>; $insertID ) javna statička funkcija getUsers())( if($_SESSION["user"]["name"])( $user = new ChatUser("name" => $_SESSION["user"][); "naziv"])) ;< SUBTIME(NOW(),"0:5:0")"); DB::query("DELETE FROM webchat_users WHERE last_activity < SUBTIME(NOW(),"0:0:30")"); $result = DB::query("SELECT * FROM webchat_users ORDER BY name ASC LIMIT 18"); $users = array(); while($user = $result->fetch_object())( $user->gravatar = Chat::gravatarFromHash($user->gravatar,30); $users = $user; ) return array("users" => $users, "total" => DB: :query("SELECT COUNT(*) as cnt FROM webchat_users")->fetch_object()->cnt);

Metoda getChats() koristi funkciju gmdate za prikaz vremena u GMT formatu. Na strani klijenta koristimo vrijednosti sata i minuta za postavljanje u JavaScript objektu, a kao rezultat, vrijeme se prikazuje prema vremenskoj zoni korisnika.
Stilovi ćaskanja se nalaze u datoteci chat.css. Stilovi su nezavisni od ostatka stranice i mogu se lako integrirati u postojeću stranicu. Trebate samo uključiti HTML oznake, stilove i JavaScript datoteke.
chat.css

/* Glavni kontejner za razgovor */ #chatContainer( width:510px; margin:100px auto; position:relative; ) /* Gornja traka */ #chatTopBar(visina:40px; background:url("../img/solid_gray.jpg ") repeat-x #d0d0d0; border:1px solid #fff; margin-bottom:15px; position:relative; color:#777; text-shadow:1px 1px 0 #FFFFFF; ) #chatTopBar .name( position:absolute; top:10px; left:40px ) #chatTopBar img( left:9px; position:apsolute; top:8px; ) /* Chat*/ #chatLineHolder(visina:350px; margin-bottom:20px;) . chat( background:url("../img/chat_line_bg.jpg") repeat-x #d5d5d5; min-height:24px; padding:6px; border:1px solid #FFFFFF; padding:8px 6px 4px 37px; position:relative ; margin:0 10px 10px 0 ) .chat:last-child(margin-bottom:0;) .chat span(color:#777777; text-shadow:1px 1px 0 #FFFFFF; font-size:12px;) . chat .text( boja:#444444; display:inline-block; font-size:15px; overflow:hidden; vertical-align:top; width:190px; ) .chat .gravatar( background:url("http:// www.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?size=23") bez ponavljanja;

Sve počinje postavljanjem stilova za #chatContainer div. Centrirano je horizontalno koristeći svojstvo margin:100px; . Ovaj div je podijeljen na gornju traku, područje za ćaskanje, područje korisnika i donju traku.
Gornji panel prikazuje informacije o registrovanom korisniku. Dobiva relativno pozicioniranje tako da avatar, ime i dugme za odjavu budu pozicionirani u skladu s tim.
Nakon toga slijedi div koji sadrži sve linije razgovora - #chatLineHolder. Ovaj div ima fiksnu visinu i širinu, au jQuery dijelu ovog vodiča koristimo dodatak jScrollPane da ga pretvorimo u područje sadržaja koji se može pomicati sa bočnim klizačem.
chat.css

/* Korisnička oblast */ #chatUsers( background-color:#202020; border:1px solid #111111; height:360px; position:apsolute; right:0; top:56px; width:150px; ) #chatUsers .user( background :url("http://www.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?size=30") no-repeat 1px 1px #444444 border:1px solid #111111; :32px; ) #chatUsers .user img( border:1px solid #444444; display:block; visibility:hidden; ) /* Donja traka */ #chatBottomBar( background:url("../img/solid_gray .jpg") repeat-x #d0d0d0 position:relative:10px solid #fff ) #chatBottomBar .tip(position:absolute; width:0; border:10px solid transparent; border -bottom-color; :#eeeeee:-20px lijevo:20px ) #chatContainer input("background:url("../img/input_bg.jpg") repeat-x #dcdcdc; height:26px; font:13px /26px Calibri; Arial,sans-serif border:1px puna boja:#c1c1c1 #eee #eee #c1c1c1;

padding:0 5px;
margin-right:5px; širina:185px; outline:none; ) #submitForm( display:none; )
chat.css

/* Promijenite zadane stilove za jScrollPane */ .jspVerticalBar( background:none; width:20px; ) .jspTrack( background-color:#202020; border:1px solid #111111; width:3px; right:-10px; ) jspDrag ( background:url("../img/slider.png") bez ponavljanja; širina:20px; lijevo:-9px; visina:20px !važno; margin-top:-5px; ) .jspDrag:hover( background - position:left bottom ) /* Dodatni stilovi */ a.logoutButton( background-color:#bbb; border:1px solid #eee !important; color:#FFFFFF !important; font-size:12px; padding:5px 9px ; position:apsolute:1px 1px 0 #888 7px #888 inset; :1px 1px 0 #888 -moz-box-shadow:0 7px #666 inset: 0 7px #666 inset; blueButton( background:url("../img/button_blue.png") bez ponavljanja; border:none !important; color :#516D7F !important;

display:inline-block;
font-size:13px;

• visina:29px;
• text-align:center;
• text-shadow:1px 1px 0 rgba(255, 255, 255, 0.4);
• Provjera novih unosa: GET zahtjev se generira svake sekunde. Ova operacija može dovesti do vrlo velikog opterećenja web servera, pa je skripta optimizirana, a ovisno o aktivnostima ćaskanja, period generiranja zahtjeva može se povećati na 15 sekundi.

Definirali smo prilagođene funkcije omotača za jQuery AJAX funkcije $.get i $.post koje pomažu u popunjavanju dugih parametara za generiranje zahtjeva.
Takođe, sav kod za ćaskanje je organizovan u jedan objekat za ćaskanje. Sadrži nekoliko pogodnih metoda.
script.js

$(document).ready(function())( // Pokreni init metodu kada je dokument spreman: chat.init(); )); var chat = ( // podaci sadrže varijable za upotrebu u klasama: data: ( lastID: 0, noActivity: 0 ), // Init povezuje rukovaoce događajima i postavlja tajmere: init: function())( // Koristi jQuery defaultText dodatak omogućeno ispod: $("#name").defaultText("Nadimak").defaultText("Email (koristi Gravatar)" // Pretvori #chatLineHolder u jScrollPane, //); spremite API dodatak u chat.data: chat.data.jspAPI = $("#chatLineHolder").jScrollPane(( verticalDragMinHeight: 12, verticalDragMaxHeight: 12 )).data("jsp"); spriječiti // višestruko slanje obrazaca: var working = false // Registrirajte osobu u chatu: $("#loginForm").submit(function())( if(working) return false; working = true; // Use; naša tzPOST funkcija // (definirana ispod): $.tzPOST("login",$(this).serialize(),function(r)(work = false; if(r.error)(chat.displayError(r.error ) else chat.login(r.name,r.gravatar);

));
return false;

// Pošaljite nove podatke linije za razgovor: $("#submitForm").submit(function())( var text = $("#chatText").val(); if(text.length == 0)( return false ) if(working) return false = true // Generiraj privremeni ID za chat: var tempID = "t"+Math.round(Math.random()*1000000), params = ( id: tempID; , autor: chat .data.name, gravatar: chat.data.gravatar, text: text.replace(//g,">") // Koristite metodu addChatLine da dodate chat na ekran // odmah, bez čeka se završetak AJAX zahtjeva: chat.addChatLine($.extend((),params) // Koristite metodu tzPOST za slanje razgovora // putem AJAX POST zahtjeva: $.tzPOST("submitChat",$); (this).serialize(),function(r)(work = false; $("#chatText").val(""); $("div.chat-"+tempID).remove(); params[" id"] = r.insertID; chat. addChatLine($.extend((),params)); return false;

// Onemogućite korisnika: $("a.logoutButton").live("click",function())( $("#chatTopBar > span").fadeOut(function())( $(this).remove( ) ) ) ) ; // Provjerite status konekcije korisnika (ažuriranje preglednika) $.tzGET("checkLogged",function(r)( if(r.logged)( chat.login(r.loggedAs.name,r.loggedAs.gravatar); ) ) ) ;// Funkcije vremenskog ograničenja koje se samostalno izvršavaju (funkcija getChatsTimeoutFunction())( chat.getChats(getChatsTimeoutFunction); ))();
(funkcija getUsersTimeoutFunction())( chat.getUsers(getUsersTimeoutFunction); ))(); ),
return false;

// Metoda za prijavu skriva korisničke podatke za prijavu // i prikazuje prijavu na formu za unos poruke: function(name,gravatar)( chat.data.name = name; chat.data.gravatar = gravatar; $("#chatTopBar") .html( chat.render("loginTopBar",chat.data) $("#loginForm").fadeOut(function())( $("#submitForm").fadeIn(); $("#chatText"); ).focus( )), // Metoda renderiranja generiše HTML oznaku // koja je potrebna za druge metode: render: function(template,params)(var arr = ; switch(template)( case "loginTopBar"); : arr = [ " ", "",params.name, "Exit"]; prekid; case "chatLine": arr = [ " ","",params.author, ":",params.text,"",params.time,""]; prekid; case "user": arr = [ " " ]; break; ) // Metoda jednog spajanja za niz je // brža od spajanja više nizova return arr.join(""); ),

U ovom dijelu koda, metoda render() zahtijeva pažnju. Izrađuje šablon u zavisnosti od parametra šablona. Metoda zatim kreira i vraća traženi HTML, ugrađujući vrijednosti drugog parametra objekta params.
return false;

// Metoda addChatLine dodaje liniju za razgovor na stranicu addChatLine: function(params)( // Sva očitavanja vremena su prikazana u formatu vremenske zone korisnika var d = new Date(); if(params.time) ( // PHP vraća vrijeme u UTC formatu (GMT) Ovo koristimo za generiranje objekta datuma // a zatim ga ispisujemo u formatu vremenske zone korisnika // JavaScript ga pretvara umjesto nas time = (d.getHours()< 10 ? "0" : "") + d.getHours()+":"+ (d.getMinutes() < 10 ? "0":"") + d.getMinutes(); var markup = chat.render("chatLine",params), exists = $("#chatLineHolder .chat-"+params.id); if(exists.length){ exists.remove(); } if(!chat.data.lastID){ // Если это первая запись в чате, удаляем // параграф с сообщением о том, что еще ничего не написано: $("#chatLineHolder p").remove(); } // Если это не временная строка чата: if(params.id.toString().charAt(0) != "t"){ var previous = $("#chatLineHolder .chat-"+(+params.id - 1)); if(previous.length){ previous.after(markup); } else chat.data.jspAPI.getContentPane().append(markup); } else chat.data.jspAPI.getContentPane().append(markup); // Так как мы добавили новый контент, нужно // снова инициализировать плагин jScrollPane: chat.data.jspAPI.reinitialise(); chat.data.jspAPI.scrollToBottom(true); },

Metoda addChat() uzima kao parametar objekat koji sadrži string za ćaskanje, ime autora i gravatar i umeće string za ćaskanje na odgovarajuću lokaciju u div#chatContainer. Svaka linija za ćaskanje (osim ako nije privremena) ima jedinstveni ID koji dodeljuje MySQL. Ovaj id je naziv klase za liniju za ćaskanje u chat-123 formatu.
Kada se izvrši addChat() metoda, ona provjerava postojanje prethodne linije (za chat-123 provjerava prisustvo chat-122). Ako postoji, metoda se umeće nova linija posle nje. Ako ne, jednostavno dodaje novi red u div. Ova jednostavna tehnika kontroliše umetanje linija u ispravnom redosledu i održava ga tokom razgovora.
script.js

// Ova metoda zahtjevi zadnji unos u chat // (počevši od lastID) i dodaje ga na stranicu. getChats: function(callback)( $.tzGET("getChats",(lastID: chat.data.lastID),function(r)( for(var i=0;i 3)( nextRequest = 2000; ) if(chat. data.noActivity > 10)( nextRequest = 5000; ) // 15 sekundi if(chat.data.noActivity > 20)( nextRequest = 15000; ) setTimeout(callback,nextRequest) // Zatraži listu svih korisnika. getUsers: function(callback)( $.tzGET("getUsers",function(r)(var users = ; for(var i=0; i< r.users.length;i++){ if(r.users[i]){ users.push(chat.render("user",r.users[i])); } } var message = ""; if(r.total