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.