Which Technology is Used?
A web-chat is an application for which dynamically generated HTML is needed and client-server interaction. Therefore, ASP.NET 2.0 has been used and of course Ajax for the client-server-intercation without postbacks. We could use Ajax.NET but to keep it simple we decided to use the Ajax-implementation from Mike Schwartz called AjaxPro.
- Add a reference to the Assembly AjaxPro.dll from Mike Schwartz.
- Add a class to your project.
- Add a method to that class you want to call by script and mark it with the Attribute AjaxMethod
- Register the class in the Page_Load-handler of your aspx-page from which you want to use it. With
That's all. Other details will be explained in the implemenation-part of the article.
The Design of a Chat?
There are different kind of chats. In this example I designed a chat in which users can login with their username and password. Then they can enter the chat and send messages. The messages are visible for all other chat-users. It is a public chat, where all logged in chatters can communicate together.
The Session holds a
CurrentChatter, a user that has just logged in. The chatter enters the chat (1) by navigating to the chat-page (Chat.aspx). After a chatter has entered, he has the possibility to send messages by typing text to a TextBox and pressing the enter-key. Then the chat-message is sent to a
(1) AddChatter (store chat-user)
Save the curent user after successful login to the Session.
So far the theory, now the concrete coding. Here are the datatypes we need
This class has an Id to identify a chatter internally and a name for the display. The
LastMsgKey is the key of the last message a chatter received. When the timer polls for new messages, this key is used to find out, if there are messages in the CMQ after that message. The messages are stored in a list in the application. If there are messages in the list for the chatter after his
LastMsgKey, these messages have to be fetched.
A chat-message has a Key (Guid), the name of the chatter who sent this message and the message itself as string.
ChatMgr handles the list of all logged in chatters and the CMQ. You can add messages to the CMQ and get them back from it. It also has methods to get a list of all available chatters as HTML. The code could be optimized here: The display-logic for chatters and chat-messages could be placed to another class.
The HTML-components are located on the WebForm Chat.aspx. We have
- divChatBox: A DIV for all chatmessages.
- divChatters: A DIV for all logged in chatters
- txtMessage: A TextArea for the text that a chatter can type and send.
ChatMgr.GetChattersHtml( fillUsers_CallBack );
function fillUsers_CallBack( res )
var userBox = document.getElementById('divUsers');
if( res.value == '' )
setTimeout( "fillUsers()", 5000 );
userBox.innerHTML = res.value;
setTimeout( "fillUsers()", 5000 );
ChatMgr.GetMsgsFromQueue( getMsgs_CallBack );
function getMsgs_CallBack( res )
var chatBox = document.getElementById('divChatBox');
chatBox.innerHTML += res.value;
setTimeout( "getMsgs()", 2000 );
_callback-functions are asynchronous callbacks. They are initiated by the Ajax-calls of the
ChatMgr. In the end of a
setTimeout is called to invoke the function again after a certain period. Now how is the
ChatMgr able to call a serverside function from script? See the example of the call
[ AjaxMethod( HttpSessionStateRequirement.Read ) ]
public string GetChattersHtml()
string result = "";
if( SessionMgr.Instance.OnlineUsers == null )
foreach (Member member in SessionMgr.Instance.OnlineUsers.Values )
result += "<div class='ChatUser' style='width: 280px'>";
result += "<table border=0 cellpadding=0 cellspacing=0><tr>";
result += "<td>" + UserImage.GetHtml( member.ID, "" ) + "</td>";
result += "<td> <b>" + member.Name + "</b></td>";
result += "</tr></table>";
result += "</div>";
The method of the
ChatMgr is marked with the attribute
AjaxMethod. To get access to the current Session, we add the
HttpSessionStateRequirement.Read to that attribute. Now the method can read all logged in users from the session and give back the list as HTML. If we also want to be able to write to the HttpSession we could use
For the other code-parts it's just the same: the script calls the serverside method, the method returns the return-values which are read-out in an asynchronous callback-function in script.
Here is the logic for sending messages to the queue:
var newMsg = '';
var chatBox = null;
var msg = document.getElementById('txtMsg').value;
if( msg == '' )
document.getElementById('txtMsg').value = '';
newMsg = ChatMgr.AddToMsgQueue( msg ).value;
chatBox = document.getElementById('divChatBox');
chatBox.innerHTML += '' +
newMsg.Name + ': ' + newMsg.Message + '';
On pressing return, the function
sendMessage is called and adds the message to the CMQ by calling the method
AddToMsgQueue of the
ChatMgr which again is an Ajax-method. If you have further questions on how to build an ASP.NET-Ajax-Chat or want codegod to implement it for you, just send us a mail.
You can see the codegod-chat in action here after logging in. For more information on ASP.NET and Ajax visit our page here