domenica 11 novembre 2007

Creare una chat con flash mx

Usando esclusivamente Flash MX e un linguaggio server side (in questo caso PHP), si può realizzare una chat abbastanza completa, anche se, ovviamente, con i suoi limiti.Iniziamo a definire le basi del nostro lavoro e dei nostri obiettivi.Creiamo innanzitutto l’interfaccia in Flash, disegnando un riquadro per i messaggi inviati dagli utenti (con annesso campo di testo dinamico); un riquadro dove visualizzare gli utenti on line (anche qui ovviamente un altro campo dinamico);un campo di testo input dove l’utente scriverà i propri messaggi; un pulsante “Invia”; un pulsante “Esci”.Aggiungiamoci qualcosa per renderla un po’ più viva (niente di straordinario): la possibilità di scegliere il colore dei nostri messaggi. Disegniamo quindi dei quadratini colorati che diventeranno dei pulsanti.Ora, partendo dal presupposto che Flash si interfaccia con PHP per scrivere dentro ad un file .txt i messaggi inviati dagli utenti, dobbiamo creare un “loop” che legga, ad intervalli regolari, il contenuto del file .txt.Quindi creiamo un nuovo “movieclip” vuoto e al suo interno, al primo “keyframe”, inseriamo questo “AS”:loadVariablesNum ('mess.txt?r='+ random (100000), 0, 'GET');loadVariablesNum ('utenti.txt?r='+ random (100000), 0, 'GET');La prima riga legge il contenuto del file “mess.txt” (il numero random è stato aggiunto per evitare problemi di refresh).Nella seconda riga facciamo la stessa cosa. Il file letto questa volta è però “utenti.txt”, che conterrà gli utenti on line.Aggiungendo dei frame vuoti creiamo un lasso di tempo che determinerà l’intervallo del “loop”. All’ultimo “keyframe” inseriamo un semplice gotoAndPlay(1); .Torniamo nella “timeline” principale, e nel primo “keyframe” scriviamo:_root.messaggio = '';System.useCodepage = true;Quest’ altro codice servirà, rispettivamente, ad “azzerare” il contenuto del campo input e alla corretta visualizzazione dei messaggi.Ora selezioniamo il pulsante “Invia”, e assegniamogli questo:on (release, keyPress '') {if (_root.messaggio != '') {mess=_root.messaggionick=_root.nickcol=_root.coloreloadVariablesNum('scrivi.php?r='+random(100000), 0, 'POST'); //richiama il file php il quale scriverà all’interno del file mess.txt il proprio messaggio, il nostro nick, e il colore deciso_root.messaggio='' //cancella il messaggio dal campo inputloadVariablesNum ('mess.txt?r='+random(100000), 0, 'GET'); //questo fa in modo di poter vedere immediatamente il proprio mesasggio visualizzato}Selection.setFocus('messaggio'); //assegna il focus al campo input}I commenti spiegano il tutto.Su un “movieclip”, invece, assegniamo quest’ultimo “AS”:onClipEvent (load) {_root.colore = '003399'; //il colore di default}onClipEvent (enterFrame) {_root.out.scroll = _root.out.maxscroll; //scrolla automaticamente il campo dei messaggi}Anche qui ci sono i commenti.Non dimentichiamoci la scelta dei colori del messaggio!Ad ogni pulsante assegniamo:on(release){_root.colore='003399' //il valore esadecimale del colore corrispondente, senza il simbolo #Selection.setFocus('messaggio');}Nulla di difficile.Ora passiamo al PHP.Costruiamoci, nell’index, un semplicissimo form in html per l’inserimento del nostro nick, per esempio:

Scrivi il tuo nick e premi 'entra'

nick:

La pagina chatin.php, a cui punta il form, conterrà il codice necessario per controllare se il nick è già presente nella chat. In caso negativo aprirà la popup con la nostra chat all’interno.La popup è costituita dal file chatflash.php, in cui è presente la nostra chat .swf . Appena entrati il sistema scrive nel file utenti.txt il nick dell’utente appena entrato.E ora il file più importante: scrivi.php.Al suo interno viene preso, formattato e scritto l’intero messaggio per ogni utente, nel seguente formato.$nick: $mess
Dove possiamo notare le variabili “$nick”, “$col”, e “$mess”, forniteci dal filmato flash.Questa stringa viene elaborata in un modo speciale per far sì che Flash la riconosca in maniera corretta e la faccia leggere in altrettanto modo.Si usano queste funzioni in php (presenti però anche in asp):utf8_encode(urlencode('$nick: $mess
'))Attenzione a seguire quest’ordine di formattazione. Usare quindi prima urlencode per codificare la stringa, che a sua volta verrà ricodificata nuovamente attraverso utf8_encode.Non dimentichiamoci di sostituire i simboli “<” e “>” con i rispettivi “<” e “>” per evitare brutte sorpreseAggiungiamo anche un altro script php per “troncare” i messaggi all’interno del file mess.txt, in modo tale che non superi, per esempio, i 2 Kb di peso (2000 caratteri), così che Flash non si affatichi troppo.Questa funzione è raccolta nel file “tronc.php”.Per finire, dobbiamo fare in modo che quando un utente esce avvenga il logout.Nel file chatout.php, che è richiamato quando la popup viene chiusa, lo script al suo interno cancella il nick dal file utenti.txt, e scrive all’interno del file mess.txt qualcosa del genere:- 09.30 pippo è uscitoNon ci resta che caricare tutto sul nostro spazio (che ovviamente deve supportare PHP), ricordarsi di impostare i permessi (chmod) a 776 o 777 ai due file .txt, e provare il tutto!