Salve a tutti, in questo articolo creeremo una chat con principi di funzionamento simili alla chat di Facebook. Per realizzarla dovremmo avere qualche nozione di programmazione web lato client e lato server e sapere soprattutto cos'é AJAX. A tal proposito vi rimando alle guide del sito HTML.it . Iniziamo subito dicendo cos'é una chat: una chat è un servizio software che ci permette di comunicare mediante messaggi testuali diffusi tramite Internet e di spedirli alle persone che vogliamo, simili alle mail ma molto più istantanei. Quindi le sue funzioni fondamentali sono:
Quindi iniziamo con l'iscrizione e visualizzazione della chat: per prima cosa creiamo un file index.php in cui mettiamo un form in html e chiediamo all'utente di inserire il suo nickname:
index.php
<html xmlns=”http://www.w3.org/1999/xhtml”><head><title>Prechat</title></head><body><form action="chat.php" method="POST">Inserire un nome <input type="text" name="nome" /><br /><input type="submit" value="Entra"/><br /></form></body></html>
Fatto questo creiamo lo script principale in PHP chat.php che gestirà le funzioni della chat cioé la visualizzazione, la raccolta dei messaggi e l'invio degli stessi. In questo script per fare l'invio e la visualizzazione dei messaggi ci serviremo di semplici funzioni AJAX in modo da semplificare al massimo la complessità del software ed evitare di ricaricare continuamente la pagina:
chat.php
<?php
session_start();
$nome = htmlspecialchars($_POST['nome']);
if($nome!=""){
$_SESSION['nome'] = $nome;
}
?>
<!DOCTYPE HTML>
<html>
<head>
<title>Chat</title>
<link href="style.css" rel="stylesheet" type="text/css">
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
<script type="text/javascript">
function invia_mess(mex){
var http = new XMLHttpRequest(message);
var url = "salva.php";
http.open("GET", url+"?message="+mex+"&nome=<?php echo $_SESSION['nome'];?>", true);
http.onreadystatechange = function() {
if(http.readyState == 4 && http.status == 200) {
var response = http.responseText;
document.getElementById("view").innerHTML = response;
}
};
http.send(null);
}
function visualizzaconv(){
var http = new XMLHttpRequest(message);
var url = "visualizza.php";
http.open("GET", url, true);
http.onreadystatechange = function() {
if(http.readyState == 4 && http.status == 200) {
var response = http.responseText;
document.getElementById("view").innerHTML = response;
setTimeout("visualizzaconv()",2000);
}
};
http.send(null);
}
</script>
</head>
<body onload="visualizzaconv();">
<div id="view"></div>
<div id="send">
<input type="text" id="message" name="message" onsubmit="invia_mess(this.value); this.value='';">//input messaggio
<input type="button" value="Invia" onclick="invia_mess(document.getElementById('message').value); document.getElementById('message').value='';">
</div>
</body>
</html>
Nel codice delle funzioni AJAX sono contenuti i link per due script in PHP che sono salva.php e visualizza.php: questi due script servono a salvare e visualizzare i messaggi dal database. Qui sotto non riporterò gli script della connessione al database ma basterà richiamare la funzione mysql_query() per effettuare la query sul database MYSQL. Quindi ecco gli script in PHP:
salva.php
<?phpinclude "include/connessionedatabase.php";$nome=$_GET['nome'];$attuale = time();$mss = htmlspecialchars($_GET['message']);/* Inserimento all’interno del database dell’azione con relativi campi (Giocatore, Messaggio, Data)*/$query ="INSERT INTO Chat SET Nome = '$nome', Messaggio = '$mss', Data = '$attuale'";eseguilaquery($query);$query2="SELECT * FROM chat WHERE Data+600>'$ora_attuale' ORDER BY Data DESC"; //questa query è importante per non lasciare ritardi nella visualizzazione della conversazione$result=prendiirisultati($query2);while($riga = mysql_fetch_array($result)){ //stamperà i messaggi della chat$nome = stripslashes($riga['Nome']);$mss = stripslashes($riga['Messaggio']);$ora = date("H:i", $riga['Data']);echo($ora." ".$nome." dice: ".$mss."<br/>");}?>
visualizza.php
<?php include "include/dbms.inc.php"; $query2="SELECT * FROM chat WHERE Data+600>'$ora_attuale' ORDER BY Data DESC"; $result=getResult($query2); while($riga = mysql_fetch_array($result)){ $nome = stripslashes($riga['Nome']); $mss = stripslashes($riga['Messaggio']); $ora = date("H:i", $riga['Data']); echo($ora." ".$nome." dice: ".$mss."<br/>"); }?>
Bene, arrivati a questo punto la nostra chat è finita. Vi lascio il codice SQL per creare la tabella chat nel database:
CREATE TABLE `chat` (
`Nome` char(20) DEFAULT NULL,
`Messaggio` char(200) DEFAULT NULL,
`Data` int(20) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1
Sicuramente mancano molti controlli di sicurezza soprattutto nell'AJAX, ma questo codice costituisce un'ottima base di partenza per capire bene i principi che ci sono alla base di una semplice chat.
Sono un appassionato di informatica, mi dedico allo sviluppo web e alla gestione dei sistemi web-based: realizzo siti e progetto software gestionale per privati e aziende. Ho tanta passione per tutto quello che riguarda il web e le nuove tecnologie, lavoro bene in team e collaboro con aziende e professionisti di settore.