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:

<BGSOUND id="sound" src="">

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!

25 comentários:

Anônimo disse...

Thiago eu consigo colocar uma tela de login e associar ao chat?

Thiago Marçal disse...

Patrícia,

Sim, pode-se fazer esse atrelamento. No caso você pode criar duas páginas: uma para o login e outra para o chat. Na página do login faça todo o processo de autenticação e dê um redirecionamento para a página do chat. Então, no chat, insira o login como atributo na propriedade UserName do componente do chat, daí cada usuário do chat será associado ao seu respectivo login.

Anônimo disse...

Tiago é possivel fazer algo que minimize o popup e quando ouver alguma mensagem ele comece a Piscar

Cristiano

Thiago Marçal disse...

Possível é, basta que adicione seu script na parte:

if (document.hasFocus.id == 'WF_textInput') {
msgOut.scrollTop = msgOut.scrollHeight;
alert("Passei aqui!");
}

No momento não tenho tal script mas basta adicioná-lo nessa sessão.

Anônimo disse...

Funciona em asp.net 4.0?

Thiago Marçal disse...

Não testei, mas deve funcionar sim. Utilizei a versão 3.5.

Anônimo disse...

Funcionaou no asp.net 4.0 perfeitamente, só não sei como selecionar alguem para enviar uma mensagem privada no chat.

Thiago Marçal disse...

Ok, obrigado pelo feedback. Para o envio de mensagem privada também não fiz implementação disso, mas acho que criando um método a parte deve funcionar.

Anônimo disse...

Thiago, me ajuda com uma coisa? Por que quando posto alguma coisa fica a frase e um monte de � abaixo? E como faço para pegar o nome da pessoa?

Abraços e ótimo blog!

Renan M.

Thiago Marçal disse...

Renan,
Teve outra pessoa que me falou da mesma coisa, contudo não consegui simular esse erro. Já verificou o charset de sua aplicação? Adicione no cabecalho:

meta http-equiv="Content-Type" content="text/html; charset=utf-8"

E também verifique o tipo de documento está configurado a página:

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
html xmlns="http://www.w3.org/1999/xhtml"

E no web.config adicione:
globalization culture="pt-BR"

Obs: tive que remover a tag de sinal maior e menor senão não iria aparecer.

E para obter o nome da pessoa no chat use o atributo UserName ou AJAX_getActiveUsers para obter o nome de todos os usuário da sala.

Anônimo disse...

no browser do chromos, firefox e safari quando digitamos a mensagem e enviamos o corpo da mensagem fica cheio e de caracteres estranhos. Tem como resolver?

Anônimo disse...

o codigo para vb.net 2005, 2008 e 2010

para salva o log é
Protected Sub Grava_Log(sender As Object, e As WebFurbish.JaxterMessageEventArgs)
Dim sala As String = e.RoomName
Dim usuario As String = e.UserName
Dim mensagemExibida As String = e.Message
Dim mensagemHtml As String = e.MessageHTML
Dim hora As String = DateTime.Now.ToString("dd/MM/yyyy HH:mm:ss")
' Grava o log em banco ou em arquivo
End Sub

tutorial disse...

Ola Galera eu gostaria muito de saber, se vcs sabe me explicar como fasso para mandar, uma mensagem direto numa sala de bate papo, tipo da UOL eu ja criei um projeto. tudo so falta isso, tipo nao quero que passe a mensagem na caixa de texto, do site e sim mande direto Espero resposta ...... mais uma coisa eu criei o projeto no visual basic 2008 ok ate ++++

obs. eu quero sabe como manda direto a frase para dentro da sala e nao pase pela caixa de texto.... brigado espero resposta

Thiago Marçal disse...

Utilize variável de aplicação (Application) ou veja outros exemplos em:
http://www.codeproject.com/Articles/8307/Simple-Chat-Application-in-ASP-NET
http://code.msdn.microsoft.com/CSASPNETAJAXWebChat-c4c9b8fe
http://www.junnark.com/Blog/Detail/2

tutorial disse...

Thiago Marçal ....muito oubrigado pela sua atençao

mais o que eu quis dizer foi como mando uma mensagem dentro de uma sala de bate papo, tipo da UOL, sem passar pela caixa de texto do site, (obs. o programa e tipo um spammer ok) mais eu nao quero que a frase, que mando no chat passe pela caixa de texto do site, e sim va direto... e meio complicado de explicar mais se voce for neste site : http://hotlinks.gedan.com/downloads.php?ID=2
e ver o tipo de programa, que falo vc vai me entender, tipo ele manda mensagens automaticas para as salas de bate papo, eu ja criei um mais para finalizar falta isso, (mensagem va direto sem pasar pela caixa de texto do site) ... espero resposta aguardo, e mais uma vez muito oubrigado pela sua atençao.

Thiago Marçal disse...

Entendi o que quis dizer, contudo nunca fiz algo do tipo pois você precisa entender um pouco o mecanismo do outro lado para que faça um envio direto (o que só um spammer ou hacking poderia entender melhor). Se souber de algo, posto aqui, mas no momento nenhuma idéia de como fazer isso direto.

Fabio Visual basic 2008 disse...

Bom mais mesmo assim muito oubrigado pela sua atenção Thiago Marçal ...

Anônimo disse...

Boa noite Thiago, achei muito interessante esse chat, mas a licença desse componente é gratuíto para uso livre ou comercial? Ele tem prazo para expirar?

Thiago Marçal disse...

Ele é gratuito, contudo foi descontinuado.

Anônimo disse...

Olá Thiago, o chat é muito legal, mas uma dúvida: toda vez que eu reinicio o visual studio ele perde a referência da pasta Jaxter, e quando tento trocar o tema, aparece:
Could not find a part of the path 'C:\Program Files\Microsoft Visual Studio 10.0\Common7\IDE\JaxterChat\Themes\'.
Acredito que isso também seja um bug, existe algo a se fazer para solucinar? Grato.

Thiago Marçal disse...

Não que saiba. Mas faça o seguinte: copie a pasta do Jaxter nesse local para ver se ele carrega os dados.

Oficina de Artes disse...

Bom Dia!
Estou tentando implementar o JaxterChat no meu projeto porém quando arrasto o componente na tela, ele exibe a seguinte mensagem:"Required files missing from directory - JaxterChat".
A pasta dele já encorporada em meu projeto,e mesmo assim a mensagem aparece no componente.
Se alguém puder ajudar, eu agradeço.

Obrigada, Letícia.

Anônimo disse...

Oi leticia, no inicio tive o mesmo problema. Resolvi assim:
Abra o Windows explorer e cola na barra de endereço:
C:\Program Files (x86)\Microsoft Visual Studio 10.0\Common7\IDE
Copia e cola a pasta la que vai da certo.
Abre o VS2010, arrasta e cola no seu projeto o controle JaxterChat que vai dar

Anônimo disse...

OK

Mariana Andrade Roberto disse...

Olá Thiago,
tem como você colocar o link do download do JaxterChat de novo.Nem um dos dois estão indo.
Obrigado.

Postar um comentário