ASP – Chat com AJAX

• Tweet
• Sharebar

• Tweet

Este artigo irá mostrar como criar um bate-papo muito legal de 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) como novo 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!

Criar uma pasta no seu servidor Web chat_ajax. Onde você irá testar o resultado, no seguinte endereço:

[url="http://localhost/chat_ajax/"]http://localhost/chat_ajax/[/url]

Explique o uso dos arquivos citados, teatralmente falando.

A base de dados

Crie o arquivo chat.mdb , criar a tabela mensagens ,composto pelos seguintes campos:
ID – Counter
username – Texto, tamanho 30
mensagem – texto, comprimento 255
Salvar e fechar.

O arquivo de configuração

criar o arquivo config.asp:

Como mencionado na descrição da estrutura visto no anterior, 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, o tópico 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:

chat ASP /AJAX

Eu recomendo a 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.

Ao alterar a uma, necessariamente ser mudado mutuamente.

A interface bate-papo

#CHAT
{
background: #DDDDDD;
width: 500px;
height: 300px;
overflow: Auto;
}
#MSG
{
position: Absolute;
visibility: Hidden;
}

chat ASP/AJAX

Bem-vindo

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 dada acima.

No final da página crie uma moldura em consonância com nome e identificação MSG. Vemos que se refere à forma com uma meta para este item.

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

No final de 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, arquivos chamados dentro do iframe, que desempenha um importante trabalho: a inserção de mensagens dos usuários.

código:


<%
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
%>

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 a própria página, eliminando, assim, a fim de evitar 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 os três primeiros, bastante curto.

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 (), chamado 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, o arquivo mensagens.

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

Recordando as mensagens via ASP e AJAX

Chegámos a última etapa deste sobre a criação de um bate-papo com ASP e AJAX.

código ajax.asp:



<%
Call ConnOpen()
rs.Open "SELECT TOP 10 * FROM messaggi ORDER BY id DESC", cn, 1
If rs.EOF = False Then
With Response
While rs.EOF = False
.Write "" & rs("username") & "
"
.Write rs("messaggio") & "

”
rs.MoveNext
Wend
End With
End If
rs.Close
Call ConnClose()
%>

Escrito por X@nBuRzUm on maio 8, 2010. Arquivado em ASP.net, Banco de Dados, CSS, Javascript, Programação. Você pode seguir as respostas a esse artigo pelo RSS 2.0. Você pode deixar respostas para esse artigo