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↳Banco de dados134 conteúdosSQL ou NoSQL: eis a questão!!Data · mar 2020Banco de dados: como organizar e dar segurança para milhões de dados de loteriasData · mai 20215 serviços gratuitos na cloud para bancos de dados PostgresData · fev 2025Ver tudo em Data → 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↳JavaScript116 conteúdosJavaScript em 2020: O que esperarDev (Back & Front) · jan 2020Campos públicos e privados em classes JavaScript – O que vem por aí no ESNextDev (Back & Front) · abr 201929 anos de JavaScript!Dev (Back & Front) · jan 2025Ver tudo em Dev (Back & Front) → 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:
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:
<%<br /> Option Explicit<br /> On Error Resume Next<br /> Response.Buffer = True<br /> Response.Expires = 0<br /><br /> Dim sc, cn, rs<br /> sc = "driver={Microsoft Access Driver (*.mdb)};dbq="<br /> sc = sc & Server.MapPath("chat.mdb")<br /><br /> Function ConnOpen()<br /> Set cn = Server.CreateObject("ADODB.Connection")<br /> Set rs = Server.CreateObject("ADODB.Recordset")<br /> cn.Open sc<br /> End Function<br /> Function ConnClose()<br /> Set rs = Nothing<br /> cn.Close<br /> Set cn = Nothing<br /> End Function<br />%>
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%><br /><html><br /><head><br /><title>Um chat ASP/AJAX</title><br /></head><br /><body><br /><h1>chat ASP /AJAX</h1><br /><p><br /><form method="post" action="default.asp?login=OK"><br />Selecione username<br><br><br /><input type="text" name="username" maxlength="10"><br /><input type="submit" value="Entrar"><br /></form><br /></p><br /><%<br /> If Request.QueryString("login") = "OK" Then<br /> Session("username") = LCase(Request.Form("username"))<br /> Response.Redirect "chat.asp"<br /> End If<br />%><br /></body><br /></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%><br /><%<br /> If Session("username") = "" Then<br /> Response.Redirect "default.asp"<br /> End If<br />%><br /><html><br /><head><br /><title>chat ASP/AJAX</title><br /><style type="text/css"><br />#CHAT<br />{<br /> background: #DDDDDD;<br /> width: 500px;<br /> height: 300px;<br /> overflow: Auto;<br />}<br />#MSG<br />{<br /> position: Absolute;<br /> visibility: Hidden;<br />}<br /></style><br /><script type="text/javascript" src="chat.js"></script><br /></head><br /><body><br /><h1>chat ASP/AJAX</h1><br /><p>Bem-vindo <b><%=Session("username")%></b></p><br /><div id="CHAT"></div><br /><form name="chat" method="post" action="messaggio.asp" target="MSG"><br /><input type="text" name="messaggio" size="70" maxlength="255"><br /><input type="submit" value="CHAT"><br /></form><br /><iframe src="messaggio.asp" name="MSG" id="MSG"></iframe><br /></body><br /></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%><br /><!--#include file="config.asp"--><br /><%<br /> Dim messaggio<br /> messaggio = Server.HTMLEncode(Request.Form("messaggio"))<br /> If messaggio <> "" Then<br /> Call ConnOpen()<br /> rs.Open "messaggi", cn, 3, 3<br /> rs.AddNew<br /> rs("username") = Session("username")<br /> rs("messaggio") = messaggio<br /> rs.Update<br /> rs.Close<br /> Call ConnClose()<br /> Response.Redirect "messaggio.asp"<br /> End If<br />%>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()<br />{<br /> return Richiesta();<br />}<br />window.setInterval("Aggiorna()", 3000)<br /><br />var XMLHTTP;<br /><br />function Richiesta()<br />{<br /> XMLHTTP = RicavaBrowser(CambioStato);<br /> XMLHTTP.open("GET", "ajax.asp", true);<br /> XMLHTTP.send(null);<br />}<br /><br />function CambioStato()<br />{<br /> if (XMLHTTP.readyState == 4)<br /> {<br /> var R = document.getElementById("CHAT");<br /> R.innerHTML = XMLHTTP.responseText;<br /> }<br />}<br /><br />function RicavaBrowser(QualeBrowser)<br />{<br /> if (navigator.userAgent.indexOf("MSIE") != (-1))<br /> {<br /> var Classe = "Msxml2.XMLHTTP";<br /> if (navigator.appVersion.indexOf("MSIE 5.5") != (-1));<br /> {<br /> Classe = "Microsoft.XMLHTTP";<br /> } <br /> try<br /> {<br /> OggettoXMLHTTP = new ActiveXObject(Classe);<br /> OggettoXMLHTTP.onreadystatechange = QualeBrowser;<br /> return OggettoXMLHTTP;<br /> }<br /> catch(e)<br /> {<br /> alert("Erro: ActiveX não serão publicados!");<br /> }<br /> }<br /> else if (navigator.userAgent.indexOf("Mozilla") != (-1))<br /> {<br /> OggettoXMLHTTP = new XMLHttpRequest();<br /> OggettoXMLHTTP.onload = QualeBrowser;<br /> OggettoXMLHTTP.onerror = QualeBrowser;<br /> return OggettoXMLHTTP;<br /> }<br /> else<br /> {<br /> alert("O exemplo não funciona com outros navegadores!");<br /> }<br />}
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%><br /><!--#include file="config.asp"--><br /><%<br /> Call ConnOpen()<br /> rs.Open "SELECT TOP 10 * FROM mensagens ORDER BY id DESC", cn, 1<br /> If rs.EOF = False Then<br /> With Response<br /> While rs.EOF = False<br /> .Write "<b>" & rs("username") & "</b><br>"<br /> .Write rs("messaggio") & "<br><br>"<br /> rs.MoveNext<br /> Wend<br /> End With<br /> End If<br /> rs.Close<br /> Call ConnClose()<br />%>é Bacharel em Ciência da Computação, pós-graduação não concluída em Inteligência Artificial (IA) pela USFCAR, desenvolvedor de aplicativos WEB e autor de livros para cursos de informática e consultor de web. Com mais de 10 anos de experiência, autor de vários artigos e tutoriais na Web nas tecnologias ASP,SQL,JAVASCRIPT ,ASP.Net,XML , AJAX . e outros recursos. Atualmente trabalha como Coordenador de cursos de T.I.
