Salve a tutti,
per farmi perdonare dei giorni (anzi mesi
) di assenza su questo forum, ho deciso di creare una guida per aggiungere in una chat ajax la classica scritta "sta scrivendo".
Siccome è la mia prima guida spero di essere chiaro e se avete dubbi/domande/proposte o volete segnalare un bug, non esitate a rispondere, mi farebbe molto piacere.
ATTENZIONE: questo post non spiega come fare una chat ajax, ma spiega solo una mia idea per aggiungere qualche utile dettaglio alla chat.
Requisiti:
- buone conoscenze php/ajax;
- una chat AJAX-PHP già pronta che utilizza un database MY-SQL;
- una tabella messaggi con i seguenti campi di base: mittente, destinatario, testo(NULL), data(timestamp);
Per iniziare:
ogni chat ajax, o almeno in genere, è composta principalmente da 3 file: uno principale, che contiene la pagina per chattare, un file che contiene lo script per inviare un messaggio e un file che contiene il log dei messaggi, che viene aggiornato tramite ajax circa ogni 2 secondi.
Nel mio caso abbiamo 3 file: chat.php dove è presente la chat, log.php dove è presente lo script che mostra i messaggi e post.php che viene eseguito, sempre tramite ajax, ogni volta che inviamo un messaggio. A questi 3 file andremo a inserire il file "sta_scrivendo.php" che ne vedremo il funzionamento più tardi.
Partiamo dal file chat.php che dovrebbe contenere un form per l'invio del messaggio con il classico tag <input type="text">.
Proprio in questo tag inseriremo l'attributo onKeyPress che andrà a richiamare una funzione javascript ajax per eseguire il file sta_scrivendo.php; così:
codice HTML:
...
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js">
</script>
<script type="text/javascript">
function staScrivendo(){
$.ajax({
//eseguo il file "sta_scrivendo.php" appena viene attivato l'evento onKeyPress
url: "sta_scrivendo.php",
cache: false,
});
}
</script>
...
<input name="usermsg" type="text" onKeyPress="staScrivendo()" autocomplete="off"/>
...
Per quanto riguarda il file chat.php abbiamo già finito.
Il prossimo file da modificare sarà "sta_scrivendo.php" che ci servirà per andare a inserire un normale messaggio con testo = NULL e la data (questa riga inserita servirà solo per controllare nel file log.php se l'utente sta scrivendo).
NB: nel mio caso, il destinatario e il mittente vengono memorizzati tramite le sessioni.
Codice PHP:
<?
session_start();
if(isset($_SESSION['user'])&&isset($_SESSION['destinatario'])){
/*contollo che il destinatario e il mittente esistano */
mysql_connect("localhost","nomeutente","password") or die (mysql_error()); //connessione mysql
mysql_select_db ("nomeDB") or die (mysql_error());
$destinatario = $_SESSION['destinatario'];
$mittente = $_SESSION['user']; //recupero il mittente e il destinatario
$query = "DELETE FROM messaggi WHERE mittente = '$mittente' AND destinatario = '$destinatario' AND testo IS NULL";
/*cancello eventuali righe uguali a quelle che andremo ad inserire con testo null*/
$result = mysql_query($query);
if (!$result) {
die("Errore nella query $query: " . mysql_error());
}
$query = "INSERT INTO messaggi (mittente,destinatario)
VALUES ('$mittente','$destinatario')";
/* inserisco la riga vuota. NB: il testo deve essere settato di default NULL e la data sarà un timestamp */
$result = mysql_query($query);
if (!$result) {
die("Errore nella query $query: " . mysql_error());
}
mysql_close();
//chiudo la connessione
}
?>
Ora aggiungeremo uno script per cancellare la riga vuota nel file post.php, nel caso il messaggio venga postato:
Codice PHP:
...
$query = "DELETE FROM messaggi WHERE mittente = '$mittente' AND destinatario = '$destinatario' AND testo IS NULL";
$result = mysql_query($query);
if (!$result) {
die("Errore nella query $query: " . mysql_error())
}
...
infine modifichiamo adeguatamente il file log.php in modo che il destinatario visualizzi il messaggio "Sta scrivendo.." (questa è la parte più difficile e personalizzabile).
Ognuno avrà il file log.php personalizzato in base alle proprie esigenze, quindi sarò generale:
prima di stampare a video i messaggi memorizziamo nella variabile $n il numero dei messaggi che ci sono arrivati da parte del destinatario:
Codice PHP:
$query = mysql_query("SELECT * FROM messaggi WHERE mittente = '$destinatario' AND destinatario = '$userlog' AND testo IS NOT NULL");
$n = mysql_num_rows($query);
in seguito stampiamo tutti i messaggi con testo "IS NOT NULL" e controlliamo se sono presenti nuovi messaggi con testo null e data uguale a quella attuale con un margine di 3 secondi:
Codice PHP:
$query = mysql_query("SELECT * FROM messaggi WHERE destinatario = '$mittente' AND mittente = '$destinatario' AND testo IS NULL");
$quanti = mysql_num_rows($query);
if($quanti>0 && $_SESSION['precedenti']==$n){
/*attenzione: controllo anche se $n è uguale alla sessione precedenti, che dichiarerò successivamente*/
$rs = mysql_fetch_row($query);
$d = $rs[3];
$dataeora = explode(" ",$d);
/*vari controllo sulla data. Attenzione: questi controlli funzionano solo se la data del database è in formato "Y-m-d h:m:s" ed è sincronizzata con quella del server*/
$oggi = date("Y-m-d");
if($dataeora[0]==$oggi){
$oreminutisecondi = explode(":",$dataeora[1]);
$ore=$oreminutisecondi[0];
$minuti=$oreminutisecondi[1];
$secondi=$oreminutisecondi[2];
$secondiTotale=($ore*3600)+($minuti*60)+$secondi;
$oreReali=date("H");
$minutiReali=date("i");
$secondiReali=date("s");
$secondiTotaleReali=($oreReali*3600)+($minutiReali*60)+$secondiReali;
if($secondiTotaleReali-3<$secondiTotale){
/*se il messaggio è più recente di 3 secondi stampo Sta scrivendo...*/
echo '<p style="font-size:16px;">Sta scrivendo...</font>';
}
}
}
$_SESSION['precedenti'] = $n;
/*metto la variabile $n nella sessione precedenti*/
Spero di essere stato chiaro. Su richiesta metto l'intero codice della chat.
Grazie per l'attenzione e alla prossima