Ultimo aggiornamento: 31.10.2015
L'ultima volta che abbiamo definito il controller e il modello, ora creiamo il resto della chat. Definiamo prima le viste.
Codice vista principale Indice.cshtml sarà simile a questo:
@model AjaxChat.Models.ChatModel @( Layout = null; )
Questa è una vista senza una pagina master. L'elemento div con id="Username" mostrerà il nickname dell'utente. Il blocco con id="LastRefresh" serve per visualizzare l'ora dell'ultimo aggiornamento della chat e il div con id="Error" per visualizzare gli errori che possono verificarsi.
E per il login effettivo, abbiamo un campo di testo e un pulsante. Tuttavia, quando inserisci un nickname e fai clic sul pulsante, i dati non verranno immediatamente trasferiti al server, poiché non si tratta di un modulo. L'invio effettivo dei dati al server avverrà tramite un collegamento ajax, che avrà id = "LoginButton":
@Ajax.ActionLink("Login", "Index", new ( user = "" ), new AjaxOptions ( UpdateTargetId = "container", OnFailure = "LoginOnFailure", OnSuccess = "LoginOnSuccess" ), new ( @id = "LoginButton ", @style="visibility:hidden;" ))
Facendo clic sul collegamento si aggiornerà il blocco con id="container" . Per questo motivo, ci sarà un aggiornamento parziale della pagina corrente utilizzando ajax e non un normale ricaricamento della pagina. Ma non faremo clic sul collegamento noi stessi. Non lo vedremo nemmeno, dal momento che ha il set di stile "visibility:hidden;".
Il clic avverrà automaticamente nel file incluso nella vista chat.js:
$(documento).ready(function() ( // login $("#btnLogin").click(function() ( var nickName = $("#txtUserName").val(); if (nickName) ( // formiamo un collegamento con i parametri, a cui si accede var href = "/Home?user=" + encodeURIComponent(nickName); href = href + "&logOn=true"; $("#LoginButton").attr("href", href .click(); //impostando il campo con il nickname dell'utente $("#Username").text(nickName); ) )); )); // una volta effettuato l'accesso, carica la funzione dei messaggi LoginOnSuccess(result) ( Scroll(); ShowLastRefresh(); // aggiorna la chat ogni cinque secondi setTimeout("Refresh();", 5000); // invia messaggi premendo Invio $ (" #txtMessage").keydown(function (e) ( if (e.keyCode == 13) ( e.preventDefault(); $("#btnMessage").click(); ) )); //pulsante set fai clic sul gestore per inviare i messaggi $("#btnMessage").click(function() ( var text = $("#txtMessage").val(); if (text) ( //accedi al metodo Index e passa "chatMessage " parametro var href = "/Home?user=" + encodeURIComponent($("#Username").text()); href = href + "&chatMessage=" + encodeURIComponent(text); $("#ActionLink"). attr(" href", href).click(); ) )); //gestore del pulsante di uscita della chat $("#btnLogOff").click(function() ( //accedi al metodo Index e passa il parametro "logOff" var href = "/Home?user=" + encodeURIComponent($("#Username").text()); href = href + "&logOff=true"; $("#ActionLink").attr("href", href ).clic(); document.location.href = "Casa"; )); ) //se si verifica un errore, visualizza un messaggio di errore durante l'accesso alla funzione LoginOnFailure(result) ( $("#Username").val(""); $("#Error").text(result.responseText); setTimeout("$ ("#Error").empty();", 2000); ) // aggiorna il campo della chat ogni cinque secondi function Refresh() ( var href = "/Home?user=" + encodeURIComponent($( "#Username") .text()); $("#ActionLink").attr("href", href).click(); setTimeout("Refresh();", 5000); ) //Visualizza messaggio di errore function ChatOnFailure(result ) ( $("#Error").text(result.responseText); setTimeout("$("#Error").empty();", 2000); ) // dopo aver ricevuto correttamente una risposta dalla funzione del server ChatOnSuccess(result ) ( Scroll(); ShowLastRefresh(); ) //scorri fino alla fine della funzione della finestra Scroll() ( var win = $("#Messages"); var height = win.scrollHeight; win.scrollTop(height); ) // mostra la funzione dell'ora dell'ultimo aggiornamento della chat ShowLastRefresh() ( var dt = new Date(); var time = dt.getHours() + ":" + dt.getMinutes() + ":" + dt.getSeconds(); $(" #LastRefresh").testo ("L'ultimo aggiornamento era a " + ora); )
Per inviare i dati tramite login e click sul link, scriviamo le seguenti righe nel click handler:
// forma un collegamento con i parametri che verranno utilizzati per la chiamata var href = "/Home?user=" + encodeURIComponent(nickName); href = href + "&logOn=true"; // fare clic automaticamente sul collegamento ajax $("#LoginButton").attr("href", href).click();
Poiché il parametro logOn=true viene passato nella richiesta al server, il metodo Index, durante l'elaborazione di questa richiesta, invierà una vista parziale al client Chatroom: return PartialView("ChatRoom", chatModel); . Creiamo questa vista:
Questa è una vista parziale digitata con il ChatModel passato dal metodo Index. Contiene campi per l'immissione e l'invio di messaggi, nonché un pulsante per uscire dalla chat.
Inoltre è presente un blocco div id="RefreshArea", destinato direttamente alla visualizzazione di messaggi e utenti. Per rendere queste informazioni, chiama la vista parziale Storia che ora creeremo. E c'è anche un collegamento ajax invisibile che aggiorna il blocco div id="RefreshArea":
@Ajax.ActionLink("ActionLink", "Index", new ( user = "", logOn = "", logOff = "", chatMessage = "" ), new AjaxOptions ( UpdateTargetId = "RefreshArea", OnSuccess = "ChatOnSuccess" , OnFailure = "ChatOnFailure" ), new ( @id = "ActionLink", @style = "visibility:hidden;" ))
Nel file javascript sopra, dopo il login riuscito, viene chiamata la funzione LoginOnSuccess, che a sua volta chiama la funzione Refresh():
Function Refresh() ( var href = "/Home?user=" + encodeURIComponent($("#Username").text()); $("#ActionLink").attr("href", href).click( ); setTimeout("Aggiorna();", 5000); )
Questa funzione genera nuovamente una stringa di query con parametri per il collegamento ajax e fa clic su di essa automaticamente. Di conseguenza, il blocco div id="RefreshArea" verrà aggiornato con nuovi dati ogni cinque secondi.
Un'azione simile si verificherà anche quando si fa clic sul pulsante per inviare un messaggio alla chat:
Var href = "/Home?user=" + encodeURIComponent($("#Username").text()); href = href + "&chatMessage=" + codificaURIComponent(testo); $("#ActionLink").attr("href", href).click();
E poiché in entrambi i casi, quando si passano parametri al metodo Index del controller, i parametri logOn e logOff non verranno impostati, il metodo Index restituirà una vista parziale in risposta Cronologia.cshtml: return PartialView("Cronologia", chatModel);
Ora creiamo la vista parziale stessa Cronologia.cshtml:
@utilizzando AjaxChat.Models @model ChatModel
Chat online: @Model.Users.Count
@foreach(Utente ChatUser in Model.Users) ( )@msg.Data
@if (msg.User != null) ( @(msg.User.Name + ":")@msg.Text ) altrimenti ( @msg.Text
}
In conclusione, puoi ancora in qualche modo modellare l'applicazione. Alla fine, dovrebbe assomigliare a questo. All'avvio, vedremo il campo di accesso:
Ho iniziato a notare su molti siti la presenza di una finestra di chat o di una finestra di consulenza online. Non è un segreto che Yandex consideri la presenza di una chat o di un consulente sul sito un fattore commerciale positivo. In connessione con questo, ho provato a creare una chat ajax per il sito.
E così siamo andati a scrivere una chat su ajax php. Creiamo il file chat.js e creeremo immediatamente anche i file add.php e get_json.php, ma su di essi in seguito. Crea file chat.php . Colleghiamo jquery e chat.js ad esso. Creiamo nel file chat.php un campo con il nome del partecipante alla chat e un campo con un messaggio nella chat, oltre a un pulsante con id btnSend per inviare un messaggio. Un gestore di eventi clic è allegato al pulsante con id btnSend nel file chat.js. La chat div con id visualizzerà i nostri messaggi di chat. Di seguito è riportato un elenco di un pezzo di codice dal file chat.php. Non prestare attenzione alle oscure classi CSS, queste sono classi di bootstrap.
In chat.js, elaboriamo i dati dai campi di input e inviamo i dati a add.php utilizzando il metodo post in formato json. Di seguito è riportato un pezzo di codice da chat.js.
$("#btnSend").click(function(elem)( //al clic otteniamo messaggi dai campi con id name e testo var name = $("#name").val(); var text = $(" # text").val(); //e usando il metodo POST in formato json li inviamo a add.php $.post("add.php", (name: name, text: text), function()( //cancella il campo di testo (ad es. rendi vuoto "") $("#testo").attr("valore", ""); )); ));
Nel file add.php otteniamo i dati. Ovviamente, dovrebbero essere controllati dopo la ricezione, ma per ora lo ometteremo. Aggiungiamo una data ai dati e li scriviamo nel file messages.txt in una riga con un separatore "_" univoco. Inoltre, affinché il file non cresca a grandi dimensioni, viene creata la protezione dall'overflow. Quando vengono raggiunte più di 100 righe di messaggio nel file messages.txt, tutte le righe vengono eliminate tranne le ultime cinque. Sono riscritti. Di seguito è riportato l'elenco di add.php .
100 if(count($strings)>100)( //ottiene tutte le righe dal file come array numerato $textarr=file("messages.txt"); $arr=array_slice($textarr, -5); // riscrivi scrivi i dati solo nel file //le ultime 5 righe dell'array $f = fopen("messages.txt", "w+"); //nel ciclo scrivi i dati nel file, //ogni valore dell'array su una nuova riga nel file foreach($arr as $ar)( $f = fopen("messages.txt", "a+");//open file fwrite($f, $ar);//write fclose( $f);//close file ) ) $ f = fopen("messages.txt", "a+");//open file fwrite($f, date("Ymd H:i:s") . "___" );//scrivi fwrite($f, $ name . "___");//scrivi nel file fwrite($f, $text . "\n");//scrivi e aggiungi fine riga fclose($f) ;//chiudi file ) ?>
Ecco fatto, tutti i nostri messaggi vengono scritti in un file. Ora dobbiamo assicurarci che questi messaggi vengano visualizzati sullo schermo. Per fare ciò, scriveremo la funzione chatRequest() nel file chat.js. Questa funzione accede al file get_json.php e gli passa il parametro __maxId. Il parametro _maxId specifica quanti messaggi abbiamo al momento. Il valore predefinito all'inizio è 0. Di conseguenza, per cominciare, definiamo __maxId come variabile globale.
Funzione chatRequest()( // Invio di una richiesta utilizzando il metodo POST. $.post("get_json.php", (maxId: _maxId), chatResult, "json"); )
È inoltre definito nella funzione chatRequest() che se la richiesta viene completata con successo, i dati di risposta vengono restituiti in formato json e viene chiamata la funzione chatResult dal file chat.js. Ma diamo prima un'occhiata al file get_json.php.
Il file get_json.php prende i dati, calcola la stringa che non è stata visualizzata sullo schermo, ne crea un array, lo impacchetta in formato json e lo invia alla funzione chatResult(msgs).
ChatResult aggiunge i dati della stringa ricevuta all'array _messages. Lo abbiamo dichiarato all'inizio del file e ne abbiamo fatto un array. E quindi la funzione restituisce tutti i messaggi scritti in un ciclo dall'array _messages in un div con l'id #chat . Fatto in modo che venissero visualizzati solo gli ultimi cinque messaggi. Per i messaggi pari e dispari, viene visualizzata la loro disposizione. Per il layout, utilizzo di nuovo bootstrap. Elenco della funzione ChatResult.
Funzione chatResult(msgs)( // Aggiunge nuovi messaggi all'array. for(var i = 0; i =0; i--) ( var m = _messages[i]; // controlla se il messaggio è pari se (i %2= =1)( // layout html +="
"+m.testo+" "+m.dt+"
"+m.testo+" "+m.dt+"
"+m.testo+" "+m.dt+"
"+m.testo+" "+m.dt+"
Affinché la nostra chat sia costantemente aggiornata, facciamo continue richieste alla funzione chatRequest() con una frequenza di 2 secondi.
// Richiedi messaggi ogni 2 secondi setInterval(chatRequest, 2000);
Bene, abbiamo scritto una semplice chat php ajax per il sito. Per completare l'immagine, mostreremo l'elenco completo del file chat.js
Var_maxId; var_messaggi; $(document).ready(function()( // Inizializzazione. _maxId = 0; _messages = ; chatRequest(); // Richiede messaggi ogni 2 secondi setInterval(chatRequest, 2000); $("#btnSend").click( function(elem)( //quando viene cliccato, riceviamo messaggi dai campi con id name e testo var name = $("#name").val(); var text = $("#text").val(); // e usando il metodo POST in formato json li inviamo a add.php $.post("add.php", (name: name, text: text), function()( //cancelliamo il campo di testo (che cioè, lo rendiamo vuoto "") $( "#text").attr("value", ""); )); )); )); function chatRequest() ( // Invio di una richiesta utilizzando il metodo POST. $.post("get_json.php", (maxId: _maxId), chatResult, "json"); ) function chatResult(msgs)( // Aggiunta di nuovi messaggi all'array. for(var i = 0; i =0; i--) ( var m = _messages[i]; //verifica se il messaggio è pari se (i%2==1)( //layout html +="
"+m.testo+" "+m.dt+"
"+m.testo+" "+m.dt+"
"+m.testo+" "+m.dt+"
"+m.testo+" "+m.dt+"
aggiornamento 5.10.16
Ha tappato il buco più semplice dal più semplice attacco XSS. Tutti si sono stufati di rompere la chat)). Ero troppo pigro per filtrare i dati in arrivo, ma ho dovuto rifarlo. Funzione di filtraggio.
/* funzione di filtraggio*/ funzione myclear($dt)( $dt=stripslashes($dt); $dt=strip_tags($dt); $dt=trim($dt); return $dt; )
ora il file add.php ha questo aspetto
/*funzione di filtraggio*/ funzione myclear($dt)( $dt=stripslashes($dt); $dt=strip_tags($dt); $dt=trim($dt); return $dt; ) $name = myclear( $_POST["nome"]);//filtro $testo = myclear($_POST["testo"]); //era prima di //$nome = $_POST["nome"]; //$testo = $_POST["testo"]; if(($name != "") && ($testo != ""))( $strings = file("messages.txt"); if(count($strings)>100)( //ottieni tutte le stringhe da file come array numerato $textarr=file("messages.txt"); $arr=array_slice($textarr, -5); //riscrivi i dati nel file scrivi solo le ultime 3 righe dell'array $f = fopen ("messages.txt ", "w+"); //in un ciclo, scrivi i dati nel file, ogni valore dell'array su una nuova riga nel file foreach($arr as $ar)( $f = fopen(" messaggi.txt", "a+");/ /apri file fwrite($f, $ar);//scrivi fclose($f);//chiudi file ) ) $f = fopen("messages.txt", " a+");//apri file fwrite($ f, date("Ymd H:i:s") . "___");//scrivi fwrite($f, $name . "___");//scrivi su file fwrite($f, $text . "\ n");//registra e aggiungi fine riga fclose($f);//close file )
HTML
Come al solito, il primo passo riguarda il markup HTML. Il nostro documento è costruito secondo HTML5, che consente una nuova sintassi più breve. DOCTYPE e omettere l'attributo genere nei tag sceneggiatura.
indice.html
Per ottimizzare il caricamento, gli stili sono inclusi nelle sezioni testa e i file JavaScript sono inclusi nella parte inferiore del documento, prima del tag di chiusura corpo.
Per organizzare un'area scorrevole con le chat line, utilizziamo il plugin jScrollPane. Questo plugin ha i suoi stili, che sono inclusi nelle sezioni testa.
Il markup della chat è costituito da quattro elementi principali div- pannello superiore, contenitore chat, contenitore utente e pannello inferiore. Scorso div contiene moduli per la registrazione di un utente e l'invio di un messaggio. Il modulo di invio del messaggio è nascosto per impostazione predefinita e viene visualizzato solo se l'utente ha eseguito correttamente l'accesso al sistema di chat.
Includiamo quindi i file JavaScript: la libreria jQuery, il plug-in della rotellina del mouse (usato in jScrollPane), il plug-in jScrollPane e il nostro file script.js.
Schema del database
Prima di passare alla parte PHP, dobbiamo prima dare un'occhiata all'organizzazione dei dati della chat nel database MySQL.
Per il nostro script, utilizziamo due tabelle. Tavolo utenti_webchat vengono memorizzate le informazioni sui partecipanti alla chat. La tabella ha campi ID , nome , gravatare e L'ultima attività . Campo nome definito come unico, impedendo così l'uso di nomi duplicati nella chat.
Un'altra proprietà utile di un campo con un indice univoco è che una richiesta di inserimento dati avrà esito negativo e la proprietà righe_inserite l'oggetto MySQLi verrà impostato su 0 se si tenta di inserire righe duplicate. In classe PHP Chiacchierata questa proprietà sarà utilizzata attivamente.
Campo L'ultima attività contiene un valore temporale. Il valore viene aggiornato ogni 15 secondi per ciascun utente. Il campo è anche definito come indice, che consente di rimuovere rapidamente gli utenti inattivi (il valore nel campo L'ultima attività più di 15 significa che l'utente non sta più visualizzando la finestra della chat).
tavolo webchat_lines contiene voci di chat. Nota che memorizziamo anche il nome dell'autore e il gravatar qui. Questa duplicazione ci consente di smettere di utilizzare la direttiva sui costi. giuntura quando si richiedono gli ultimi record, i più utilizzati nella nostra applicazione.
Le definizioni delle tabelle sono nel file tabelle.ql nelle fonti. È possibile utilizzare il testo della query per creare tabelle. Inoltre, quando installi una chat sul tuo host, devi modificare le impostazioni in ajax.php ai tuoi dati per connetterti al database MySQL.
PHP
Ora che abbiamo un database, discutiamo dello script PHP che controlla la chat.
Il primo file che esamineremo è ajax.php. Gestisce le richieste AJAX lato client da jQuery e restituisce i dati in formato JSON.
ajax.php
/* Configurazione del database. Aggiungi i tuoi dettagli */ $dbOptions = array("db_host" => "", "db_user" => "", "db_pass" => "", "db_name" => ""); /* Fine della sezione di configurazione del database */ error_reporting(E_ALL ^ E_NOTICE); richiedono "classi/DB.class.php"; richiedono "classi/Chat.class.php"; richiedono "classi/ChatBase.class.php"; richiedono "classi/ChatLine.class.php"; richiedono "classi/ChatUser.class.php"; nome_sessione ("webchat"); inizio_sessione(); if(get_magic_quotes_gpc())( // Rimuovi barre aggiuntive array_walk_recursive($_GET,create_function("&$v,$k","$v = stripslashes($v);")); array_walk_recursive($_POST,create_function(" &$v,$k","$v = stripslashes($v);")); ) try( // Connetti al database DB::init($dbOptions); $response = array(); // Processo supportato azioni: switch($_GET["action"])( case "login": $response = Chat::login($_POST["name"],$_POST["email"]); break; case "checkLogged" : $response = Chat::checkLogged(); break; case "logout": $response = Chat::logout(); break; case "submitChat": $response = Chat::submitChat($_POST["chatText"] ) ; break; case "getUsers": $response = Chat::getUsers(); break; case "getChats": $response = Chat::getChats($_GET["lastID"]); break; default: lancia nuova eccezione ( "Azione errata"); ) echo json_encode($response); ) catch(Exception $e)( die(json_encode(array("error" => $e->getMessage()))); )
Per comodità, l'operatore interruttore per definire le azioni gestite dallo script. Implementa sottosistemi di chat, funzionalità di accesso/disconnessione e azioni per richiedere un elenco di repliche e utenti online.
L'output è sotto forma di messaggi JSON (che sono convenienti da elaborare con jQuery), gli errori generano eccezioni. Operatore interruttore distribuisce tutte le richieste ai metodi statici appropriati della classe Chiacchierata, di cui si parlerà più avanti in questa sezione.
db.class.php
Class DB ( $istanza statica privata; $MySQLi privato; funzione privata __construct(array $dbOptions)( $this->MySQLi = @ new mysqli($dbOptions["db_host"], $dbOptions["db_user"], $dbOptions[ "db_pass"], $dbOptions["db_name"]); if (mysqli_connect_errno()) ( throw new Exception("Errore database."); ) $this->MySQLi->set_charset("utf8"); ) public static function init(array $dbOptions)( if(self::$instance instanceof self)( return false; ) self::$instance = new self($dbOptions); ) public static function getMySQLiObject()( return self::$ instance ->MySQLi; ) public static function query($q)( return self::$instance->MySQLi->query($q); ) public static function esc($str)( return self::$instance-> MySQLi ->real_escape_string(htmlcaratteri speciali($str)); ) )
Classe DB - gestore database. Il costruttore è dichiarato come privato, quindi un oggetto non può essere creato al di fuori della classe e l'inizializzazione è possibile solo da un metodo statico dentro(). Prende un array con parametri di connessione MySQL e crea un'istanza della classe, che è contenuta in una variabile statica self::$istanza. Ciò garantisce che vi sia una sola connessione al database alla volta.
Il resto della classe implementa la comunicazione con il database, che si basa su un metodo statico interrogare().
ChatBase.class.php
/* Classe base usata dalle classi ChatLine e ChatUser */ class ChatBase( // Questo costruttore è usato da tutte le classi chat: public function __construct(array $options)( foreach($options as $k=>$v)( if( isset ($questo->$k))( $questo->$k = $v; ) ) ))
Questa è una semplice classe base. Il suo scopo principale è definire un costruttore che accetta un array di parametri ma conserva solo quelli definiti nella classe.
ChatLine.class.php
/* Chat Line */ la classe ChatLine estende ChatBase( protected $text = "", $author = "", $gravatar = ""; public function save()( DB::query(" INSERT INTO webchat_lines (author, gravatar, text) VALUES ("".DB::esc($this->author)."", "".DB::esc($this->gravatar)."", "".DB::esc($this) ->testo)."")"); // Restituisce l'oggetto MySQLi della classe DB return DB::getMySQLiObject(); ) )
Classe linea di chatè una classe derivata da ChatBase. Un oggetto di questa classe può essere facilmente creato passando un array al costruttore con il testo, il nome dell'autore e l'elemento gravatare. proprietà di classe gravatare contiene l'hash md5 dell'indirizzo email. È necessario per ottenere un avatar utente corrispondente a un indirizzo e-mail da gravatar.com.
Questa classe definisce anche un metodo Salva An che memorizza l'oggetto nel database. Poiché il metodo restituisce un oggetto MySQLi contenuto nella classe DB, è possibile verificare se l'operazione è stata completata correttamente utilizzando la proprietà righe_interessate.
ChatUser.class.php
Class ChatUser estende ChatBase( protected $name = "", $gravatar = ""; public function save()( DB::query(" INSERT INTO webchat_users (name, gravatar) VALUES ("".DB::esc($this ->nome)."", "".DB::esc($this->gravatar)."")"); return DB::getMySQLiObject(); ) public function update()( DB::query(" INSERT INTO webchat_users (name, gravatar) VALUES ("".DB::esc($this->name)."", "".DB::esc($this->gravatar)."") SU AGGIORNAMENTO CHIAVE DUPLICATA ultima_attività = ORA()"); ) )
La classe ha proprietà nome e gravatare(notare il modificatore di accesso protetto- le proprietà sono disponibili nella classe ChatBase e possiamo impostarne i valori nel costruttore).
La classe definisce un metodo aggiornare() che aggiorna il campo L'ultima attività il valore dell'ora corrente. Ciò mostra che l'utente tiene aperta la finestra della chat e dovrebbe essere considerato l'autore online.
Chat.class.php - Parte 1
/* La classe Chat contiene metodi statici pubblici utilizzati in ajax.php */ class Chat( public static function login($name,$email)( if(!$name || !$email)( throw new Exception(" Compila tutti i campi richiesti."); ) if(!filter_input(INPUT_POST,"email",FILTER_VALIDATE_EMAIL))( throw new Exception("Indirizzo email non valido."); ) // Preparazione della cache gravatar: $gravatar = md5(strtolower (trim ($email))); $user = new ChatUser(array("name" => $name, "gravatar" => $gravatar)); // Il metodo save restituisce un oggetto MySQLi if($user-> save()- >affected_rows != 1)( throw new Exception("Il nome dato è in uso."); ) $_SESSION["user"] = array("name" => $name, "gravatar" => $gravatar); return array("status" => 1, "name" => $name, "gravatar" => Chat::gravatarFromHash($gravatar)); ) public static function checkLogged()( $response = array( "logged" => false) ; if($_SESSION["user"]["name"])( $response["logged"] = true; $response["loggedAs"] = array("name" => $ _SESSION["utente"][ "nome "], "gravatar" => Chat::gravatarFromHash($_SESSION["user"]["gravatar"])); ) restituire $risposta; ) funzione statica pubblica logout()( DB::query("DELETE FROM webchat_users WHERE name = "".DB::esc($_SESSION["user"]["name"])."""); $_SESSION = array(); unset($_SESSION); return array("status" => 1); )
Questo codice fa tutto il lavoro. In operatore interruttore in archivio ajax.php sono state selezionate le azioni che corrispondevano ai metodi di questa classe. Ciascuno di questi metodi restituisce un array, che viene quindi convertito in un oggetto JSON utilizzando la funzione json_encode()(questo accade in fondo al file ajax.php).
Quando un utente effettua il login, il suo nome e gravatare memorizzati come elementi dell'array $_SESSIONE e rendersi disponibili nelle richieste successive.
Chat.class.php - Parte 2
Funzione statica pubblica submitChat($chatText)( if(!$_SESSION["user"])( throw new Exception("Hai lasciato la chat"); ) if(!$chatText)( throw new Exception("Non hai ha inserito un messaggio."); ) $chat = new ChatLine(array("author" => $_SESSION["user"]["name"], "gravatar" => $_SESSION["user"]["gravatar" ], " text" => $chatText)); // Il metodo save restituisce un oggetto MySQLi $insertID = $chat->save()->insert_id; return array("status" => 1, "insertID" => $insertID); ) funzione statica pubblica getUsers()( if($_SESSION["user"]["name"])( $user = new ChatUser(array("name" => $_SESSION["user"][" name"])) ; $user->update(); ) // Elimina le voci della chat più vecchie di 5 minuti e gli utenti inattivi per 30 secondi DB::query("DELETE FROM webchat_lines WHERE ts< 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); ) funzione statica pubblica getChats($lastID)( $lastID = (int)$lastID; $result = DB::query("SELECT * FROM webchat_lines WHERE id > ".$lastID." ORDER BY id ASC"); $chats = array(); while($chat = $result->fetch_object())( // Restituisce l'ora in cui il messaggio è stato creato nel formato GMT (UTC): $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("chat" => $chat); ) public static function gravatarFromHash($hash, $size=23)( return "http://www.gravatar.com/ avatar/" .$hash."?size=".$size."&default=". urlencode("http://www.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?size=".$size); ) )
jQuery invia richieste getUsers() ogni 15 secondi. Utilizziamo questo fatto per rimuovere dal database le repliche che sono più vecchie di 5 minuti e gli utenti inattivi. Sarebbe potenzialmente possibile eliminare i dati del record in getChats , ma questa richiesta arriva ogni secondo e il carico aggiuntivo può influire sulle prestazioni dell'applicazione.
Nel metodo getChats() viene utilizzata la funzione data emissione dell'ora in formato GMT. Sul lato client, utilizziamo i valori di ora e minuti da impostare nell'oggetto JavaScript e, di conseguenza, l'ora viene visualizzata in base al fuso orario dell'utente.
Continua nella seconda parte!
Piano
In questo articolo creeremo una semplice chat che può essere facilmente eseguita su qualsiasi server che abbia il supporto PHP. Non sono richiesti database perché tutte le informazioni sulla chat verranno archiviate in un semplice file di testo. Tecnologia applicata:
PHP– gestirà tutti i contenuti di terze parti dell'applicazione
- Scrivi nuovi messaggi in un file di testo
- Leggi nuovi messaggi da un file di testo
- Interroga lo stato del file di testo
- Sicurezza di base
jQuery/javascript- gestione lato client dell'applicazione. Questa applicazione è progettata da AJAX, il che significa che i messaggi appariranno in una finestra pop-up (sia tua che dell'altra parte), senza la necessità di ricaricare la pagina.
- Interroga periodicamente il server per nuovi messaggi
- Aggiunta di nuovi messaggi alla finestra della chat
- Scorri la finestra della chat sui nuovi messaggi
- Interroga e imposta il nome utente
- Limite della dimensione del messaggio per evitare enormi saggi nella finestra della chat
- Sicurezza di base
File di testo- memorizza la cronologia delle chat
Deviamo dal piano
In questo articolo, tratteremo varie cose e tecnologie interessanti e, infine, avremo chat. È vero, una chat del genere sarebbe difficile da chiamare la chat migliore con il maggior numero di opportunità. Non sarai in grado di prendere a calci o bandire le persone. Diverse persone possono darsi lo stesso nome. Non sarai in grado di vedere tutti i partecipanti alla chat attivi. In altre parole, questo non è IRC per te. È solo una demo interessante e divertente che può essere applicata anche in alcune situazioni. Se desideri migliorare ulteriormente la tua chat e aggiungere molte funzionalità diverse, ti consigliamo di seguire i materiali del nostro sito!
Struttura HTML di base
jQuery/chat PHP
Guarda, qualche prezioso markup. In effetti, il 50% di ciò che stai guardando non ha nulla a che fare con il focus di questo articolo. Il layout di pagina centra le cose. I doppi div applicati al layout della chat e della finestra di messaggio vengono utilizzati solo per aggiungere un effetto a doppio bordo della finestra di messaggio (non realmente necessario).
Le aree più importanti sono la textarea con l'id "sendie" e la message box div. Questo sarà indicato da javascript.
Parte del motore in javascript
Faremo un po' di orientamento agli oggetti con javascript. Creeremo una funzione Chat che sarà il livello più alto del resto delle funzioni relative alle cose relative alla chat.
FunctionChat()(
this.update = updateChat;
this.send = sendChat;
this.getState = getStateOfChat;
}
UpdateChat interrogherà il server se ci sono nuove righe nel file di testo. Se sono presenti, la funzione li pubblicherà nella finestra della chat. sendChat verrà attivato quando il messaggio è già stato stampato e viene premuto il pulsante invia messaggio. La funzione passerà i dati al server per un'ulteriore elaborazione. getStateOfChat interroga il server per il numero di righe in un file di testo, consentendo di confrontare i dati e determinare se ci sono nuove righe o meno. Queste informazioni vengono restituite allo stesso modo di JSON. E le funzioni si presentano così:
//ottiene lo stato della chat
funzione getStateOfChat()(
if(! istanza)(
istanza = vero;
$.ajax((
digita: "POST",
URL: "process.php",
dati:(
"funzione": "getState",
"file": file
},
tipo di dati: "json",
successo: funzione(dati)(
stato = stato dei dati;
istanza=falso;
},
});
}
}
//Aggiorna la chat
funzione aggiornamentoChat()(
if(! istanza)(
istanza = vero;
$.ajax((
digita: "POST",
URL: "process.php",
dati:(
"funzione": "aggiornamento",
"stato": stato
"file": file
},
tipo di dati: "json",
successo: funzione(dati)(
if(data.text)(
per (var i = 0; i< data.text.length; i++) {
$("#area-chat").append($("
"+data.text[i] +"
"));}
}
document.getElementById("area di chat").scrollTop = document.getElementById("area di chat").scrollHeight;
istanza=falso;
stato = stato dei dati;
},
});
}
altro(
setTimeout(aggiornamentoChat, 1500);
}
}
//invia il messaggio
funzione sendChat(messaggio, nickname)
{
updateChat();
$.ajax((
digita: "POST",
URL: "process.php",
dati:(
"funzione": "invia",
"messaggio": messaggio
"soprannome": soprannome,
"file": file
},
tipo di dati: "json",
successo: funzione(dati)(
updateChat();
},
});
}
Tutte e tre queste funzioni sfruttano le capacità AJAX di jQuery e le associano anche a un file PHP chiamato process.php. Noi, ovviamente, dobbiamo crearlo.
Parte del motore in PHP
Alcune delle informazioni che vengono passate con AJAX sono un valore arbitrario e sono chiamate "funzioni". Fornisce solo informazioni sul file PHP su ciò che è necessario fare. Prima di tutto, imposteremo un valore e imposteremo un interruttore operatore che coprirà tutte le possibili funzioni. Imposteremo anche un array vuoto che conterrà i valori che verranno codificati in JSON e quindi restituiti.
Quando proviamo ad attivare getState, il file di testo verrà letto e verrà calcolato il numero di righe. Dopo aver aggiornato la pagina, il file viene letto completamente e vengono restituite nuove righe. Quando inviamo un messaggio, viene scritto in un file di testo come una nuova riga.
$funzione = $_POST["funzione"];
$log = array();
Interruttore($funzione) (
Caso("getState"):
$linee = file("chat.txt");
}
$log["stato"] = conteggio($linee);
rottura;
caso ("aggiornamento"):
$stato = $_POST["stato"];
if (file_exists("chat.txt")) (
$linee = file("chat.txt");
}
$conteggio = conteggio($righe);
if ($stato == $conteggio)(
$log["stato"] = $stato;
$log["testo"] = falso;
) altro (
$testo=matrice();
$log["stato"] = $stato + conteggio($linee) - $stato;
foreach ($linee come $line_num => $line) (
se ($numero_riga >= $stato)(
$testo = $riga = str_replace("\n", "", $riga);
}
}
$registro["testo"] = $testo;
}
caso("invia"):
$nickname = htmlentities(strip_tags($_POST["nickname"]));
$reg_exUrl = "/(http|https|ftp|ftps)\:\/\/+\.(2,3)(\/\S*)?/";
$messaggio = htmlentities(strip_tags($_POST["messaggio"]));
if (($messaggio) != "\n") (
if (preg_match($reg_exUrl, $messaggio, $url)) (
$messaggio = preg_replace($reg_exUrl, "".$url."", $messaggio);
}
fwrite(fopen("chat.txt", "a"), "". $nickname . "" . $messaggio = str_replace("\n", " ", $messaggio) . "\n");
}
rottura;
}
echo json_encode($log);
?>
Andiamo al sodo
Dobbiamo scrivere un po' di javascript, altrimenti la vacanza non partirà. Scarica jQuery, carica il nostro "motore", quindi segui alcuni passaggi per raccogliere diversi nomi dei partecipanti alla chat per avviare una conversazione.
Lungo la strada, impostiamo un limitatore di lunghezza del messaggio e assegniamo la funzione di invio dei messaggi al pulsante di ritorno.
Controllo periodico di nuovi messaggi
Dovremo utilizzare la funzione "aggiorna" per eseguire il polling del nostro file di testo per il nuovo testo. Poiché abbiamo bisogno di chiamare regolarmente la funzione di aggiornamento, utilizziamo la funzione javascript setInterval():
utilità
*
* Scaricare files: (download: 2128)
Nella demo dal vivo, registro e visualizzo gli indirizzi IP al solo scopo di scoraggiare azioni avverse. Spesso le chat anonime fanno sì che le persone vogliano mostrare il loro lato peggiore. Quindi, ti consiglio di annotare gli indirizzi IP, nel caso in cui dovessi bloccare l'uno o l'altro IP in futuro.
La nota: Tieni presente che questa applicazione è sviluppata in PHP, quindi non puoi semplicemente scaricare i file ed eseguirli sul tuo computer, poiché dovrai eseguire un server PHP locale. Inoltre, durante il caricamento di file sul server, non dimenticare di modificare i permessi sul file "chat.txt" in modo che il server possa scrivervi dati.
Ciao cari webmaster! Sono sicuro che desideri che il tuo sito venga visitato attivamente, in modo che i visitatori siano interessati al materiale pubblicato sul tuo sito, in modo che tornino ancora e ancora. Molto probabilmente, hai già un forum e un libro degli ospiti sul tuo sito. Ma manca ancora qualcosa... Cosa? Chiacchierata! Una chat in cui potresti chattare, grazie alla quale i visitatori torneranno ancora e ancora ...
Cosa è necessario per questo?
Allora qual è il problema?! Scriviamo la nostra chat che soddisferà tutte le tue esigenze, sarà veloce e compatta.
Ora decidiamo cosa dovrebbe essere in grado di fare la nostra chat.
Innanzitutto, deve registrare nuovi visitatori e fornire l'ingresso a quelli già registrati.
In secondo luogo, deve essere in grado di inserire le emoticon, quelle piccole immagini divertenti di cui la maggior parte delle chat di oggi non può fare a meno.
In terzo luogo, gli utenti dovrebbero essere in grado di comunicare in privato, i. personalmente tra di loro in modo che gli altri visitatori non vedano la loro conversazione (naturalmente, ad eccezione dell'amministratore J)
Ora decidiamo quali tecnologie utilizzeremo durante lo sviluppo di una chat. Scriveremo in PHP e per la registrazione degli utenti memorizzeremo le informazioni su di loro nel database MySQL. Il testo della chat room stessa (chiamiamola chat room l'informazione che i visitatori si scambiano) sarà in un file di testo.
Per cominciare, scriviamo una semplice chat, senza funzioni private e amministrative, in cui i visitatori possono registrarsi, comunicare tra loro, inserire emoticon.
Sembrerà qualcosa del genere.
Ora chiarirò alcuni dettagli in più che devono essere discussi prima di scrivere il codice.
In un file di testo chat.txt(memorizzerà la nostra chat room) non deve contenere più di 20 messaggi recenti (per ridurre il traffico e velocizzare il caricamento della chat).
Quando si accede alla chat, il visitatore dovrà inserire un login (aka nickname) e una password, e se tale login è già memorizzato nella nostra tabella del database, lo script dovrebbe verificare se la password è corretta e se lo è, quindi reindirizzare il visitatore alla chat e, se errata, tornare alla pagina principale per reinserire login e password e informarlo che la password non è corretta. Se nella tabella non è presente un accesso di questo tipo, è necessario registrare un visitatore, ad es. aggiungi i dati su di lui alla tabella (login e password). Ma non c'è bisogno di creare una pagina separata per la registrazione di un nuovo visitatore (di seguito chiameremo i visitatori “utenti della chat” J), altrimenti la necessità di compiere alcune azioni aggiuntive per entrare nella chat spaventerà una parte abbastanza significativa dei visitatori.
Inoltre, se hai intenzione di creare una piccola chat, ad esempio per comunicare con gli amici, sarebbe bello registrare tutto ciò che è stato detto nella chat in un file separato (chiamiamolo history.txt). In futuro, sarà possibile eseguire alcune azioni su questo file (ad esempio, ogni giorno alle 12.00 inviare il contenuto di questo file tramite e-mail, quindi cancellarlo). Ma lo faremo dopo che la nostra chat sarà già funzionante.
Quali file sono necessari per creare una chat?
Ora decidiamo quali file devono essere creati affinché la chat funzioni. Di seguito è riportato un elenco completo dei file di chat con una descrizione dello scopo di ciascun file.
index.php- la pagina principale della chat. Visualizza un modulo per inserire login e password, nonché informazioni su quante persone sono attualmente nella chat (ed eventualmente le ultime 20 risposte)
chat.php- Bene, questo è il nostro fascicolo più importante e importante. Quello che semplicemente non fa: controlla i visitatori per la correttezza della coppia login-password, registra il visitatore e, inoltre, si collega a se stesso un numero abbastanza elevato di file PHP descritti di seguito.
chat.inc.php- questo file PHP contiene un documento HTML con dei frame, senza il quale nessuna chat che si rispetti può fare, oltre a un piccolo pezzo di codice PHP.
invia.php- questo file mostra un modulo con campi di testo per inserire commenti, emoticon e altre cose utili, nonché un campo per la scelta di un interlocutore (sia per chattare in una "chat" che per comunicare in un "privato").
sorrisi.php– qui e così è tutto chiaro. Questo file eseguirà il loop delle emoticon sullo schermo e genererà il codice JavaScript per inserire il codice dell'emoticon nella chat line.
aggiungi.php– questo file formatterà le repliche degli utenti della chat e le inserirà nel file chat.txt.
del.php– quando un utente della chat lascia la chat, rimuove l'utente della chat dall'elenco di quelli attivi (cioè quelli che stanno attualmente discutendo i loro problemi importanti e che sono nella chat).
includer.php- contiene 3 variabili: $myserver, $mylogin, $mypassword. La variabile $myserver specifica il server su cui si trova il database (di solito è localhost), $mylogin e $mypassword sono il login e la password per la connessione al database.
testo.php- File PHP responsabile dell'aggiornamento delle informazioni nella chat room.
utenti.php– Un file PHP che mostra un elenco di visitatori attualmente nella chat e genera anche un codice JavaScript per inserire il nickname del chatter selezionato nella casella di input della replica.
logo.html– un file che mostra il logo della chat sullo schermo.
chat.txt- e questa è la chat room, memorizza le ultime 20 repliche.
history.txt- il suo scopo è già stato descritto sopra.
chat_users.sql– File SQL contenente la struttura della tabella chat_users
logo_chat.jpg- logo della chat.
style.css- il foglio di stile utilizzato nella chat.
1…7.gif- 7 immagini emoji utilizzate in chat.
E ora è necessario menzionare un punto, senza una spiegazione di cui è impossibile fare a meno.
Cos'altro?
Come fanno le persone di solito a lasciare una chat? Esatto, raramente qualcuno fa clic sul pulsante di uscita, di solito chiude semplicemente la finestra della chat. Dobbiamo tenere traccia di questi momenti per rimuovere in tempo gli utenti della chat che sono usciti dall'elenco di quelli nella chat. E, diciamo che è successo qualcosa a una persona e che aggiorna la pagina. È una situazione reale. Quindi, in entrambi questi casi, si verifica l'evento Unload. Può essere monitorato utilizzando il gestore JavaScript onUnload. Questo evento si verifica nella finestra corrente appena prima che il documento venga scaricato. Quindi, per ciascuna delle suddette azioni del visitatore, è necessario rispondere correttamente: se l'utente della chat lascia la chat, lo rimuoviamo dall'elenco dei visitatori attivi e se si aggiorna semplicemente, non facciamo nulla. Ma abbiamo lo stesso gestore che reagisce ad azioni diverse! Come risolvere questo problema? Ne parlerò in modo più dettagliato quando descriverò il funzionamento dei file chat.inc.php, send.php e del.php.
Se vuoi vedere come funziona la chat descritta nell'articolo, puoi andare su http://chat.micro.org.ua e assicurarti che tutto quanto descritto in questo articolo funzioni J.
Iniziare
Bene, ora, quando sembra che tutte le domande siano state chiarite, puoi procedere alla digitazione diretta del codice. prima scriverò il codice completo del file, quindi descriverò in dettaglio cosa fa. E prima di digitare il codice, crea file chat.txt e history.txt vuoti.
Inoltre, nella stessa directory in cui hai la chat, inserisci 7 file gif: queste sono le nostre emoticon. Penso che tu possa trovare 7 emoticon su Internet J, ma se non hai emoticon, puoi ottenerle da http://chat.micro.org.ua.
Ora crea un foglio di stile style.css, ci servirà in seguito per definire lo stile della chat, anche se se non vuoi usare CSS, non puoi crearlo. Se decidi ancora di usare i CSS, crea due classi: normal e title, ci torneranno comunque utili J.
Ora abbiamo bisogno di un logo per la chat. Il mio logo è la parola "MICRO", scritta su fondo blu in lettere dorate alte 55 pixel e larghe 195 pixel. Lascio questo momento alla vostra discrezione.
Bene, ora - apri il tuo editor PHP preferito (spero non sia Blocco note J) e inizia ... inizierò con i file di secondaria importanza. Per non essere distratti in seguito dalla loro descrizione mentre spiegano il funzionamento dei file principali.
Chat_utenti.sql
Per prima cosa devi creare una tabella "chat_users" nel database. Quindi ecco il suo codice:
CREA TABELLA chat_users (
id int(10) NOT NULL auto_increment,
testo di accesso NON NULL,
testo password NON NULL,
testo privato NON NULL,
attivo tinyint(2) NOT NULL predefinito "0",
CHIAVE PRIMARIA (id)
) TIPO=MyISAM;
Abbiamo creato una tabella con cinque colonne:
1. id - identificatore chatnik.
2. login - login (nickname) della chat
3. password - password della chat
4. privat è una riserva per il futuro quando lavoriamo sulla birra
5. attivo - qui verrà memorizzata solo una cifra: 1 - se l'utente della chat è attualmente nella chat e 0 se l'utente della chat non è attualmente nella chat.
Non c'è niente di complicato qui.
Incuder.php
$mioserver="";
//Di solito questo è localhost
$mioaccesso=" ";
// Il tuo login
$miapassword="";//?>
//La tua password
Questi sono i tuoi dati per la connessione al database.
Logo.html
Non c'è niente di speciale da spiegare qui. Creiamo un documento HTML, vi inseriamo l'immagine del logo della chat, e lo spingiamo sulla Pagina Rai con la stringa "TOPMARGIN=0 LEFTMARGIN=0 RIGHTMARGIN=0 MARGINHEIGHT=0 MARGINWIDTH=0".
Bene, ora passiamo ai file principali della chat.
Indice.php
Finora, non ci sono descrittori PHP in questo documento, ma in seguito, quando la funzionalità della chat viene espansa, alcuni dati sull'operazione della chat verranno visualizzati qui.
In questo file visualizziamo un modulo di input per l'inserimento di login (nickname) e password, utilizziamo anche JavaScript per verificare che i campi per inserire login e password non rimangano vuoti, inoltre, convertendo login e password in minuscolo , li confrontiamo in modo che non corrispondano (per ragioni di protezione elementare). Bene, mostriamo anche il titolo della chat (il suo nome) e i diritti d'autore.
I dati del modulo vengono passati al file chat.php. Lo considereremo ora.
Chat.php
segnalazione_errore(0);
include("includer.php");
$login=$_POST["login"];
$password=$_POST["password"];
if (($login!="") && ($password!=""))
{
eco "
mysql_select_db("micro");
# Controlla se un tale nickname è registrato nella chat
$risultato=mysql_query($sql);
# Se una persona con un tale nickname non è nella chat, registrala e rendila attiva
se (($num_risultati=="") || ($num_risultati==0))
{
$sql="INSERT INTO `chat_users` VALUES ("", "".$login."","".$password."","","1")";
$risultato=mysql_query($sql);
include("chat.inc.php");
}
# Altrimenti controlla: se ha inserito la password corretta entra in chat, altrimenti va alla pagina principale
altro
{
$sql="SELECT * FROM `chat_users` DOVE `login`="".$login."" e `password`="".$password.""";
$risultato=mysql_query($sql);
$num_risultati=mysql_num_righe($risultato);
se (($num_risultati=="") || ($num_risultati==0))
{
eco "";
}
altro
{
$sql="SELECT * FROM `chat_users` DOVE `login`="".$login.""";
$risultato=mysql_query($sql);
$num_risultati=mysql_num_righe($risultato);
$riga=mysql_fetch_array($risultato);
$id=$riga["id"];
$sql="CANCELLA DA `chat_users` DOVE `id`=".$id;
$risultato=mysql_query($sql);
$sql="INSERT INTO `chat_users` VALUES ("".$id."", "".$login."","".$password."","","1")";
$risultato=mysql_query($sql);
include("chat.inc.php");
}
}
}
altro
{
}
?>
Cosa stiamo facendo in questo file? Prima di tutto, impostiamo la soppressione degli errori (error_reporting(0)) - qualunque cosa accada, i visitatori non dovrebbero vedere i messaggi di errore. Successivamente, includiamo il file includer.php con i dati per la connessione al database. Selezioniamo i valori di login e password dall'array POST e, se non sono vuoti (anche se abbiamo già previsto questa opzione nel file index.php, ma all'improvviso qualcuno digiterà http://chat.***. com/chat.php subito, quindi in questo caso lo trasferiamo in index.php), continuiamo lo script. Quindi controlliamo se abbiamo un utente con questo login nella tabella chat_users. In caso contrario (il nickname non è occupato), inseriamo il login e la password nella tabella: ecco come avviene la registrazione. Se un tale login esiste già nella tabella, controlliamo se la password inserita dal visitatore corrisponde alla password nella tabella. In caso contrario, creiamo un codice JavaScript contenente un messaggio che la password non è corretta e lo reindirizziamo alla pagina index.php. Se tutto è a posto (nella tabella si trova la coppia "login-password" corrispondente, inviamo al visitatore il file chat.inc.php). Inoltre, eseguiamo alcune manipolazioni J sul tavolo: inseriamo il numero 1 nel campo "attivo" di questo visitatore, ad es. renderlo attivo.
Chat.inc.php
Questo file contiene una serie di frame che contengono file PHP.
Quando l'evento onUnload viene attivato, la gestione dell'evento viene passata al file del.php. Maggiori informazioni sul funzionamento di questo file sono alla fine dell'articolo.
Tieni presente che in ciascuno dei documenti che si trovano nei frame (l'eccezione è logo.html e smiles.html), passiamo il login del visitatore utilizzando la stringa di query. Perché è necessario? Ne parlerò più tardi.
Testo.php
segnalazione_errore(0);
# Se ci sono più di 20 righe nella chat, rimuoviamo le prime in modo che non rimangano più di 20 righe nella finestra
$file=file("chat.txt");
$conteggio=conteggio($file);
Se ($conteggio>$num)
{
Per ($i=($conteggio-$num); $i<$count; $i++)
{
$str = $str.$file[$i];
}
$fp=fopen("chat.txt","w");
fwrite($fp,$str);
}
$file=file("chat.txt");
$conteggio=conteggio($file);
Per ($i=0; $i<$count; $i++)
{
echo $file[$i]."
";
}
?>
Questo documento merita un'attenzione speciale.
Con la linea " »Impostiamo la velocità di aggiornamento del file su cinque secondi. Secondo le mie osservazioni, 5 secondi per la nostra chat sono la frequenza di aggiornamento ottimale, perché il file che verrà letto ogni volta è composto da sole 20 righe, quindi più velocemente text.php viene aggiornato, meglio è per noi.
Naturalmente, impostiamo la soppressione dei messaggi di errore.
Quindi, utilizzando la funzione file(), leggiamo le informazioni dal file chat.txt e visualizziamo le informazioni sullo schermo, sostituendo prima i caratteri "\n" (interruzione di riga) con "
».
Nota le righe:
$num=20;
se ($conteggio>$num)
{
Per ($i=($conteggio-$num); $i<$count; $i++)
{
$str = $str.$file[$i];
$str=ereg_replace("\r\n","\n",$str);
}
$fp=fopen("chat.txt","w");
fwrite($fp,$str);
}
Con questo codice, lasciamo solo le ultime 20 righe nella chat room. Questo controllo viene eseguito dopo che il numero di righe nel file chat.txt supera 20.
E un altro punto importante. Il nostro documento dovrebbe scorrere verso il basso in modo che gli utenti della chat vedano le repliche più recenti. Raggiungiamo questo utilizzando nel tag
Sorrisi.html
")">
")">
")">
")">
")">
")">
")">
Utilizzando JavaScript, inseriamo il codice della faccina nella riga della replica che si trova nel file send.php (ad esempio, per la quinta faccina, che ha il nome 5.gif, il codice sarebbe questo:<5>). Successivamente, nel file add.php, abbiamo invece il codice<5>inserire e per gli utenti della chat verrà visualizzata una normale emoticon.
Invia.php
Questo file contiene due moduli. Il primo contiene due campi di testo (uno per inserire il nome dell'interlocutore, l'altro per inserire un commento) e un pulsante "Dì", che trasferisce i dati da questo modulo al file add.php. Il secondo include un solo pulsante "Esci", cliccando sul quale si attiva il file del.php e disconnette il visitatore dalla chat. Certo, quasi nessuno userà questo pulsante, ma comunque ...
Inoltre, entrambi i moduli trasmettono l'accesso dell'utente della chat ai file del gestore.
Utenti.php
segnalazione_errore(0);
include("includer.php");
$login=$_GET["login"];
?>
Ora in chat: |
| ".($i+1).". ".stripslashes($row["login"])." |
Io raccomando: |
1. Microportale 2. I nostri forum 3. Servizi |
Regole della chat: |
1. L'amministratore ha sempre ragione. 2. Se l'amministratore ha torto, vedere il punto 1. 3. Se esci, usa il pulsante "Esci". 4. Per inondazioni e imprecazioni, puoi essere rimosso dalla chat |
Con l'aiuto di questo file, visualizziamo un elenco di visitatori attivi (cioè quelli che attualmente hanno il valore 1 nel campo "attivo"). Questo file viene aggiornato ogni 10 secondi.
Inoltre, mostriamo in questo file un elenco di siti che consigliamo di visitare agli utenti della chat (forse uno di loro farà clic sul collegamento, che, tra l'altro, si aprirà in una nuova finestra), nonché le regole della chat. Non ho sovraccaricato i visitatori con le regole: non giurare, non allagare, obbedire all'Admin. A proposito di Admin, nel prossimo articolo ti dirò che tipo di Admin è e cosa ne faremo.
segnalazione_errore(0);
$file=fopen("chat.txt","a");
$filehis=fopen("history.txt","a");
per ($i=1; $i<8; $i++)
{
$messaggio=ereg_replace("<".$i.">","",$messaggio);
}
# Con l'aiuto di queste righe, estraiamo indirizzi di siti Web ed e-mail dalla replica.
\\2", $messaggio);
$messaggio = eregi_replace("([[:spazio:]()[()])(www.[ [email protetta]:%_\+.~#?&//=]+)", "\\1\\2", $messaggio);
$messaggio = eregi_replace("([[:spazio:]()[()])(http://.[ [email protetta]:%_\+.~#?&//=]+)", "\\1\\2", $messaggio);
$messaggio = eregi_replace("[_a-z0-9-]+(\.[_a-z0-9-]+)*@+(\.+)*"," \\0",$messaggio);
Fwrite($file,"\n[".date("H:i:s")."] ".$accesso." => ".$chi.": ".$messaggio);
fwrite($filehis,"\n[".date("H:i:s")."] ".$accesso." => ".$chi.": ".$messaggio);
Header("Posizione:send.php?login=".$login);
?>
Ricevuto un messaggio dal file send.php, lo formattiamo correttamente: selezioniamo le email, gli indirizzi dei siti, utilizziamo i caratteri “=>” per separare chi sta contattando chi ed evidenzia il messaggio in grassetto. Quindi apriamo il file chat.txt e aggiungiamo una nuova riga alla sua fine contenente la replica appena formattata. Dopodiché, riportiamo il visitatore a send.php.
Finalmente arriviamo al luogo più interessante del lavoro in chat. Come ho detto all'inizio dell'articolo, abbiamo un problema. Se una persona aggiorna semplicemente la finestra della chat, non facciamo nulla con lui e se chiude la finestra della chat, lo rimuoviamo dall'elenco dei visitatori attivi. Come raggiungere questo obiettivo? Guarda come funziona il file del.php.
segnalazione_errore(0);
include("includer.php");
$login=$_GET["login"];
$db=mysql_connect($mioserver, $miologin, $miapassword);
mysql_select_db("micro");
$sql="SELECT * FROM `chat_users` DOVE `login`="".$login.""";
$risultato=mysql_query($sql);
$riga=mysql_fetch_array($risultato);
$id=$riga["id"];
$password=$riga["password"];
$privato=$riga["privato"];
$sql="CANCELLA DA `chat_users` DOVE `id`=".$id;
$risultato=mysql_query($sql);
$sql="INSERT INTO `chat_users` VALUES ("", "".$login."", "".$password."", "".$privat."", "0")";
$risultato=mysql_query($sql);
Header("Posizione:index.php");
?>
In effetti, con qualsiasi modifica nel documento, impostiamo l'utente della chat sul valore "attivo" 0. Ma se l'utente della chat esce, questo valore di 0 rimarrà nel suo profilo e se l'utente della chat semplicemente aggiorna la pagina, quindi lo script del.php inserisce prima l'utente della chat nel valore del profilo 0, quindi, dopo l'aggiornamento, lo script chat.php inserisce il valore 1 nel profilo di questa chat. infatti non cambia nulla per l'utente della chat - si è disconnesso, e il suo login viene rimosso dall'elenco dei visitatori attivi, ha aggiornato la pagina - e tutto va bene, funziona come avrebbe dovuto.
In generale vengono descritti tutti i file che ho elencato all'inizio dell'articolo. Ora, di conseguenza, abbiamo una chat che funziona normalmente, è in grado di registrare nuovi visitatori, far entrare quelli già registrati, crea condizioni confortevoli per comunicare tra i visitatori, è in grado di risolvere molti problemi che sorgono nel processo di lavoro, è in grado di diluire la comunicazione con divertenti emoticon e ha tante, tante altre utili funzioni…
Ebbene, nel prossimo articolo amplieremo le capacità della nostra chat: creeremo un'opportunità per gli utenti della chat di chattare in "privato", un'interfaccia di amministrazione della chat, nonché uno script Admin che risponderà a tutto ciò che accade nel chat, che annuncerà qualcosa e, potrebbe essere in grado di rispondere a semplici domande.
Tutto stavolta. Se hai domande - scrivi, cercherò di risponderti. Buona fortuna!
