Introdução:
Minha primeira sala de chat simples foi escrita em ASP 3.0. Nada mais são do que dois TextBoxes, eles enviam mensagens para variáveis do programa e depois as exibem em uma página que é atualizada a cada segundo. Naquela época, uma sala de bate-papo real tinha que usar Java Applet ou controle ActiveX. Mas tudo isso mudou após a chegada do AJAX. AJAX é um mecanismo de comunicação assíncrona que combina XML e JavaScript. Agora podemos fazer isso apenas com o código do servidor e um pouco de JavaScript. Este artigo apresenta como usar a tecnologia AJAX para construir uma sala de chat simples.
Programa de exemplo
O programa de exemplo é uma sala de chat multiusuário única. Ele mantém uma lista de usuários logados internamente. A lista removerá usuários com sessões expiradas. Ao mesmo tempo, também suporta alguns comandos como /admin Clear para limpar a sala de chat /nick [Nome] para alterar o nome de usuário.
Você também precisa saber que
este programa usa uma classe chamada ChatEngine. Esta classe controla todos os usuários e mensagens. Os usuários são armazenados em uma Hashtable e as mensagens em uma StringCollection:
Hashtable users;StringCollection chat;
Uma instância global do ChatEngine é colocada em Global.asax.cs:
public static UChat.ChatEngine.IChatEngine Engine =new UChat.ChatEngine.ChatEngine();
Uma função JavaScript é usada para exibir de forma assíncrona os dados na variável global na página:
function setTimers(){timeID = window.setTimeout( "updateAll()", refreshRate );}
Use o nome e o ID fornecidos por cada usuário para identificá-los:
public void AddUser(string id, string user){//certifique-se de que o nome do usuário já não existaif(!UserExists(user)){//adicione o usuário à lista de usuários. Add( id, user );//exibe uma mensagem de notificação para todos os usuários chat.Add( this.MakeServerMessage(string.Format(joinedfmt, user ) ));}}
Capturas de tela e etapas de implementação
A página inicial mostra as informações básicas da sala de chat, como quantas pessoas estão na sala de chat e o tamanho do ChatLog.
Para poder entrar na sala de chat, um nome deve ser fornecido.
Quando o botão Login é clicado. O seguinte código será executado:
protected void Login( object sender, EventArgs e ){string user = txtUsername.Text;if( !ValidateNick( user ) ) return;if( Global.Engine.UserExists( user ) ){lblErrorMsg. = "Já existe um usuário com este " +"nome, tente novamente."return;}Response.Redirect( "Server.aspx?action=Login&u=" + user );}
Após alguma validação, o usuário é redirecionado para outra página que utiliza a função AddUser para adicionar o usuário à lista de usuários. Quando tudo isso estiver feito. O usuário será redirecionado para a página Chat.aspx e a seguinte função JavaScript será executada nesta página:
<script type="text/javascript">sniffBrowserType();//Mostra o carregamento.. screenshowLoadScreen();//Define o temporizador javascript e //carrega a lista de usuários e mensagens setTimers();setFocus('mytext');< /script><input type="text" class="mytext"id="mytext" onkeydown="captureReturn(event)">
Quando o usuário insere texto e pressiona Enter. O seguinte código será executado:
// Capture a tecla Enter na caixa de entrada e poste messagefunction captureReturn( event ){if(event. which || event.keyCode){if ((event. which == 13) || ( event.keyCode == 13)){postText();return false;}else {return true;}}}function postText(){rnd++;//Limpar caixa de texto firstchatbox = getElement( "mytext" );chat = chatbox . value;chatbox.value = ""//obter GUID do usuário de urluserid = location.search.substring( 1, location.search.length );//construir URLurl do servidor Ajax = 'Server.aspx?action=PostMsg&u=' + userid + '&t=' +encodeURIComponent(chat) + '&session=' + rnd;//Cria e define a instância //da solicitação XMLHTTP apropriada objectreq = getAjax();//Atualiza a página com a nova mensagemreq.onreadystatechange = function() {if( req.readyState == 4 && req.status == 200 ) {updateAll();}}req.open( 'GET', url, true );req.send( null );}
Feito! Isso é tudo. Nada de especial, baixe o programa de exemplo e entenda o código!
Autor originalDahan Abdo
Programa de exemplo de download
do endereço do artigo original
yueue traduzido
:download local
do codeproject