I cookie permettono il funzionamento di alcuni servizi di questo blog. Utilizzando questi servizi, accetti l'utilizzo dei cookie da parte nostra. Ok Rifiuta

Come creare una chat simile a quella di Facebook

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:

  • Visualizzazione
  • Rendere i messaggi consultabili
  • Invio messaggio

 

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”&gt;
<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

 

<?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."<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.

I più letti

Seguici su Facebook

Seguici su Google+

Renzo Cappelli

miafoto

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.

Commenti

NON CI SONO ANCORA COMMENTI.

Lascia il tuo commento