[ Consiglio ] Chat Javascript/Ajax

[ Consiglio ] Chat Javascript/Ajax postato il 29/06/2009 15:02:17 nel forum programmazione, gdrcd, open source, hosting e modificato da chosen il 29/06/2009 15:03:16

'Giorno a tutti, molto semplicemente ho realizzato una chat con funzioni javascript ajax e infondo è la mia prima vera realizzazione basata su questo linguaggio, con ovvia interazione PHP (per inserimento dati nel db e visualizzazione di questi), qualcuno può/vuole darmi qualche consiglio per poterla eventualmente rendere più efficace? ancora non mi convince troppo la sua realizzazione.

Piccola spiegazione: 4 Pagine
- ajax.js (contenente tutta la parte di codice javascript/ajax)
- chat.php (contenete il corpo della chat, div con form per l'input e div di visualizzazione dei messaggi)
- invio.php (pagina di inserimento dati tramite POST nel database)
- mostra.php (pagina di recupero dati dal DB)

ajax.js

// funzione per la chiamata dell'oggetto XMLHttpRequest
function ajax(){
var ajaxRequest;
try{
// controllo per i browser diversi da IE
ajaxRequest = new XMLHttpRequest();
}catch (e){
// contorollo per IE
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
}catch (e){
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
}catch (e){
// controllo per i browser che non supportano l'XMLHttpRequest
alert("Il browser non supporta questo ShoutBox");
return false;
}
}
}
return ajaxRequest;
}

// funzione per il salvataggio dei dati
function salva(){
HTMLRequest = ajax();
if (HTMLRequest==null){
alert ("Il browser non supporta richieste HTTP");
return;
}
// inviamo i parametri al file per l'INSERT nel database
HTMLRequest.open('POST', 'invio.php', true);
HTMLRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
HTMLRequest.send('testo='+document.form_invio.testo.value);

// svuotiamo il modulo per il messaggio
document.form_invio.testo.value = '';
document.form_invio.testo.focus();
}

// funzione per mostrare i dati
function mostra() {
HTMLRequest = ajax();
// controllo nel caso in cui non possa richiamato l'oggetto Xmlhttp
if (HTMLRequest==null){
alert ("Il browser non supporta richieste HTTP");
return;
}
HTMLRequest.onreadystatechange = function(){
// Restituisce lo stato della richiesta
if(HTMLRequest.readyState == 4){
// Restituice il corpo della risposta come stringa
document.getElementById("modulo").innerHTML = HTMLRequest.responseText;
}
}
// chiamata della pagina PHP che estrae i records
HTMLRequest.open("GET", "mostra.php", true);
HTMLRequest.send(null);
}
// chiamata alla funzione
mostra();
// intevallo per l'aggiornamento della pagina
window.setInterval("mostra()",500);

chat.php

<? session_start();
include ('dat/config.php');
$log = $_SESSION['log'];
?>
<html>
<head>
<title>Chat</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
#modulo {
overflow: auto;
height: 90%;
width: 100%;
}
#input {
height: 10%;
width: 100%;
}
</style>
<script type="text/javascript" src="ajax.js">
</script>
</head>
<body>
<div id="modulo">
</div>
<div id="input">
<form name="form_invio" method="POST" onSubmit="salva(); return false;">
<input name="nick" type="hidden" value="<?= $log ?>">
Azione <br><input name="testo" type="text" size="70"> <input type="submit" name="submit" value="Invio">
</form></div>
</body>
</html>

invio.php

<? session_start();
include ('dat/config.php');
$nick = $_SESSION['log'];

if (isset($_POST['testo']))
{
$testo=addslashes($_POST['testo']);
$query = "INSERT into chat (nick, testo, data) VALUES ('$nick', '$testo', now())";
$result = mysql_query($query);
}
?>

mostra.php

<? session_start();
include ("dat/config.php");

$query = "SELECT * FROM chat ORDER BY id DESC";
$result = @mysql_query($query) or die (mysql_error());
if (mysql_num_rows($result) > 0)
{
while($row = mysql_fetch_array($result))
{
$nick = stripslashes($row['nick']);
$testo = stripslashes($row['testo']);
$data = $row['data'];
echo "$data $nick: $testo<br>
";
}
}
?>

Ripeto, è proprio la mia prima realizzazione e qualche buon consiglio mi potrebbe essere più che utile.

Grazie comunque :D

Metin2 ↗
Sfida i tuoi rivali a battersi con te e dimostra la tua superiorità in questo mondo fantasy!

quota

Pagine → 1

blancks

ONLINE

SCRIVI

29/06/2009 15:47:30

Uno dei vantaggi di ajax è la possibilità di sfruttarlo con tecnologie quali json per poter consentire al server il minimo stress possibile sul carico.

Nel modo in cui viene adoperato dalla tua chat equivale all'utilizzo di un iframe (che anzi, sarebbe meglio in quanto non appesantisce il client con uno script)

Ora, nel caso di una chat non occorre ricorrere necessariamente a Json ma si può sfruttare tranquillamente javascript per eseguire il parser html delle azioni.

Inoltre, ogni volta ricarichi tutta la chat, questo potrebbe causare sfarfallio evidente e non solo, anche qui converrebbe un iframe a questo punto.

Un altra delle potenzialità di javascript è quella di poter scrivere e conservare dati onFly in elementi html quali delle div, in questo modo puoi alleggerire lo script lato server per la lettura di modo che, di volta in volta, legga solo e soltanto l'ultimo messaggio ;-)

Questi sono alcuni dei punti focali su cui ti suggrisco di provare a cambiare la tua creazione... per il resto, che dire, complimenti ! Come prima creazione non c'è male ^^

ps: anche se non sembra, non ti sto mangiando come uno squalo, ti do solo suggerimenti su dove potresti agire xD

In più ho realizzato un prototipo anche io, se e quando vuoi ti basta un mp per vederlo ;)

Entropia Universe ↗
Lascia che il tuo avatar esplori nuovi mondi e viaggi tra i pianeti in questo stupendo MmoRpg Sci-Fi Free to Play!

quota

kamato

SCRIVI

29/06/2009 22:43:28

A me sembra realizzata abbastanza bene^^

War Thunder ↗
Aviazione, veicoli corazzati e flotte militari della seconda guerra mondiale. Parteciperai a tutte le principali battaglie!

quota

blancks

ONLINE

SCRIVI

29/06/2009 23:10:14

kamato ha scritto: A me sembra realizzata abbastanza bene^^

Per una prima volta, si ;-)

Entropia Universe ↗
Lascia che il tuo avatar esplori nuovi mondi e viaggi tra i pianeti in questo stupendo MmoRpg Sci-Fi Free to Play!

quota

blancks

ONLINE

SCRIVI

02/07/2009 17:06:14

oorazoroo ha scritto: La parte Javascript finchè fa ciò che deve fare non vi sono problemi. Magari si potrebbero avere più in la con operazioni complesse o altro, ma dipende da moltissimi fattori.

Per quanto riguarda il lato server sono in dubbio sul metodo di pulitura degli input. Addslashes non è il massimo in fatto di sicurezza, soprattutto se si deve inserire un dato inviato dall'utente all'interno di una query. Molto meglio usare mysql_real_escape_string (o mysqli_real_escape_string se si usa mysqli).

Per il resto, come ho detto più volte, non esiste un modo migliore in assluto per fare le cose, tutto dipende da ciò che serve. Per quanto riguarda la sicurezza invece è sempre meglio usare le funzioni più adatte per ripulire gli input, ma almeno mi fa piacere che qualcuno ha capito fin da subito di non fidarsi mai di ciò che scrivono gli utenti.

Personalmente per stare tranquillo (oltre i real_escape) effettuo anche escape dei singoli caratteri convertendoli in entità html, come il punto e virgola il percento ed altri..

Al seguente http://www.asciitable.it/ascii.asp si trova una tabella dei codici ascii dove c'è la conversione di ogni singolo carattere in esadecimale o come entità html che ho trovato davvero molto utile.