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 mensagensmsg.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 mensagemagora 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
