In questo articolo creiamo una chat semplice per capire il concetto di funzionamento asincrono dei sistemi web. Per realizzarla dovremmo avere qualche nozione di programmazione web lato client e lato server e sapere soprattutto cos’é AJAX.
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:
- Visualizzazione;
- Rendere i messaggi consultabili;
- Invio messaggio;
Questo esempio farà uso di una tabella all’interno di un database relazionale Mysql. Quindi creiamo la tabella con il seguente codice:
CREATE TABLE `chat` (
`Nome` char(20) DEFAULT NULL,
`Messaggio` char(200) DEFAULT NULL,
`Data` int(20) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1
Ora 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 con questo codice:
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="submit" value="Entra"/>
</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
<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=", 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
<?php
include "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."
");
}
?>
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."
");
}
?>
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.