Premessa
Quante volte abbiamo pensato di realizzare una piccola chat per il nostro sito per poter scambiare qualche parola con i nostri visitatori? L’idea di realizzare una chat è sicuramente una cosa entusiasmante, soprattutto se questa viene realizzata con Flash!!!
In questo Tutorial realizzeremo una piccola chat facendo uso di Flash e di ASP con un file di testo.
Il concetto è molto semplice. Utilizzeremo un file di testo per memorizzare i messaggi degli utenti in quanto è un metodo molto semplice e veloce, anche se questo comporta alcuni limiti. Ma poiché il nostro obiettivo è quello di approfondire l’uso di flash con ASP, possiamo tranquillamente procedere, consapevoli del fatto che esistono in commercio svariati SoftWare dedicati per la realizzazione di Chat professionali.
Struttura e Funzionamento
La nostra Chat avrà un’interfaccia in Flash avente i seguenti componenti:
- Un campo di testo dinamico dove appariranno tutti i messaggi degli utenti connessi alla chat
- Due campi di testo di Input dove l’utente deve scrivere il suo NickName e il messaggio
- Un pulsante INVIA per inviare il messaggio
- Dei pulsanti per cambiare il colore del suo messaggio in modo da distinguersi tra i vari messaggi
- Due pulsanti per selezionare il tempo di "refresh" dei messaggi della chat
Adesso pensiamo agli script ASP da realizzare: uno script servirà per aggiungere un messaggio alla chat mentre un altro script servirà per effettuare il refresh dei messaggi.
Vediamo nei dettagli come saranno fatti questi script e quali sono le loro funzioni. Prima di tutto dobbiamo fare in modo che il file di testo non si appesantisca. Per far questo decidiamo che nel file di testo verranno memorizzati solo gli ultimi 20 messaggi. In questo modo il file di testo avrà sempre e solo venti messaggi, sarà quindi leggerissimo.
Lo script ASP che inserisce un nuovo messaggio dovrà quindi aprire il file di testo dei messaggi, aggiungere in testa il nuovo messaggio e salvare nel file di testo solo i primi venti messaggi, quindi inviare all’interfaccia Flash il contenuto aggiornato del file di testo. Lo script ASP che effettua il refresh invece deve semplicemente aprire il file di testo e leggere i messaggi contenuti al suo interno, quindi inviarli all’interfaccia Flash per visualizzarli.
Vediamo l’interfaccia Flash come deve essere realizzata.
Creiamo un campo di testo dinamico HTML che conterrà tutti i messaggi della chat. Chiamiamo questo campo di testo dinamico "corpo".
Ora creiamo un campo di testo di Input (chiamato "msg") dove l’utente inserirà il proprio messaggio, e allo stesso modo un altro campo di testo di input chiamato "user" dove l’utente inserirà in suo nome o nickname.
A questo punto mettiamo un pulsante invia con associato questo codice Action Script:
on (release, keyPress "<Enter>") {
stringa = "<font color='"+color+"'>"+user+" - "+msg+"</font>";
loadVariablesNum ("resp.asp", 0, "POST");
msg = undefined;
refresher.gotoAndPlay(1);
}
Come possiamo notare dallo script il pulsante viene attivato sia quando viene cliccato col mouse che quando l’utente preme il tasto invio dalla tastiera, in modo da facilitare l’invio del messaggio mentre si ‘chatta’. Una volta premuto il pulsante mettiamo i dati inseriti dall’utente (cioè il messaggio "msg" e il suon nickname "user") in una variabile chiamata "stringa" aggiungendo dei Tag HTML per il colore del font e separando il nickname dal messaggio dal segno "-". La variabile "stringa" viene quindi inviata col metodo POST allo script ASP per l’inserimento di un nuovo messaggio che si chiama resp.asp, tramite l’azione loadVariablesNum ("resp.asp", 0, "POST");.
Infine viene resettato il campo di testo di Input "msg" e riportato il clip "refresh" al primo fotogramma.
Infatti il Clip filmato "refresh" serve per effettuare il refresh dei messaggi della chat ogni tot secondi che l’utente non invia un nuovo messaggio. Questo serve ovviamente per permettere all’utente di vedere i nuovi messaggi che nel frattempo hanno inserito gli altri utenti.
Quando l’utente inserisce un nuovo messaggio lo script resp.asp inserisce il nuovo messaggio e automaticamente effettua il refresh dei messaggi.
Vediamo a questo punto il codice dello script ASP resp.asp ampiamente commentato:
<%
Dim strLinea, FileObject, Instream, intVisite, intTipo, OutStream, i, k, arrMsg(100), fine, allMsg
'stringa è la variabile che viene passata da Flash e contiene il nuovo messaggio
'dell'utente così composto : "nickname - messaggio"
stringa = Trim(Request("stringa"))
strFile = Server.MapPath("msg.txt")
' creo l'oggetto
Set FileObject = Server.CreateObject("Scripting.FileSystemObject")
'apro in lettura
intTipo = 1 ' lettura
Set InStream = FileObject.OpenTextFile(strFile,IntTipo,true)
'aggiungo la data al nuovo messaggio inviato dall'interfaccia Flash e metto questo messaggio al primo posto
'dell'array che conterrà tutti i messaggi della chat
i = 0
arrMsg(i) = FormatDateTime(Now(),3)&" - "&stringa
'con questo ciclo while leggo tutte le righe del file di testo e le metto
' ad una ad una nell'array. su ogni riga c'è un messaggio diverso
Do While not InStream.AtEndOfStream
StrLinea = InStream.ReadLine()
i=i+1
arrMsg(i) = StrLinea
'Response.Write(arrMsg(i))
Loop
'questo è un commento che può servirvi per visualizzare tutto il contenuto
'dell'array
'Response.Write(arrMsg(i))
Set OutStream = FileObject.CreateTextFile(strFile, true)
'verifico quanti messaggi sono presenti nella chat
if i>20 then
fine=20
else
fine=i
end if
k=0
'adesso leggo il contenuto dell'array dove ho memorizzato i messaggi della chat
'e scrivo sul file di testo su ogni riga un messaggio e allo stasso modo metto
'tutti i messaggi separandoli dal <br /> in una variabile chiamata allMsg, questa
'variabile verrà quindi inviata a Flash per visualizzare i messaggi della chat
Do While k<=fine
OutStream.WriteLine(arrMsg(k))
allMsg=allMsg&arrMsg(k)&"<br />"
'Response.Write(arrMsg(k)&"<br />")
k=k+1
Loop
OutStream.Close
Set OutStream = Nothing
InStream.Close
Set InStream = Nothing
' libero risorse
Set FileObject = Nothing
'Response.Write("ok")
'invio a Flash tutti i messaggi della chat
Response.Write("corpo="&allMsg)
%>
Refresh e colori
Come abbiamo detto nella lezione 2 abbiamo un Clip sul nostro filmato flash che serve per effettuare il refresh.
Abbiamo sul filmato anche due pulsanti per permettere all’utente di scegliere se far effettuare il refresh ogni cinque secondi oppure ogni 10 secondi. Quando l’utente preme il tasto "5 secondi" assegniamo alla variabile _root.refresher.reftime il valore 1 quando invece seleziona "10 secondi" il valore 2.
Così se andiamo a vedere all’interno del Clip filmato "refresh" abbiamo sul fotogramma numero 60 il seguente codice Action Script:
// Caso in cui il refresh è ogni 5 secondiif (reftime==1){
q = random(999999);
loadVariablesNum ("refresh.asp?q="+q, 0, "POST");
gotoAndPlay(1);
}
mentre sull’ultimo fotogramma ovvero il numero 120 abbiamo questo altro codice:
// Caso in cui il refresh è ogni 10 secondi
q = random(999999);
loadVariablesNum ("refresh.asp?q="+q, 0, "POST");
In entrambi i casi viene eseguita la chiamata dello script "refresh.ASP" passandogli un valore random per forzare la chiamata dello script. Infatti se viene omesso il valore random lo script viene chiamato solo una volta e tutte le altre chiamate vengono ignorate.
Vediamo quindi il codice ASP dello script refresh.asp:
<%
Dim strLinea, FileObject, Instream, intVisite, intTipo, OutStream,allMsg
strFile = Server.MapPath("msg.txt")
' creo l'oggetto
Set FileObject = Server.CreateObject("Scripting.FileSystemObject")
'apro in lettura
intTipo = 1
Set InStream = FileObject.OpenTextFile(strFile,IntTipo,true)
'apro il file di testo e leggo tutti i messaggi riga per riga e li metto
'dentro una variabile chiamata allMsg separandoli dal <br />
'in modo da andare a capo dopo la fine di ogni messaggio
Do While not InStream.AtEndOfStream
StrLinea = InStream.ReadLine()
allMsg=allMsg&StrLinea&"<br />"
Loop
InStream.Close
Set InStream = Nothing
' libero risorse
Set FileObject = Nothing
'invio a Flash tutti i messaggi della chat
Response.Write("corpo="&allMsg)
%>
Possiamo notare infine sul nostro filmato che ci sono dei pulsanti con dei diversi colori. Questi permettono all’utente di selezionare un diverso colore per i suoi messaggi, in modo da distinguere facilmente tra tutti i messaggi della chat quelli di ciascun utente. Ad ogni pulsante è associato un codice Action Script di questo tipo:
on (release){
_root.color="#FF0033";
}
File di testo e conclusioni
Apriamo ora il file di testo e vediamo come vengono memorizzati i messaggi:
12.13.11 - <font color='#FF0033'>Anna Verdi - ciao a tutti ci sono anch'ioooooooooo</font>
12.12.58 - <font color='#FF0033'>Luca Bianchi - ciao ragazzi cosa si dice in questa chat???</font>
12.12.35 - <font color='#FF0033'>Marco Rossi - ciao Enrico come stai???</font>
12.12.22 - <font color='#FF0033'>Enrico Lai - ciao a tuttiiiiiiiiiiii</font>
Quando invece i messaggi vengono inviati dagli script ASP a Flash sono in questo modo:
12.13.11 - <font color='#FF0033'>Anna Verdi - ciao a tutti ci sono anch'ioooooooooo</font><br>12.12.58 - <font color='#FF0033'>Luca Bianchi - ciao ragazzi cosa si dice in questa chat???</font><br>12.12.35 - <font color='#FF0033'>Marco Rossi - ciao Enrico come stai???</font><br>12.12.22 - <font color='#FF0033'>Enrico Lai - ciao a tuttiiiiiiiiiiii</font>
Possiamo fare degli approfondimenti mandando in esecuzione solo gli script ASP senza usare il filmato Flash per osservare meglio come lavora lo script e capirne meglio il funzionamento e il passaggio delle variabili all’interfaccia Flash. Creiamo ora una pagina HTML chiamata chat.html con questo codice:
<html>
<head>
<title>chat</title>
</head>
<body bgcolor="#cccccc">
<p>
<object type="application/x-shockwave-flash" data="chat.swf" width="550" height="450">
<param name="movie" value="chat.swf" />
<param name="quality" value="high" />
</object>
</p>
</body>
</html>
e salviamo tutti i file sul nostro server all’interno di una cartella su cui siano settati i permessi di scrittura oltre che essere attivo il supporto alle pagine ASP. A questo punto la nostra CHAT è pronta per essere utilizzata!
