Developing a Mini ASP.NET AJAX Server Centric Based Chat Application - Designing the Default.aspx Page
(Page 5 of 5 )
The main chat functionalities are performed inside the Default.aspx page, which is mainly composed of three UpdatePanel control and three corresponding Timer controls. Here, the three UpdatePanel controls are utilized to carry out the tasks of sending out and accepting chat messages, and showing the online user information, respectively.
To reduce system resource consumption, we set all theUpdateModeproperties of each of the three UpdatePanel controls toConditional. In contrast to the three UpdatePanel controls, the three corresponding Timer controls are used to accept the chat information on schedule, acquire the online user list in real time, and update the active time information of all the online users, respectively.
In addition, to achieve more plentiful styles in terms of chat content, users can specify the color, font, and expression pictures for their own messages. You can refer to Figure 1, shown earlier, to view the running time snapshot of the main chatting page.
By the way, because the HTML code of the Default.aspx page is so long, and all of it is basic ASP.NET related operations except for the above-mentioned three types of ASP.NET AJAX server controls (ScriptManager, UpdatePanel, and Timer), we omit the code listing here. However, you can refer to the downloadable source code accompanying this article (see the link at the bottom of this page) for more detailed information.
Programming the Default.aspx.cs File
The programming logic within the Default.aspx.cs file is also simple and clear. On the whole, it will perform four tasks: sending out a message, accepting a message, showing the online user list, and updating the active time of the users. In this case, the latter three tasks are done inside the Tick event function of the related Timer controls, because they need to be called repeatedly. However, the task of sending out a message is accomplished when the user clicks the "Send" button, where the above-mentioned three classed associated methods are invoked to perform the corresponding tasks.
The following gives the complete source code of the three Timer controls related to Tick event handlers:
//Get a list of the online users
protected void Timer2_Tick(object sender, EventArgs e)
{
StringBuilder sb = new StringBuilder("<ul>", 300);//
foreach (ChatUser user in Room.Instance.GetAllUsers())//iterate through every online user and construct a string
{
string temp = Server.HtmlEncode(user.Name);//encode
sb.Append("<li><a href="#" onclick="javascript:document.getElementById('mtowho').value='" + temp + "';">" + temp + "</a></li>");
}
sb.Append("</ul>");
UserList.InnerHtml = sb.ToString();
}
//acquire the chat info
protected void Timer1_Tick(object sender, EventArgs e)
{
StringBuilder sb = new StringBuilder(3000);//the string mode of the chatting info
foreach (Msg chatMessage in Room.Instance.GetAllMessages())//iterate through all the info and add them all
{
string UserName = Server.HtmlEncode(chatMessage.UserName);//the user name of the sender
string Message = Server.HtmlEncode(chatMessage.Message);//sending info
string OtherName = Server.HtmlEncode(chatMessage.OtherName);//the user name of the receiver
string Color = Server.HtmlEncode(chatMessage.Color);//the color of the message
string DateTime = Server.HtmlEncode(chatMessage.DateTime.ToLongTimeString());//sending data time
string Img = Server.HtmlEncode(chatMessage.Img);//expression symbol
sb.Append("<font color="#FF0000">" + DateTime + "</font>");
sb.Append(" [<font color="#663300">" + UserName + "</font>] talks to [<font color="#663300">");
sb.Append(OtherName + "</font>]:");
string msg = Message;
if (chatMessage.Color != "") msg = "<font color="" + chatMessage.Color + "">" + msg + "</font>";
if (chatMessage.IsBold == "1") msg = "<b>" + msg + "</b>";
if (chatMessage.IsBold == "2") msg = "<i>" + msg + "</i>";
if (Img != "") sb.Append("<img src=face/" + chatMessage.Img + ">");
sb.Append(msg);
sb.Append("<br/>");//succeed in constructing a piece of message
}
ChatContent.InnerHtml = sb.ToString();
}
//send out the chatting info
protected void Button2_Click(object sender, EventArgs e)
{
string message = UserInputTextBox.Value;//message
string userName = User.Identity.Name;//userName
string othername = mtowho.Value;//the username of the receiver
string color = mfcolor.Value; //the color of the message
string img = elist.Value;//the expression symbol
string isbold = mfont.Value;//if is bold or italic
Room.Instance.SendMessage(userName, othername, message, isbold, color, img);//send
UserInputTextBox.Value = "";
UserInputTextBox.Focus();
}
//update the online time of the user
protected void Timer3_Tick(object sender, EventArgs e)
{
string userName = User.Identity.Name;//userName
Room.Instance.GetUser(userName).Update();
}
As you've seen, we have already provided thorough explanations for each of the above lines, so we will not dwell upon them.
As of now, we've succeeded in setting up a mini chat room module of a possible larger chat project.
-DOWNLOAD SOURCE-
Summary
In this article, we have leveraged the ASP.NET AJAX server side framework to succeed in constructing a simple chat room application. Although in real scenarios things are obviously rather more complex than what we have implemented in this sample, through this demonstration we've learned the basic routine for constructing an ASP.NET AJAX server-centric-based application. In contrast to older solutions that directly manipulated the XMLHTTP object, whether considering simplicity, maintenance, or development efficiency, the more modern approach revealed here shows a real improvement.
One last word: the sample chat application was built under VS2008; however, you be able to get it to work easily in a VS2005 environment since is uses nothing related to ASP.NET 3.5.
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |