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.