Para quem quer ter um chat em seu web site, esse componente ?? uma m??o na roda. Muito f??cil de ser utilizado e configurado, apesar de seus bugs (irei solucion??-los no fim do post). Em poucos segundos voc?? tem um chat funcional! A Web Furbish desenvolveu esse componente e pode ser encontrado tanto aqui quanto aqui e em v??rios mirros pela net. Vamos ao desenvolvimento…
Extraia os arquivos em um local onde poder?? busc??-los. Agora crie um novo Web Site. Se for sua primeira vez usando o componente, primeiramente, deve-se adicionar o novo controle ao ToolBox do Visual Studio. Para isso, clique com o bot??o direito em algum local onde ?? exibido os itens e escolha a op????o Choose Items:
Quando surgir a caixa de sele????o de componentes, na aba .NET Framework Components, clique no bot??o Browse… para selecionar a DLL JaxterChat.dll na pasta onde extraiu os arquivos a princ??pio. Clique em OK para carreg??-la. Ver?? que ela foi adicionada ao ToolBox. Esse passo foi o mais dif??cil! Em seguida copie a pasta JaxterChat (que havia junto ?? DLL) e incorpore-o a seu projeto. Nessa pasta cont??m arquivos de imagem, som, etc. Agora ?? simples: arraste-o para a p??gina para que ele seja adicionado. Pronto! Voc?? j?? tem seu chat…
O resto ?? apenas configura????o: tema, tempo de atualiza????o, usar som, nome dos labels, etc. Veja como ficou o meu!
Tranquilo e pr??tico, n??o? Antes dos bugs, vamos a alguns questionamentos?
1) Como fa??o para ter v??rias salas?
Voc?? n??o precisar criar v??rias p??ginas para a cada sala. Basta que, no Page_Load, atribua o nome da sala ao controle. Exemplo: Chat.RoomName = “Blog”; O controle ir?? se encarregar de fazer a separa????o dos usu??rios de acordo com o nome da sala.
2) Como gravar o log das conversas?
Crie um m??todo para o OnMessagePosted do chat. Voc?? pode gravar em banco ou em arquivo. Ficaria mais ou menos assim:
protected void Grava_Log(object sender, WebFurbish.JaxterMessageEventArgs e)
{
string sala = e.RoomName;
string usuario = e.UserName;
string mensagemExibida = e.Message;
string mensagemHtml = e.MessageHTML;
string hora = DateTime.Now.ToString(“dd/MM/yyyy HH:mm:ss”);
// Grava o log em banco ou em arquivo
}
3) Como enviar mensagens ??s salas (avisos de administra????o, etc) igual a um Broadcast?
Esse ?? um pouco mais complicado e demorado, ent??o irei explicar em linhas gerais como seria:
- Pegaria todas as sala usando o m??todo GetRoomList();
- E para cada sala faz-se o envio atrav??s do m??todo SendCustomMessage().
Um exemplo seria: Chat.SendCustomMessage(“Nova not??cia no blog!”, “Administra????o”, “Blog”, false);
O par??metro false indica que essa mensagem n??o ser?? processada em log (ou seja, n??o parass?? pelo m??todo do OnMessagePosted).
E n formas que h?? de customizar o chat para trabalhar da forma como desejar. Pois bem, agora vamos aos bugs encontrados. Quando levantei esses bugs enviei um e-mail para eles mas n??o obtive resposta at?? o momento (tamb??m nem tentei mais… :P).
Bug 1: A cada mensagem entrada, a barra de rolagem ao inv??s de acompanhar as mensagens, ela fica sempre apontada para o topo. Ou seja, ela n??o desce…
Notamos isso quando come??a a encher de mensagens. A barra ao inv??s de rolar automaticamente para baixo, fica estagnada no topo. Analisando o JavaScript que ele gera, verifiquei que h?? um problema na fun????o WF_goToBottomScroll. Da??, como n??o posso apagar ela, criei uma outra com o mesmo nome. Como h?? sobrecarga ela ser?? executada tamb??m. ?? armengue, mas ?? uma solu????o. Como funciona essa solu????o? A cada 0 segundos verifico se o foco est?? no campo de texto digitado: se estiver, a barra da div rola automaticamente para baixo. Para que isso funcione, baixe esse script aqui para fazer uma varredura de controles HTML. E adicione o seguinte bloco de c??digo JS na p??gina que cont??m o chat:
window.onload = function() {
setFocusTracking();
sizeMsgOut = document.getElementById(‘WF_msgOut’).scrollHeight;
setTimeout(“WF_goToBottomScroll(‘WF_msgOut’);”, 0);
}
function WF_goToBottomScroll(elemento) {
var msgOut = document.getElementById(elemento);
if (document.hasFocus) {
if (document.hasFocus.id == ‘WF_textInput’)
msgOut.scrollTop = msgOut.scrollHeight;
}
setTimeout(“WF_goToBottomScroll(‘” + elemento + “‘);”, 0);
}
Bug 2: O som n??o funciona!
Quando vi que iria ter som, pensei: “Bala!”. Mas da?? ele exige Java para rodar. Pensei novamente: “Tranquilo! Hoje na net, em sites de banco, tem que ter Java, logo pro chat vai ser pr??-requisito ter tamb??m.”. Instalei a vers??o mais recente e n??o funcionou! Porque, eu n??o sei. Como o componente ?? fechado, a ??nica coisa que deu para ver ?? que ele chama uma classe Java SoundApplet.class j?? compilada. Enfim, providenciei outra solu????o: coloquei a propriedade EnableSound como false e adicionei algumas linhas ao script WF_goToBottomScroll para tocar um som a cada vez que ?? dado uma entrada de mensagem. Esse som ?? puro JavaScript! Primeiro, adicione uma tag de som em background em qualquer local da p??gina, assim:
Depois crie uma vari??vel global var sizeMsgOut = 0; antes do window.onload . Ou seja, estou criando uma vari??vel global que ir?? armazenar o tamanho de minha div a cada momento e quando entrar na p??gina pela primeira vez ter?? valor 0. Agora, adicione as linhas abaixo na fun????o WF_goToBottomScroll antes do setTimeout:
if (document.getElementById(‘WF_msgOut’).scrollHeight != sizeMsgOut) {
document.all.sound.src = “JaxterChat/Sounds/alert.au”;
sizeMsgOut = document.getElementById(‘WF_msgOut’).scrollHeight;
}
A cada itera????o da fun????o, verifico se o tamanho da div que cont??m as mensagens ?? diferente do valor armazenado na vari??vel. Se for ?? porque entrou nova mensagem logo deve tocar o som.
Esses foram dois bugs que encontrei quando estava usando-o. Pode ser que haja outros que n??o encontrei. Se n??o tiver ?? bom, pois ?? um chat bem legalzinho e f??cil e manipular. At?? mais!