ASP – Criando um chat com Ajax

Veremos hoje como criar um bate-papo para se comunicar em tempo real com todos os usuários. A realização deste pedido é bem simples, de um ponto de vista prático,
mas pode se tornar bastante complexa, mas não no código da sua
estrutura, dado que envolvem uma filosofia (relativamente) nova como o Ajax.

Abaixo está uma lista de arquivos que usamos no projeto, acompanhado
de uma explicação dos mesmos.
chat.mdb – usar um banco de dados para armazenar as mensagens em vez
de variáveis aplicação.
config.asp – é o arquivo de configuração do projeto, contendo
cabeçalhos para uso em páginas e a conexão ao banco de dados.
default.asp – é a página de acolhimento bate-papo
chat.asp – é a interface do bate-papo para escrever e ler mensagens.
messaggio.asp – é o arquivo que armazena as mensagens no banco de
dados.
chat.js – é o arquivo Javascript que através XMLHTTP, invoca o
arquivo ASP que mostra mensagens na tela,
ajax.asp – os arquivos para mostrar mensagens na tela!

Crie uma pasta no seu servidor web chat_ajax, onde você irá testar o
resultado, no seguinte endereço:

ttp://localhost/chat_ajax/

Explique o uso dos arquivos citados, teatralmente falando.

A base de dados

Crie o arquivo chat.mdb, crie a tabela mensagens, composto pelos
seguintes campos:

ID – Counter
username – Texto, tamanho 30
mensagem – texto, comprimento 255

Salve e feche.

O arquivo de configuração

Crie o arquivo config.asp:

<%
   Option Explicit
   On Error Resume Next
   Response.Buffer = True
   Response.Expires = 0

   Dim sc, cn, rs
   sc = "driver={Microsoft Access Driver (*.mdb)};dbq="
   sc = sc & Server.MapPath("chat.mdb")

   Function ConnOpen()
	   Set cn = Server.CreateObject("ADODB.Connection")
	   Set rs = Server.CreateObject("ADODB.Recordset")
	   cn.Open sc
   End Function
   Function ConnClose()
	   Set rs = Nothing
	   cn.Close
	   Set cn = Nothing
   End Function
%>

Como mencionado na descrição da estrutura, o script
não especifica os cabeçalhos das páginas Inicial e Conectar ao banco de
dados, utilizando dois recursos personalizados que necessitamos

A página de login e de bate-papo

Crie o arquivo default.asp que, como previsto no título, será a página
de login e de bate-papo.

Para agilizar operações estreitamente relacionadas com o artigo atual, não iremos criar uma verdadeira login, permitindo que os
usuários escolham o nome de usuário que escolhem.

Certamente, desta forma é possível duplicação dos apelidos dos
visitantes, e é por isso que o leitor poderá implementar um sistema de
login em si.

código do arquivo:

<%@LANGUAGE = VBScript%>
<html>
<head>
<title>Um chat ASP/AJAX</title>
</head>
<body>
<h1>chat ASP /AJAX</h1>
<p>
<form method="post" action="default.asp?login=OK">
Selecione username<br><br>
<input type="text" name="username" maxlength="10">
<input type="submit" value="Entrar">
</form>
</p>
<%
   If Request.QueryString("login") = "OK" Then
	   Session("username") = LCase(Request.Form("username"))
	   Response.Redirect "chat.asp"
   End If
%>
</body>
</html>

Eu recomendo não alterar o valor atribuído à propriedade Comprimento
Máximo 10, uma vez que os usuários serão armazenadas no banco de dados
que tem o seu campo máximo de 10 caracteres. Se você mudar em um local, terá também que mudar no outro.

A interface bate-papo

<%@LANGUAGE = VBScript%>
<%
   If Session("username") = "" Then
	   Response.Redirect "default.asp"
   End If
%>
<html>
<head>
<title>chat ASP/AJAX</title>
<style type="text/css">
#CHAT
{
   background: #DDDDDD;
   width: 500px;
   height: 300px;
   overflow: Auto;
}
#MSG
{
   position: Absolute;
   visibility: Hidden;
}
</style>
<script type="text/javascript" src="chat.js"></script>
</head>
<body>
<h1>chat ASP/AJAX</h1>
<p>Bem-vindo <b><%=Session("username")%></b></p>
<div id="CHAT"></div>
<form name="chat" method="post" action="messaggio.asp" target="MSG">
<input type="text" name="messaggio" size="70" maxlength="255">
<input type="submit" value="CHAT">
</form>
<iframe src="messaggio.asp" name="MSG" id="MSG"></iframe>
</body>
</html>

Primeiro, verifique para ter certeza de que há uma sessão ativa.

Não altere o valor do texto 255 Comprimento Máximo, pela mesma razão que falei acima.

No final da página, crie uma moldura, de acordo com o nome e
a identificação MSG. Vemos que se refere à forma com uma meta para este
item.

O texto camada CHAT te dá o tamanho e a rolagem automática, assim
como uma cor de fundo para distingui-la opticamente.

No final do CSS em cabeçalhos, o Javascript irá chamar o arquivo
chat.js.

A inserção de uma nova mensagem

Chegou a vez do arquivo messaggio.asp, que é chamado dentro do
iframe e desempenha um importante trabalho: a inserção de mensagens
dos usuários.

Código:

<%@LANGUAGE = VBScript%>
<!--#include file="config.asp"-->
<%
   Dim messaggio
   messaggio = Server.HTMLEncode(Request.Form("messaggio"))
   If messaggio <> "" Then
	   Call ConnOpen()
	   rs.Open "messaggi", cn, 3, 3
	   rs.AddNew
	   rs("username") = Session("username")
	   rs("messaggio") = messaggio
	   rs.Update
	   rs.Close
	   Call ConnClose()
	   Response.Redirect "messaggio.asp"
   End If
%>

Ao incluir o arquivo de configuração para o banco de dados estamos
inserindo e recuperando a mensagem. Se ela realmente foi inserida, irá
executar a gravação.

No final você remete à própria página, eliminando, assim, a atualização escrupulosa da página por usuários.

O arquivo Javascript/AJAX

O arquivo de Javascript como código é bastante longo, mas as funções que
levamos em consideração são apenas as três primeiras.

Nós entendemos que o código completo:

function Aggiorna()
{
   return Richiesta();
}
window.setInterval("Aggiorna()", 3000)

var XMLHTTP;

function Richiesta()
{
   XMLHTTP = RicavaBrowser(CambioStato);
   XMLHTTP.open("GET", "ajax.asp", true);
   XMLHTTP.send(null);
}

function CambioStato()
{
   if (XMLHTTP.readyState == 4)
   {
	   var R = document.getElementById("CHAT");
	   R.innerHTML = XMLHTTP.responseText;
   }
}

function RicavaBrowser(QualeBrowser)
{
   if (navigator.userAgent.indexOf("MSIE") != (-1))
   {
	   var Classe = "Msxml2.XMLHTTP";
	   if (navigator.appVersion.indexOf("MSIE 5.5") != (-1));
	   {
		   Classe = "Microsoft.XMLHTTP";
	   } 
	   try
	   {
		   OggettoXMLHTTP = new ActiveXObject(Classe);
		   OggettoXMLHTTP.onreadystatechange = QualeBrowser;
		   return OggettoXMLHTTP;
	   }
	   catch(e)
	   {
		   alert("Erro: ActiveX não serão publicados!");
	   }
   }
   else if (navigator.userAgent.indexOf("Mozilla") != (-1))
   {
	   OggettoXMLHTTP = new XMLHttpRequest();
	   OggettoXMLHTTP.onload = QualeBrowser;
	   OggettoXMLHTTP.onerror = QualeBrowser;
	   return OggettoXMLHTTP;
   }
   else
   {
	   alert("O exemplo não funciona com outros navegadores!");
   }
}

A função Update (), chamada no corpo da página chat.asp, solicita o
pedido, incentivando a cada 3 segundos, para assegurar uma contínua, mas
não demasiado intrusiva, refresh (em back-office) Page e atualização
mensagens.

A mencionada função Pedido () é realmente necessária, via XMLHTTP, no
arquivo mensagens.

A função CambioStat () imprime mensagens na tela, no nível de texto identificado
como bate-papo, enquanto que a função RicavaBrowser () verifica que o atual navegador suporta AJAX.

Recordando as mensagens via ASP e AJAX

Chegamos à última etapa.

Código ajax.asp:

<%@LANGUAGE = VBScript%>
<!--#include file="config.asp"-->
<%
   Call ConnOpen()
   rs.Open "SELECT TOP 10 * FROM mensagens ORDER BY id DESC", cn, 1
   If rs.EOF = False Then
	   With Response
		   While rs.EOF = False
			   .Write "<b>" & rs("username") & "</b><br>"
			   .Write rs("messaggio") & "<br><br>"
		   rs.MoveNext
		   Wend
	   End With
   End If
   rs.Close
   Call ConnClose()
%>

De 0 a 10, o quanto você recomendaria este artigo para um amigo?

Powered by: