Una chat in ASP ed AJAX

ASP E-Commerce con ASP Menu Javascript Area Aziende Cocktail Registrazione domini

Home + Articoli + AJAX + Articolo # 154

Concesso in esclusiva a Mr.Webmaster. Vietata la riproduzione.

Introduzione

In questo articolo abbiamo visto come realizzare una semplicissima chat con ASP ed il risultato non è dei migliori, dato che vengono usate delle variabili di sessione e di applicazione, che sottolineano il fatto che ASP (e simili come il PHP) non è adatto a determinate cose.

Non stiamo qui a spiegare cos'è una chat perchè il lettore lo saprà già molto bene. Approfittiamo quindi per dare un senso compiutoad AJAX ed abbandoniamo esempi teorici di scarso utilizzo pratico. Andiamo dunque a realizzare un servizio sensato, molto richiesto ed eccellentemente funzionante: una chat con ASP ed AJAX.

Struttura dell'applicazione

La realizzazione di quest'applicazione è piuttosto semplice da un punto di vista pratico, ma può diventare piuttosto complesso non nel codice ma nella sua struttura, dato che coinvolgiamo una filosofia (relativamente) nuova come AJAX.

Segue un elenco dei file che utilizzeremo nel progetto, corredati da una spiegazione degli stessi.

chat.msb - utilizziamo un database per memorizzare i messaggi piuttosto che delle variabili di applicazione.

config.asp - è il file di configurazione del progetto, contenente intestazioni da usare nelle pagine e la connessione al database.

default.asp - è la pagina di accoglienza della chat

chat.asp - è l'interfaccia della chat in cui scrivere e leggere i messaggi.

messaggio.asp - è il file che memorizza i messaggi nel database.

chat.js - è il file Javascript che, attraverso XMLHTTP, richiama il file ASP che mostra i messaggi a video, ovvero:

ajax.asp - il file che mostra i messaggi a video!

Si crei una cartella sul proprio server Web e la si chiami chat_ajax. Appena creati i file del progetto si potrà dunque testare il risultato all'indirizzo:

http://localhost/chat_ajax/

Spiegheremo l'utilizzo dei file citati, teatralmente parlando, in ordine di apparizione.

Il database dell'applicazione

Si crei il file chat.mdb ed al suo interno si crei la tabella messaggi composta dai seguenti campi:

id - Contatore
username - Testo, lunghezza 30
messaggio - Testo, lunghezza 255

Salvare e chiudere.

Il file di configurazione

Si crei adesso il file config.asp e lo si corredi del seguente codice:

<%
    Option Explicit
    On Error Resume Next
    Response.Buffer = True
    Response.Expires = 0

    Dim sc, cn, rs
    sc = "driver={Microsoft Access Driver (*.mdb)};dbq="
    sc = sc & Server.MapPath("chat.mdb")

    Function ConnOpen()
        Set cn = Server.CreateObject("ADODB.Connection")
        Set rs = Server.CreateObject("ADODB.Recordset")
        cn.Open sc
    End Function
    Function ConnClose()
        Set rs = Nothing
        cn.Close
        Set cn = Nothing
    End Function
%>

Come anticipato nella descrizione della struttura vista in precedenza, lo script non fa altro che specificare le classiche intestazioni iniziali delle pagine e connettersi al database, utilizzando due funzioni personalizzate che richiameremo all'occorrenza.

Una nota: per semplicità, sicurezza e praticità consiglio l'utilizzo di questo sistema di connessione al database per qualsiasi tipo di applicazione, sia Web che non.

La pagina di accoglienza e di login della chat

Si crei il file default.asp che, come anticipato dal titolo di questo paragrafo, farà da pagina di accoglienza e di login della chat.

Per snellire le operazioni strettamente inerenti all'articolo corrente, e per non divagare troppo sul tema, non creeremo alcun reale login, permettendo agli utenti di scegliere la username che preferiscono.

Di certo in questo modo sono possibili doppioni di nickname dei visitatori, ragion per cui lascio al lettore la facoltà di implementare un sistema di login vero e proprio.

Vediamo il codice del file:

<%@LANGUAGE = VBScript%>
<html>
<head>
<title>Una chat in ASP ed AJAX</title>
</head>
<body>
<h1>Una chat in ASP ed AJAX</h1>
<p>
<form method="post" action="default.asp?login=OK">
Scegli una username<br><br>
<input type="text" name="username" maxlength="10">
<input type="submit" value="Entra in Chat">
</form>
</p>
<%
    If Request.QueryString("login") = "OK" Then
        Session("username") = LCase(Request.Form("username"))
        Response.Redirect "chat.asp"
    End If
%>
</body>
</html>

Quasi un comune file HTML, tranne che per le due righe ASP che creano la sessione e rimandano l'utente alla pagina della chat vera e propria.

Raccomando di non modificare il valore 10 assegnato alla proprietà maxlength della casella di testo, dato che la username andrà memorizzata nel database che ha il relativo campo di massimo 10 caratteri.

Cambiando l'uno va necessariamente cambiato anche l'altro.

L'interfaccia della chat

Qui c'è da chiacchierare parecchio.

Abbiamo anticipato nei paragrafi iniziali la funzione di questo file, chat.asp, ma prima di spiegarne i dettagli ritengo indispensabile vederne il codice:

<%@LANGUAGE = VBScript%>
<%
    If Session("username") = "" Then
        Response.Redirect "default.asp"
    End If
%>
<html>
<head>
<title>Una chat in ASP ed AJAX</title>
<style type="text/css">
#CHAT
{
    background: #DDDDDD;
    width: 500px;
    height: 300px;
    overflow: Auto;
}
#MSG
{
    position: Absolute;
    visibility: Hidden;
}
</style>
<script type="text/javascript" src="chat.js"></script>
</head>
<body>
<h1>Una chat in ASP ed AJAX</h1>
<p>Benvenuto/a <b><%=Session("username")%></b></p>
<div id="CHAT"></div>
<form name="chat" method="post" action="messaggio.asp" target="MSG">
<input type="text" name="messaggio" size="70" maxlength="255">
<input type="submit" value="CHAT">
</form>
<iframe src="messaggio.asp" name="MSG" id="MSG"></iframe>
</body>
</html>

Innanzitutto verifichiamo che esista una sessione attiva, altrimenti rimandiamo l'utente indietro.

Saltiamo un attimo il codice CSS che ha un compito ben preciso che vedremo a breve.

Siamo educati e salutiamo l'utente loggato, dopo di che creiamo un <div> a cui assegnamo l'identificativo CHAT. Il livello di testo si presenta vuoto, dato che sarà AJAX a "riempirlo". Anche in questo caso prego di non modificare il valore 255 dell'attributo maxlength della casella di testo, per lo stesso motivo visto in precedenza.

Alla fine della pagina creiamo un frame in linea con nome ed identificativo MSG. Vediamo infatti che il form fa riferimento con un target a questo elemento.

Anche il codice CSS, che riprendiamo ora, fa riferimento a questo elemento, limitandosi a tenerlo nascosto. Stilizziamo poi il livello di testo CHAT assegnandogli le dimensioni e lo scroll automatico, nonchè un colore di sfondo per distinguerlo otticamente.

Alla fine del codice CSS, nelle intestazioni HTML della pagina, richiamiamo il file Javascript chat.js che esamineremo a breve.

Inserimento di un nuovo messaggio

E' arrivato il turno del file messaggio.asp, file richiamato all'interno dell'iframe, che svolge un lavoro importantissimo: l'inserimento dei messaggi da parte degli utenti.

Vediamone il codice:

<%@LANGUAGE = VBScript%>
<!--#include file="config.asp"-->
<%
    Dim messaggio
    messaggio = Server.HTMLEncode(Request.Form("messaggio"))
    If messaggio <> "" Then
        Call ConnOpen()
        rs.Open "messaggi", cn, 3, 3
        rs.AddNew
        rs("username") = Session("username")
        rs("messaggio") = messaggio
        rs.Update
        rs.Close
        Call ConnClose()
        Response.Redirect "messaggio.asp"
    End If
%>

Includiamo il file di configurazione per disporre della connessione al database, recuperiamo il messaggio inserito e, se è stato effettivamente inserito un messaggio, ne eseguiamo la registrazione.

Alla fine rimandiamo l'utente alla pagina stessa, eliminando dunque la sua memoria di recupero del messaggio, al fine scrupoloso di evitare refresh di pagina da parte degli utenti, quindi doppi quanto inutili inserimenti nel database.

Il file Javascript / AJAX dell'applicazione

Il file Javascript dell'applicazione è piuttosto lungo come codice, ma le funzioni che prendiamo in considerazione sono le prime tre, piuttosto brevi.

Vediamo il codice completo:

function Aggiorna()
{
    return Richiesta();
}
window.setInterval("Aggiorna()", 3000)

var XMLHTTP;

function Richiesta()
{
    XMLHTTP = RicavaBrowser(CambioStato);
    XMLHTTP.open("GET", "ajax.asp", true);
    XMLHTTP.send(null);
}

function CambioStato()
{
    if (XMLHTTP.readyState == 4)
    {
        var R = document.getElementById("CHAT");
        R.innerHTML = XMLHTTP.responseText;
    }
}

function RicavaBrowser(QualeBrowser)
{
    if (navigator.userAgent.indexOf("MSIE") != (-1))
    {
        var Classe = "Msxml2.XMLHTTP";
        if (navigator.appVersion.indexOf("MSIE 5.5") != (-1));
        {
            Classe = "Microsoft.XMLHTTP";
        } 
        try
        {
            OggettoXMLHTTP = new ActiveXObject(Classe);
            OggettoXMLHTTP.onreadystatechange = QualeBrowser;
            return OggettoXMLHTTP;
        }
        catch(e)
        {
            alert("Errore: l'ActiveX non verrà eseguito!");
        }
    }
    else if (navigator.userAgent.indexOf("Mozilla") != (-1))
    {
        OggettoXMLHTTP = new XMLHttpRequest();
        OggettoXMLHTTP.onload = QualeBrowser;
        OggettoXMLHTTP.onerror = QualeBrowser;
        return OggettoXMLHTTP;
    }
    else
    {
        alert("L'esempio non funziona con altri browser!");
    }
}

La funzione Aggiorna(), richiamata nel corpo della pagina chat.asp, richiama la funzione Richiesta(), stimolandola ogni 3 secondi, per garantire un continuo, ma non eccessivamente invadente, refresh (in back-office) di pagina e di aggiornamento a video dei messaggi.

La già citata funzione Richiesta() fa appunto richiesta, via XMLHTTP, al file ASP (che esamineremo a breve) dei messaggi.

La funzione CambioStat() stampa a video, nel livello di testo identificato come CHAT, i messaggi, mentre la funzione RicavaBrowser() si limita a verificare che il browser corrente supporti AJAX.

Richiamo dei messaggi via ASP ed AJAX

Siamo giunti alla fase conclusiva di questo lungo articolo sulla realizzazione di una chat con ASP ed AJAX.

Prendiamo visione del codice del file ajax.asp:

<%@LANGUAGE = VBScript%>
<!--#include file="config.asp"-->
<%
    Call ConnOpen()
    rs.Open "SELECT TOP 10 * FROM messaggi ORDER BY id DESC", cn, 1
    If rs.EOF = False Then
        With Response
            While rs.EOF = False
                .Write "<b>" & rs("username") & "</b><br>"
                .Write rs("messaggio") & "<br><br>"
            rs.MoveNext
            Wend
        End With
    End If
    rs.Close
    Call ConnClose()
%>

Si tratta di una semplice query sul database che estrae gli ultimi 10 record (è solo un esempio, ma si consiglia di non estrarne più di 25 o 30) e li ordina dal più recente al meno recente, basandosi sull'ID della tabella.

Naturalmente includiamo il file di configurazione per disporre della connessione al database.

L'output a video, lo ricordo, viene fornito non grazie a quest'interfaccia diretta, che opera in back-end, bensì grazie al file Javascript attraverso XMLHTTP.

Considerazioni e migliorie da apportare alla chat

L'esempio trattato in quest'articolo, cosi com'è, può già essere messo in produzione, ma si tratterebbe di un servizio di messaggistica in tempo reale piuttosto limitate ed amatoriale.

Personalmente, dovendo usarla, apporterei delle migliorie qua e la.

La prima, indiscussa, è stilistica e grafica, ma lascio il compito alla fantasia del lettore, che come grafico sarà di certo più bravo di me che sono solo un povero programmatore.

Ecco cosa farei:

implementazione di un sistema di login e relativa gestione degli utenti;
gestione e visualizzazione degli utenti presenti in chat;
implementazione delle emoticons e degli smile, che in una chat sono sempre graditi;
inserimento e visualizzazione di data e ora per ogni messaggio;
creazione e gestione attraverso un'operazione pianificata sul server di un file che cancelli tutti i messaggi del giorno precedente, onde evitare di appesantire inutilmente la banca dati;
migrazione da MS Access a MySQL.

Per ognuna delle cose elencate esiste un articolo su questo sito.