O sistema é bem simples é criado com CGI/PERL+JavaScript, mais nada impede você de substitui o CGI/PERL pelo PHP ou pelo ASP.
Chega de fala e vamos logo aos codigos, primeiro vamos fazer a pagina de entrar na sala.
(OBS: é necessario um pouco de conhecimento em CGI/PERL e JavaScritp para saber fazer algumas alterações).
index.cgi
#!/usr/bin/perl print "Content-type: text/html\n\n"; #imprimi o cabelhaço # abaixo imprimi o formulario para entrar na sala print qq~ <HEAD><TITLE>MeuChat</TITLE></HEAD> <form method="POST" action="sala.cgi"> Seu nome: <input type="text" name="nome"><br> <input type="submit" value="Entar"></form> ~;Agora vamos criar a parte que cria os frames da sala
sala.cgi
#!/usr/bin/perl print "Content-type: text/html\n\n"; #imprimi o cabelhaço use CGI; # carregamos o modulo CGI $cgi = new CGI; $nome = $cgi->param("nome"); #criamos uma variavel com o conteudo do campo nome do formulario anterior if(!$nome){ # se a variavel for nula print qq~ <HEAD><TITLE>MeuChat</TITLE></HEAD> Desculpe, mas você não digitou um nome para entrar na sala! ~; }else{ # se nao mostra os frames print qq~ <HTML> <HEAD><TITLE>MeuChat</TITLE></HEAD> <FRAMESET ROWS="*,80" FRAMEBORDER="0" BORDER="false"> <FRAME SRC="msg.cgi?nome=$nome" SCROLLING="auto" name="cima"> <FRAME SRC="envia.cgi?nome=$nome" SCROLLING="no"> </FRAMESET> </HTML> ~; # ja criamos na tela, os frames, agora vamos cadastrar no bd das mensagem # uma mensagem avisando que você entrou na sala open(MSG, ">>msgs.dat"); # abre o arquivo print MSG "$nome|<FONT COLOR=#0000FF>** $nome entrou na sala **</FONT>\n"; #grava as informações no arquivo close(MSG); # fecha o arquivo }pronto, ja temos a parte que cria os frames, agora vamos a parte que mostra as mensagens
msg.cgi
#!/usr/bin/perl print "Content-type: text/html\n\n"; #imprimi o cabelhaço use CGI; # carregamos o modulo CGI $cgi = new CGI; $nome = $cgi->param("nome"); #criamos uma variavel com o conteudo do campo nome do formulario anterior open(MSG,"msgs.dat"); # abrimos o bd somente para leitura @msgs=<MSG>; #colocamos todo o conteudo em uma variavel close(MSG); # fechamos o arquivo # agora vamos imprimi o HTML inicial do chat # que será responsavel por atualizar a parte de mensagem e posicionar sempre no fim das mensagens print qq~ <HEAD><TITLE>MeuChat</TITLE></HEAD> <META HTTP-EQUIV="REFRESH" CONTENT="5;?acao=msgs"> <BODY onLoad="this.scrollTo(0,65000);"> ~; foreach (@msgs){ #damos loop na variabel chomp; # removemos as linhas em branco da variavel ($usuario,$msg) = split(/\|/,$_); # separamos os dados do bd #agora vemos se a mensagem é do usuario ou de outro usuari if($usuario eq $nome){ # se for, destacamos a mensagem a ele print qq~ <table border="0" width="100%" bgcolor="#EEEEEE"> <tr><td>$usuario escreveu: $msg</td></tr></table> ~; }else{ # se não for, mostra normal print qq~ $usuario escreveu: $msg<br> ~; } #finalizamos o if } # finalizamos o loop (foreach)
Agora vamos ao arquivo envia.cgi, que será responsavel por enviar as menagens
envia.cgi
#!/usr/bin/perl print "Content-type: text/html\n\n"; #imprimi o cabelhaço use CGI; # carregamos o modulo CGI $cgi = new CGI; $nome = $cgi->param("nome"); #criamos uma variavel com o conteudo do campo nome do formulario anterior $msg = $cgi->param("msg"); #criamos uma variavel com o conteudo do campo mensagem # agora vamos ver se o campo campo msg é nulo ou não, pois se não for nulo, é por que enviaram mensagem if($msg){ # se o campo tiver algo open(MSG, ">>msgs.dat"); # abre o arquivo print MSG "$nome|$msg\n"; #grava as informações no arquivo close(MSG); # fecha o arquivo }#enceramos a verificação # agora mostramos o formulario de envio das mensagens print qq~ <HEAD><TITLE>MeuChat</TITLE></HEAD> <script> function init(){ if(flag_imtyping == false){ document.chatsuporte.msg.focus(); }} function verifica(){ cima.location.href=('msg.cgi?nome=$nome'); document.chatsuporte.submit(); } </SCRIPT> <script src="funcoes.js"></script> ~; # o javascript acima, da foco ao formulario de mensagem e carrega o javascript responsavel # pelo envio da informação de queme sta digitando uma mensagem # abaixo segue o resto do formulario print qq~ <BODY BGCOLOR="#006699" TEXT="#FFFFFF" LINK="#FF0000" onload="init()" onsubmit="return verifica();"> <FORM METHOD="POST" ACTION="envia.cgi" name="chatsuporte"> <FONT SIZE=2> Digite sua mensagem:</FONT> <TABLE BORDER=0 CELLSPACING=0> <TR> <TD> <INPUT NAME="msg" SIZE="30" ONKEYDOWN="return imtyping()"> <INPUT TYPE="submit" value="Enviar"> <input type="hidden" name="nome" value="$nome"> <input type="hidden" name="typing" value="no"> </TD> </tr> </TABLE></FORM> ~;
Agora vamos ao conteudo do arquivo funcoes.js, que é onde fica os codigosd que mostra qen ta digitando mensagem
funcoes.js
function netscapeKeyPress(e) { if (e.which == 13) returnsend(); } // aqui corrigimos para funcionar no netscape function microsoftKeyPress() { if(ie4){ if (window.event.keyCode == 13) returnsend(); } } // aqui corrigimos para funcionar no IE if (navigator.appName == 'Netscape') { window.captureEvents(Event.KEYPRESS); window.onKeyPress = netscapeKeyPress; } ns4 = (document.layers)? true:false; ie4 = (document.all)? true:false; cscontrol= new Image; var flag_imtyping = false; function imtyping(){ if (document.chatsuporte.msg.value.length > 2){ if(flag_imtyping == false){ flag_imtyping = true; document.chatsuporte.typing.value="yes"; var u = 'escreve.cgi?' + 'cmd=startedtyping' + '&nome=' + escape(document.chatsuporte.nome.value); cscontrol.src = u; } } }Se você entender de javascript, você irá notar que ele cria uma especie de imagem ou variavel chamando um script(no caso o escreve.cgi), que é resoponsavel por gravar quem está digitando uma mensagem
agora vamos criar o arquivo que grava quem ta digitando a mensagem
escreve.cgi
#!/usr/bin/perl print "Contest-type: text/html\n\n";# imprimi o cabeçalho use CGI; # carregamos os modulo $cgi = new CGI; $nome = $cgi->param("nome"); # cria a variavel com o nome do usuario # agora cadastra no bd as informações open(MSG, ">>msgs.dat"); print MSG "$nome|$nome esta digitando uma mensagem\n"; close(MSG);
Pronto, agora ja temos um chat simples, mais com tecnologia de grandes sistemas, você pode melhora-lo colocando mais funcções, como rostinhos, formulario do tipo "Fala com, Escreve com, Grita com....etc) e um campo para escolher o usuario e ficar no reservado, ai vai da sua criatividade, força de vontade e tempo, pois isso é coisa demorada.
Espero que eu tenha ajudado.
Contato, envie e-mail para ghpnet@ig.com.br
fuii