Create Your Own Chat Room
By Andrew Flick and Anthony Lombardo
We have to admit, we still can’t get enough of AJAX. Many of our thoughts revolve around asynchronous page behaviors, and coming up with new ways to break the tired old paradigm of “postbacks”.
When you examine AJAX as a protocol, you quickly realize that it is “chatty”, meaning that there is a lot of back and forth communication between the client and the server. Because all communication is happening asynchronously without interrupting the page, this isn’t really a concern. As a matter of fact, this chatty characteristic could be the basis of a whole new breed of Web applications. What could be better to prove the effectiveness of a chatty protocol than a chat room?
To begin construction of your chat room, create a new Visual Studio 2005 Web site using the Atlas project template. The project template will add all the references you need, as well as provide you with a modified web.config file.
For a functional chat room you’ll need three main features available from the client side:
- The ability to identify yourself.
- The ability to send messages.
- The ability to get new messages.
The first goal of identification can be provided through a textbox for the user to enter in a username, and a button to perform the login action. In addition, a Label can be added to notify the user of any problems that may have occurred while attempting to log in.
Using an Atlas UpdatePanel and partial rendering, the login operation can be completed without requiring a full postback. When PartialRendering is enabled, the contents of the UpdatePanel will be updated asynchronously, without affecting any other part of the page:
<atlas:UpdatePanel runat=”server” ID=”updatepanel”>
<asp:Panel runat=”server” ID=”LoginPanel”>
<asp:Label runat=”server” ID=”MessageLabel”></asp:Label>
<div>In order to use the Chat, you must first type in a UserName.
Your UserName will be used to identify you when a message is sent.</div>
<asp:TextBox runat=”server” ID=”userName”></asp:TextBox>
<asp:Button runat=”server” ID=”loginButton” OnClick=”loginButton_Click” Text=”Login” />
To ensure that the UpdatePanel will refresh without requiring a full postback, you must turn on PartialRendering. This can be done through the Atlas ScriptManager:
<atlas:ScriptManager ID=”ScriptManager1″ runat=”server” EnablePartialRendering=”true” ></atlas:ScriptManager>
Now it’s time to think about how the messaging process should work. There are a few options for storing and sharing messages, but one of the easiest ways is to put them in the Application Cache. By using the Application Cache, you can provide a way for all sessions to “talk” to each other. To keep things organized, you’ll need to create two supporting classes:
- User: used to represent a logged in user
- Message: used to store the sender information and message text
public void SendMessage(string from, string message)
User fromUser = this.Users[from];
foreach (User user in this.Users.Values)
user.MessageQueue.Enqueue(new Message(fromUser, user, message));
In case you’re confused, the “$” character is a shortcut to document.getElementById, provided by the Atlas framework. It took a while for me to get used to seeing dollar signs all over my code, but it sure does make writing the script a lot quicker.
At this point, you have an application that will send messages, but it isn’t set up to receive them yet. Adding the logic to receive messages requires polling the server for new messages. The polling shouldn’t happen until after the user has successfully logged in, so you’ll need to call RegisterClientScriptBlock from the server during the login process to start up the polling process on the client.
Once the polling process is started, the client will contact the server on a constant interval, calling the GetMessages server-side method. Here is the client-script responsible for that:
var msg = messages[i];
The code accompanying this article is available for download.
Andrew Flick is Product Manager – NetAdvantage Windows Forms Technologies & TestAdvantage for Infragistics, Inc. Prior to joining Infragistics, Andrew played an avid role in presenting on emerging .NET technologies throughout the Midwest to a variety of User Groups as well as numerous Student Groups. As an active member of the INETA Academic Committee, Andrew has authored content on building successful User Groups, as well as numerous white papers on building an effective community. A Microsoft MVP, Andrew joined Infragistics in July of 2004 as a Technology Evangelist, where he was responsible for the creation of reference applications and authoring .NET technology articles for industry leading publications, as well as the world wide delivery of Infragistics’ Technology demonstrations. Andrew currently serves as Infragistics Product Manager for NetAdvantage Windows Forms Technologies & TestAdvantage. As product manager, he spearheads the product management and strategies of Infragistics Windows Forms Product Lines — from establishing the direction through delivery. Working directly with the Director of Development, he sets the direction, plans, and manages product development. Contact Andrew at mailto:email@example.com.
Anthony Lombardo is Product Manager of NetAdvantage – ASP.NET Technologies for Infragistics, Inc., and is responsible for spearheading product management and strategies for Infragistics’ ASP.NET product line, working directly with the Director of Engineering to set the direction, plan, and manage product development. Prior to joining Infragistics, Anthony served as a Network Administrator for North Brunswick Board of Education and worked for Rutgers University in their technical support division. Since beginning his career with Infragistics in 2000, Anthony has been involved with every aspect of the development cycle, including playing a key role in the creation of the Presentation Layer Framework for ASP.NET, assisting in the creation and implementation of Infragistics Visual Studio 2005 project plan, and determining the product feature set for NetAdvantage 2005 for Visual Studio 2005. Contact Anthony at mailto:firstname.lastname@example.org.