Criando um Chat em ASP.NET em 1 minuto

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!