Introduction
This article describe how to make a chat without Applet or other heavy component.
i'll Ajax to refresh ONLY a <div> container .
The messages will be stored in a application Object. Ajax will creates a javascript proxy for the server�s functions.
you can test the application opening two Internet Explorer and sending messages from each to other
Adding Ajax.dll to the project
-copy and paste Ajax.dll free library into bin directory
you can download from http://ajax.schwarz-interactive.de/csharpsample/default.aspx
Manual:
http://ajax.schwarz-interactive.de/download/AjaxGuide.doc
- Add this reference to the project
- add this to web.config it�s necesary to works with Ajax
<httpHandlers>
<add verb="POST,GET" path="ajax/*.ashx" type="Ajax.PageHandlerFactory, Ajax" />
</httpHandlers>
- add this references to .aspx page
<script language="javascript" src="ajax/common.ashx"></script>
<script language="javascript" src="ajax/SimpleChat.chat,SimpleChat.ashx">
</script>
<script language="javascript" src="ajax/common.ashx"></script>
<script language="javascript" src="ajax/SimpleChat.chat,SimpleChat.ashx">
</script>
SimpleChat-->name of namenspace (Project)
chat-->name of the class of code behind
the .aspx page
<%@ Page Language="vb" AutoEventWireup="false" Codebehind="chat.aspx.vb"
Inherits="SimpleChat.chat"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<title>WebForm1</title>
<meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
<meta name="CODE_LANGUAGE" content="Visual Basic .NET 7.1">
<meta name="vs_defaultClientScript" content="JavaScript">
<meta name="vs_targetSchema"
content="http://schemas.microsoft.com/intellisense/ie5">
<link rel="stylesheet" type="text/css" href="Styles.css">
<script language="javascript" src="ajax/common.ashx"></script>
<script language="javascript" src="ajax/SimpleChat.chat,SimpleChat.ashx">
</script>
<script language="javascript">
var cadenaMsg
function dameMsg_CallBack(response){
if (response.error != null){
document.getElementById('d').innerHTML=(response.error);
return; }
document.getElementById('d').innerHTML=response.value;
setTimeout("chat.dameMsg(dameMsg_CallBack)",3000);
}
</script>
</HEAD>
<body onload="chat.dameMsg(dameMsg_CallBack);">
<form id="Form1" method="post" runat="server">
<div id="clanci">
<h2><a href="#">Chat Privado</a></h2>
<div id='d' style="border:1px solid #000; width:250px;height:150px;overflow:
auto;padding:5px 5px 3px 3px;" ></div>
Texto: <input type="text" id="txtMsg" name="txtMsg" class="texto" size="50">
<input type="button" class="boton"
onclick="javascript:chat.enviaMsg(document.getElementById('txtMsg').value);
document.getElementById('txtMsg').value='';" value="Enviar">
</div>
</form>
</body>
</HTML>
Code Behind
Imports Ajax
Public Class chat
Inherits System.Web.UI.Page
Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) _
Handles MyBase.Load
If Application.Item("strChat") Is Nothing Then
Application.Add("strChat", "")
End If
End Sub
<Ajax.AjaxMethod(HttpSessionStateRequirement.ReadWrite)> _
Public Function dameMsg() As String
Dim cadena As String = ""
If HttpContext.Current.Application("msgChat") Is Nothing Then
HttpContext.Current.Application("msgChat") = "Bienvenidos:<br>"
Else
cadena = HttpContext.Current.Application("msgChat")
If cadena.Length > 5000 Then
HttpContext.Current.Application("msgChat") = cadena.Remove(0, 2000)
End If
End If
Return cadena
End Function
<Ajax.AjaxMethod(HttpSessionStateRequirement.ReadWrite)> _
Public Function enviaMsg(ByVal texto As String)
If HttpContext.Current.Application("msgChat") Is Nothing Then
HttpContext.Current.Application("msgChat") = texto
Else
HttpContext.Current.Application("msgChat") += texto + " hora:" + _
Now.ToLongTimeString + "<br>"
End If
End Function
End Class
note:function with Ajax.AjaxMethod can be called from javascript in the client side.
