Chat Application in AJAX

Introduction

Ajax (Asynchronous JavaScript and XML) is a new web development technique for interactive websites. AJAX helps us to develop web applications and retrieve small amounts of data from the web server. AJAX consists of a different type of technology.

• JavaScript
• XML
• Asynchronous Call to the server

Chat

The AJAX Chat Sample shows how to build a browser based chat using ASP .NET and AJAX. ASP.NET AJAX is the easiest and most enjoyable way to start writing asynchronous Web applications using ASP.NET.

Step 1 : Open Visual Studio 2010.

• Go to File->New->WebSite
• Select ASP.NET Empty WebSite

Step 2 : Go to Solution Explorer and right-click.

• Select Add->New Item
• Select WebForm
• Default.aspx page open

Add Some Chat Control

Step 3 : Go to the Default.aspx page and click on the [Design] option and drag control from Toolbox.

• Drag ScriptManager control, UpdatePanel control, Button, Bulleted List,TextBox

Define Trigger for UpdatePanel

Step 4 : Go to Default.aspx [Design] option and click on the UpdatePanel.

• Select Properties option
• Click on Trigger and define ControlIDand Event Name

Step 5 : Write code for UpdatePanel control and define AsyncPostBackTrigger.

Code :

<asp:UpdatePanel ID="ChatUpdatePanel" runat="server" UpdateMode="Always">
<ContentTemplate>
Chatters<br/>
<asp:BulletedList ID="ChattersBulletedList" runat="server" BackColor="#FF8000" />
Chat Text<br/>
<div id="ChatText" style="width: 440px; height: 140px; overflow: auto; background-color: #B6E2B7;">
<asp:BulletedList runat="server" ID="ChatMessageList" />
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="SendButton" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="ChatTextTimer" EventName="Tick" />
</Triggers>
</asp:UpdatePanel>

Add App_Code Folder

Step 6 : Go to Solution Explorer and add App_Code Folder for the Chat.cs and Chatter.cs class files, needed to create our test data.

Add Some Chatter

Step 7 : Go to Solution Explorer and click on the project.

• Select Add->NewItem
• Select GlobalApplication class
• Global.asax page open

Define NameSpace

<%@ Import Namespace="System.Collections.Generic" %> This is test only data.

Code :

<%@ Import Namespace="System.Collections.Generic" %>
<%@ Application Language="C#" %>
<script runat="server">
void Application_Start(object sender, EventArgs e)
{
List<Chatter> chatters = new List<Chatter>();
chatters.Add(new Chatter(new Guid("CD863C27-2CEE-45fd-A2E0-A69E62B816B9"), "RAJ"));
chatters.Add(new Chatter(Guid.NewGuid(), "Bhavana"));
chatters.Add(new Chatter(Guid.NewGuid(), "Amit"));
chatters.Add(new Chatter(Guid.NewGuid(), "Deepak"));
chatters.Add(new Chatter(Guid.NewGuid(), "Manish"));
chatters.Add(new Chatter(Guid.NewGuid(), "Sachin"));
chatters.Add(new Chatter(Guid.NewGuid(), "Puja"));
Application.Add("Chatters", chatters);

List<chate> chats = new List<chate>();
chats.Add(new chate());
Application.Add("Chats", chats);
foreach (KeyValuePair<Guid, Chatter> chatter in Chatter.ActiveChatters())
{
chatter.Value.Join(chate.ActiveChats()[0]);
}
}
void Application_End(object sender, EventArgs e)
{
// Code that runs on application shutdown
}
void Application_Error(object sender, EventArgs e)
{
// Code that runs when an unhandled error occurs|
}
void Session_Start(object sender, EventArgs e)
{
// Code that runs when a new session is started
}
void Session_End(object sender, EventArgs e)
{
// Code that runs when a session ends.
// Note: The Session_End event is raised only when the sessionstate mode
// is set to InProc in the Web.config file. If session mode is set to StateServer
// or SQLServer, the event is not raised.

}
</script>

Note : Since we want to simulate a group of Chatters that have logged into our site, we will create a list of Chatter objects within the Application_Start method.

Step 8 : Go to Default.aspx.cs and define two private variables, one for our Chatter ("RAJ"), and one for the single Chat instance.

Code :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class _Default : System.Web.UI.Page
{
private chate m_chat = chate.ActiveChats()[0];
private Chatter m_chatter = Chatter.ActiveChatters()[new Guid("CD863C27-2CEE-45fd-A2E0-A69E62B816B9")];
protected void Page_Load(object sender, EventArgs e)
{
_UpdateChatterList();
_UpdateChatMessageList();
}
private void _UpdateChatMessageList()
{
ChatMessageList.DataSource = m_chat.Messages;
ChatMessageList.DataBind();
}
private void _UpdateChatterList()
{
ChattersBulletedList.DataSource = m_chat.Chatters;
ChattersBulletedList.DataTextField = "Name";
ChattersBulletedList.DataBind();
}
protected void SendButton_Click(object sender, EventArgs e)
{
if (!string.IsNullOrEmpty(NewMessageTextBox.Text))
{
string messageSent = m_chat.SendMessage(m_chatter, NewMessageTextBox.Text);
NewMessageTextBox.Text = string.Empty;
}
_UpdateChatterList();
_UpdateChatMessageList();
}
}

Step 9 : Go to Default.aspx page option and write a code.

Code :

<body>
<form id="form2" runat="server" style="background-color: #ADC9D1">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true" />
<asp:UpdatePanel ID="ChatUpdatePanel" runat="server" UpdateMode="Always">
<ContentTemplate>
Chatters<br/>
<asp:BulletedList ID="ChattersBulletedList" runat="server"
BackColor="#FF8000" />
Chat Text<br/>
<div id="ChatText"
style="width: 440px; height: 140px; overflow: auto; background-color: #B6E2B7;">
<asp:BulletedList runat="server" ID="ChatMessageList" />
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="SendButton" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="ChatTextTimer" EventName="Tick" />
</Triggers>
</asp:UpdatePanel>
Send Message Text<br/>|
<asp:TextBox ID="NewMessageTextBox" Columns="50" runat="server"
BackColor="White" /><asp:Button EnableViewState="false" ID="SendButton" Text="Send" runat="server" OnClick="SendButton_Click" />
<asp:Timer runat="server" ID="ChatTextTimer" Interval="1000" />
</form>
<script type="text/javascript">
function _SetChatTextScrollPosition() {
var chatText = document.getElementById("ChatText");
chatText.scrollTop = chatText.scrollHeight;
window.setTimeout("_SetChatTextScrollPosition()", 1);
}
window.onload = function () {
_SetChatTextScrollPosition();
}
</script>

Step 10 : Go to the Chate.cs class and write a code for the test data.

Code :

using System;
using System.Collections;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Web;
/// <summary>
/// Summary description for chate
/// </summary>
public class chate
{
private Guid m_id;
public Guid Id
{
get { return m_id; }
}
private List<string> m_messages = new List<string>();
public List<string> Messages
{
get { return m_messages; }
}
private List<Chatter> m_chatters = new List<Chatter>();
public List<Chatter> Chatters
{
get { return m_chatters; }
set { m_chatters = value; }
}
public static ReadOnlyCollection<chate> ActiveChats()
{
if (HttpContext.Current.Application["Chats"] != null)
{
List<chate> chats = ((List<chate>)HttpContext.Current.Application["Chats"]);
return new ReadOnlyCollection<chate>(chats);
}
else
{
return new ReadOnlyCollection<chate>(new List<chate>());
}
}
public string SendMessage(Chatter chatter, string message)
{
string messageMask = "{0} @ {1} : {2}";
message = string.Format(messageMask, chatter.Name, DateTime.Now.ToString(), message);
m_messages.Add(message);
return message;
}
}

Step 11 : Now write the code for the chatter.cs class for the chat application.

Code :

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Web;
/// <summary>
/// Summary description for Chatter
/// </summary>
public class Chatter
{
private Guid m_id;
public Guid Id
{
get { return m_id; }
}
private string m_name;
public string Name
{
get { return m_name; }
}
public static Dictionary<Guid, Chatter> ActiveChatters()
{
Dictionary<Guid, Chatter> retval = new Dictionary<Guid, Chatter>();"
if (HttpContext.Current.Application["Chatters"] != null)
{
List<Chatter> chatters = ((List<Chatter>)HttpContext.Current.Application["Chatters"]);
foreach (Chatter chatter in chatters)
{
retval.Add(chatter.Id, chatter);
}
}
return retval;
}|
public void Join(chate chat)
{
chat.Chatters.Add(this);
}
public Chatter(Guid id, string name)
{
m_id = id;
m_name = name;
}
}

Step 12 : Now run the application by Pressing F5.

Step 13 : Write a message inside the Texbox and click on send button.