Ajaxifying the Web

Web based Chat with Ajax


Having a little chat window with a list of friends connected in the chat room is awesome! But the important thing is it should not be at the expense of the overall performance of the website. I created a website with other silverlight stuff on it and this Chat area as a side thing. I have used the ASP.NET Ajax framework which is pretty simple to use.

Follow the steps and at the end you would be enjoying a chat area on a web page.


Step1 : Creating the Chatter List

Drag a Script Manager on an ASP.NET page. If you create an ASP.NET Futures website, a script manager is already present.

Drag an UpdatePanel on the page and name it,say, chatterUpdatePanel. Drag a ASP.NET listbox control in the Update Panel. Behind the scenes a contenttemplate tag is created under the Update Panel. This is the area for the chatter names which will get update asynchronously.

I thought of having some basic authentication required before chatting. So I created a username and password textbox and a Sign In button outside the Update Panel. The click event of the Signin button must update the chatter listbox. To do this we need to specify a trigger to the update panel.

<asp:UpdatePanel ID="chatterUpdatePanel" UpdateMode="Conditional" runat="server">

<ContentTemplate>

<div id='hello' style="overflow:auto;width:146px" >

<asp:ListBox ID="listChatters" runat="server" Height="180px" Width="200px"

BackColor="White" Font-Names="Verdana">

asp:ListBox>

div>

ContentTemplate>

<Triggers>

<asp:AsyncPostBackTrigger ControlID="ChatterTimer" EventName="Tick" />

<asp:AsyncPostBackTrigger ControlID="signin" EventName="Click"/>

Triggers>

asp:UpdatePanel>

The signin controlID is the Sign In button I used for signing in users. You can see another trigger with the control ID of ChatterTimer. Now if some friend of yours signs in at his house, everyone needs to know he signed in so I update the chatter listbox every 10 seconds. For this drag a ASP.NET Timer control on the page outside the update panel. Add a Async trigger to the chatterupdate panel with the event name as “Tick”. Thus every 10 seconds the listbox is updated without refreshing the whole page.

Step 2 : Creating the Messages Listbox

To display messages that are being sent, I use a listbox control. This listbox has to be updated independently of the Chatterlistbox. For this drag another Update Panel on the page and add a listbox in it. Call it say MessagesUpdatePanel.

There has to be an area where a chatter can type his statements and send them. I created a textbox and a button “Send” under the messages listbox. Make sure these two controls are outside the MessagesUpdatePanel. Add an async trigger to this update panel with controlid of the Send button and the event name as Click. Also since the messages come more frequently an update is required in a lesser interval. So drag a timer control and assign interval of 1 second and add an async trigger to the MessagesUpdatePanel with the control id of this timer control and event name “Tick” as follows:

<asp:UpdatePanel ID="messagesUpdatePanel" UpdateMode="Conditional" runat="server">

<ContentTemplate>

<asp:Label runat="server" Text="" ID="labelWelcome" ForeColor="#006699">asp:Label>

<asp:ListBox ID="listMessages" runat="server" Height="280px" Width="392px"

BackColor="Black" ForeColor="limegreen" Font-Names="Verdana">

asp:ListBox>

ContentTemplate>

<Triggers>

<asp:AsyncPostBackTrigger ControlID="sendButton" EventName="Click" />

<asp:AsyncPostBackTrigger ControlID="ChatTextTimer" EventName="Tick" />

Triggers>

asp:UpdatePanel>

Please be aware that the textbox which would be used to type statements must be outside the update panel since we do now want to update anything in it.

Step 3 : Storing chat data.

Now since we have the desig ready we need to have a way to store the chatters which have valid accounts. Also for my website I display the latest 10 messages in the messages listbox just for the heck of it I think :). I added a Global.asax file to my project to manage application level data. I have created a List<> of chatters in the global.asax.cs file as follows:

List<Users> chatters = new List<Users>()

List<string> messages = new List<string>();

In the Application_Start event I do the following:

Application.Add("chatters", chatters);

Application.Add("chats", messages);

Now since the Application object can be accessed in the Page too, I add any user which is created on the site into this list. Also as a messages is sent I add it in the messages list.

In the Page_Load event I load the chatters and the messages in the respective listboxes.

Following is a simple way to display List items in a listbox

List<string> messgs = (List<string>)Application["chats"];

listMessages.DataSource = messgs;

listMessages.DataBind();

Similar procedure can be followed for chatter listbox too.