Per consolidare le mie conoscenze ho deciso di sviluppare un esempio completo di pagina Web dinamica (diciamo pure applicazione Web) sviluppata grazie alla comodità offerta da JQuery. Inizialmente doveva essere un semplice esempio come gli altri che vi ho mostrato, ma poi mi sono lasciato prendere la mano e ho sviluppato una chat completa, che ho pure testato con gli amici (grazie in particolare a Koryu, BigSmurf, iskyz e Nickos88 nonché a mia sorella)!
Ci sono un sacco di altre cose che avrei potuto aggiungere, ma un programmatore deve sapere quando fermarsi! Potete usarla sia come esempio didattico che nei vostri siti Web, se lo desiderate. Naturalmente occorrerà abbellirla in qualche maniera. JQuery UI potrebbe essere una buona idea, ma se siete più creativi di me potete anche giocare col foglio di stile e farci qualcosa di bello. Il Web design non è il mio campo e comunque esulava dai miei scopi.
Chi come me ha a che fare col Web da tanto noterà come finalmente la tecnologia ci consenta di avere una chat che sia del tutto “nostra”. Prima servivano dei server Java o degli orribili frame che facessero continui refresh. Spesso ci si affidava a servizi che consentivano di inserire una chat pronta sul sito, senza alcuna integrazione.

Veniamo a noi. La chat è composta principalmente dai seguenti file:

1. chat_server.php
   è la parte lato-server della chat. Si occupa di gestire lo scambio di messaggi, quindi di memorizzarli e spedirli ai client quando li richiedono. Include ovviamente le funzioni di login/logout, consente di leggere alcuni parametri di configurazione della chat e di ricevere la lista degli utenti connessi. Il formato utilizzato per codificare i dati è JSON, di cui abbiamo già parlato. Le operazioni svolte dal server sono assolutamente minimali, in pieno spirito Cloud Computing, dato che della presentazione e di eventuali elaborazioni secondarie si occuperanno i client, ormai dotati di potenza sufficiente a cavarsela da soli! Le uniche operazioni non necessarie che ci concediamo di lasciare sul server sono gli ordinamenti, sia perché possiamo farlo con molto meno codice, sia perché ci aspettiamo che gli algoritmi utilizzati da un DBMS siano più efficienti dei nostri. E poi è improbabile che la lista utenti serva in ordine diverso da quello alfabetico, tanto vale evitare di aggiungere codice ridondante!
   L’accesso alle funzioni avviene attraverso semplici richieste HTTP. In pratica si accede alla pagina passando opportuni parametri, così come avviene per un normale sito Web.
   Questa pagina si può quasi definire un Web Service, dal momento che possiamo accedervi e usarne le funzioni da qualsiasi dispositivo e non solo attraverso le pagine lato client che ho creato io. Un’applicazione per smartphone per esempio potrebbe collegarsi alla chat attraverso questa pagina, senza l’obbligo di usare un browser. Tutto ciò che gli serve è la capacità di fare richieste HTTP e interpretare i dati JSON.
2. chat_class.js
   Questa classe permette di avere un’interfaccia ben definita che rappresenta sul client le chiamate che possiamo eseguire al server. In pratica nasconde tutti i dettagli sulle chiamate AJAX, sui formati dei parametri ecc. Dato che le chiamate AJAX sono tutte asincrone, vengono lanciati degli eventi nel momento in cui le operazioni richieste sono compiute e all’evento è associata la risposta del server. L’utilizzatore di questa classe può associare a tali eventi l’azione da intraprendere (per esempio avvisare l’utente che il login è avvenuto correttamente). In aggiunta, la classe include i campi nick e user_id che sono impostati automaticamente al momento della connessione, così possiamo averli sottomano. È possibile una maggiore astrazione facendo sì che questa classe o eventualmente un’altra che ne faccia uso rappresenti la chat in tutto e per tutto, ma secondo me va già bene così, senza aggiungere ulteriore “peso”!
3. index.html
   Questa è la pagina a cui ci si può collegare per utilizzare la chat.
   Vengono utilizzati i metodi della classe chat per comunicare col server e agli eventi generati sono associate le opportune azioni. Al momento della connessione viene generato un cookie che consente di conservare l’ID di sessione, in modo che in caso di chiusura o refresh accidentale della pagina, si mantenga la connessione.

A proposito della sessione, è bene aggiungere una piccola nota di sicurezza: non è verificato in alcun modo che l’ID di sessione scelto ci appartenga, quindi in linea di massima è possibile che un altro utente scriva al posto nostro, ma è molto improbabile che a un malintenzionato interessi rubarci un nick su una chat che non richiede alcuna registrazione! Proprio per evitare altri generi di “rogne”, non viene utilizzata la sessione PHP ma gli ID vengono generati casualmente dal server al momento del login.
Ai file elencati si aggiunge un piccolo file di configurazione con qualche parametro da impostare prima dell’utilizzo.
Ho scelto di utilizzare un database perché lavorare con dei file avrebbe complicato ulteriormente le cose, ma si può sempre modificare la pagina server e farla funzionare in modo diverso. Se siete interessati a una chat già pronta basata su file potete seguire questo link

È interessante discutere una scelta fatta su un dettaglio della chat. Come potrete vedere, vi è la possibilità di ignorare uno o più utenti. Questa caratteristica è aggiunta lato-client, il server non ne sa nulla: semplicemente gli utenti da ignorare sono tenuti in memoria e i loro messaggi non vengono scritti sulla finestra della chat. I vantaggi sono ovvi: il server è mantenuto minimale, non si complica la gestione degli utenti, le query sono più leggere. Il primo svantaggio è che se aggiorniamo la pagina perdiamo gli utenti ignorati. La cosa si risolve facilmente con un cookie, ma come ho già detto prima, mi sono fermato prima di ingarbugliare ancora il codice.. divertitevi voi ad aggiungerlo! Più serio può essere il fatto che se un utente si disconnette e un altro si connette con lo stesso nick prima del refresh della lista, ignoreremo un innocente… ma diciamo la verità, quanto è probabile questa cosa? Infine, abbiamo dei trasferimenti di dati inutili, problema che potrebbe essere piuttosto serio se ignorassimo molti utenti che scrivono messaggi-spam molto grandi, ma abbiamo la possibilità di impostare un intervallo di flood. Di default questo intervallo è 1 secondo e l’intervallo di scaricamento dei messaggi è di 3 secondi. Se immaginiamo di ignorare 2 utenti che scrivono un messaggio al secondo, al massimo scaricheremo 6 messaggi inutili. Per evitare che questo sia troppo costoso, potrebbe essere una buona idea controllare la lunghezza dei messaggi entranti sul server e restituire un codice di errore se si supera un certo numero di caratteri. Comunque non lasciamoci suggestionare: abbiamo linee piuttosto veloci, non sarà qualche kb (esagerando) in più di messaggi a guastarci il divertimento. Possiamo usare la chat così e prendere eventuali contromisure se si presentano problemi 🙂

Non mi dilungo in altre spiegazioni. I file sono ricchi di commenti!

Veniamo all’installazione. Vi occorre un database MySQL e PHP (io ho la versione 5.3.8, ma dovrebbe funzionare anche con versioni precedenti, purché non più vecchie della 5.2). Per prima cosa dovete creare un database ed importare le tabelle dal file chat.sql, poi aprite il file chat_configuration.php e impostate i parametri di connessione al database stesso. Per verificare che tutto funzioni correttamente aprite col vostro browser la pagina chat_server.php. con i seguenti parametri:

http://VOSTRO_PATH/chat_server.php?action=verify_connection&session=0

Se ciò che visualizzate è {“code”:3}, tutto funziona correttamente. Se non visualizzate nulla controllate di aver impostato i parametri giusti e creato bene il database.
Potrete accedere alla chat attraverso index.html.
I più smaliziati potranno includere la chat nel proprio sito come vorranno (so che le chat non vanno di moda come una volta, ma fa sempre piacere averne una).
La licenza è la BeerWare, quindi potrete farci ciò che vorrete 😀
Se qualche internauta capitasse qui, la scaricasse e la utilizzasse, mi farebbe piacere che mi scrivesse due righe di impressioni (qui o in privato) e magari il link della propria pagina.

Ecco il link: altri_file/chat1.0.zip
Happy Hacking!

AGGIORNAMENTI:
29/05/2021: Aggiunto jquery-cookie nel file zip, sostituite le chiamate mysql con mysqli altri_file/chat1.1.zip