<?php// Nome del buffer, da creare a mano e stabilire permessi di lettura e scrittura sul server$messages_buffer_file='messages.json';// Numero dei messaggi mantenuti$messages_buffer_size=20;if(isset($_POST['content'])andisset($_POST['name'])){// Apre e lege il file dei messaggi$buffer=fopen($messages_buffer_file,'r+b');flock($buffer,LOCK_EX);$buffer_data=stream_get_contents($buffer);// Aggiunge un messaggio$messages=$buffer_data?json_decode($buffer_data,true):array();$next_id=(count($messages)>0)?$messages[count($messages)-1]['id']+1:0;$messages[]=array('id'=>$next_id,'time'=>time(),'name'=>$_POST['name'],'content'=>$_POST['content']);// Rimuove i messaggi in eccedenzaif(count($messages)>$messages_buffer_size)$messages=array_slice($messages,count($messages)-$messages_buffer_size);// Riscrive e chiude il file dei messaggiftruncate($buffer,0);rewind($buffer);fwrite($buffer,json_encode($messages));flock($buffer,LOCK_UN);fclose($buffer);exit();}?><html lang="it"><head><!--Potete utilizzare il codice di questa pagina se inserite il nome del sito www.didilav.it e dell'autore Stefano Boscolo--><!--You can use the code of this page if you insert the site name www.didilav.it and author name Stefano Boscolo--><!-- Un grazie per il codice a Stephan Soller http://arkanis.de/projects/simple-chat/--><title>DiDiLaV Chat</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><meta name="author" content="Stefano Boscolo"><meta name="description" content="DiDiLaV - Benvenuti in DiDiLaV nello spazio per la chat"><meta name="keywords" content="Stefano Boscolo didattica informatica fatto di briciole DiDiLaV html xml javascript js vbscript css java php mysql lezioni sql database c++ visual basic vb vbasic"><link href="layout.css" rel="stylesheet" type="text/css"/><link rel="stylesheet" type="text/css" href="fermistyle.css"><style>
html {background-image:url("Carta.jpg");margin:0em;padding:0;}
h1, h2 {text-align:center;}
div {width:530px;padding:25px;border:5px solid black;border-radius:10px;background:#cbddc8;margin:0 auto}
input[type="number"]{width:35px;}
input[type="radio"]{margin-left:30px;}
input[type="checkbox"]{margin-left:30px;}
button {background:linear-gradient(-45deg,#cbddc8,#ddd);border-radius:10px;}
textarea {width:95%;height:300px;display: block;margin-left: auto;margin-right: auto;}
ol {background:#cbddc8;padding:20px;border-radius:10px;}
li {background:#ddd;padding:5px;margin-left:35px;border-radius:10px;}#YourContent{display:none;}
p.subtitle {margin:0;padding:0000.125em;font-size:0.77em;color: gray;}
ul#messages {overflow: auto;height:15em;margin:1em0;padding:03px;list-style: none;border:1px solid gray;}
ul#messages li {margin:0.35em0;padding:0;}
ul#messages li small {display: block;font-size:0.59em;color: gray;}
ul#messages li.pending {color:#aaa;}
form {font-size:1em;margin:1em0;padding:0;}
form p {position: relative;margin:0.5em0;padding:0;}
form p input {font-size:1em;}
form p input#name {width:10em;}
form p button {position: absolute;top:0;right:-0.5em;}
ul#messages, form p, input#content {width:40em;}
pre {margin:50px;font-size:0.77em;}</style><script type="text/javascript" src="jquery-1.4.2.min.js"></script><script type="text/javascript">// <![CDATA[
$(document).ready(function(){// Rimuove l'elenco "loading…"
$('ul#messages > li').remove();
$('form').submit(function(){var form = $(this);var name = form.find("input[name='name']").val();var content = form.find("input[name='content']").val();// Invia il messaggio solamente se è stato scritto qualcosaif(name ==''|| content =='')returnfalse;// Aggiunge un messaggio di "attesa" (non ancora confermato dal server) non appena la richiesta POST è terminato. Il Metodo // text () controlla automaticamente HTML in modo che nessuno possa danneggiare il client.
$.post(form.attr('action'),{'name': name,'content': content},function(data, status){
$('<li class="pending" />').text(content).prepend($('<small />').text(name)).appendTo('ul#messages');
$('ul#messages').scrollTop( $('ul#messages').get(0).scrollHeight );
form.find("input[name='content']").val('').focus();});returnfalse;});//funzione di controllo che cerca i nuovi messaggivar poll_for_new_messages =function(){
$.ajax({url:'messages.json', dataType:'json', ifModified:true, timeout:2000, success:function(messages, status){// Salta le risposte con dati non modificatiif(!messages)return;//Rimuove i messaggi in attesa dalla lista, saranno sostituiti dai messaggi dal server
$('ul#messages > li.pending').remove();//Ottiene l'ID dell'ultimo messaggio inserito o parte da -1var last_message_id = $('ul#messages').data('last_message_id');if(last_message_id ==null)
last_message_id =-1;//Aggiunge alla lista solamente se non lo abbiamo già inserito, controlla l'ID dell'ultimo inseritofor(var i =0; i < messages.length; i++){var msg = messages[i];if(msg.id > last_message_id){var date =new Date(msg.time *1000);
$('<li/>').text(msg.content).
prepend( $('<small />').text(date.getHours()+':'+ date.getMinutes()+':'+ date.getSeconds()+''+ msg.name)).
appendTo('ul#messages');
$('ul#messages').data('last_message_id', msg.id);}}//rimuove gli ultimi 50 messaggi e sposta la lista sui nuovi
$('ul#messages > li').slice(0,-50).remove();
$('ul#messages').scrollTop( $('ul#messages').get(0).scrollHeight );}});};// Ripete la funzione di controllo ogni due secondi
poll_for_new_messages();setInterval(poll_for_new_messages,2000);});// ]]></script><script src="jquery.js" type="text/javascript"></script><script src="matrix.js" type="text/javascript"></script></head><body"> <canvas id="q" width="100%" height="120">Questo browser non supporta i canvas</canvas> <header>DiDiLaV, Chat</header> <object width="100%" data="menu.html"></object> <h2>HTML + CSS + Javascript + PHP</h2> <br><br><br><br> <div> <ul id="messages"> <li>CARICANDO…</li> </ul> <form action="<?=htmlentities($_SERVER['PHP_SELF'],ENT_COMPAT,'UTF-8');?>" method="post"> <p> <input type="text" name="content" id="content" /> </p> <p> <label> Nome: <input type="text" name="name" id="name" value="Passavo per caso" /> </label> <button type="submit">Invia</button> </p> </form> </div></body></html>