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.