A Chat with ASP.NET and Ajax
Attachment
Introduction
This article describes how to implement a web-chat with ASP.NET and Ajax. In the first part I introduce the technologies I used for the application. Then I explain the concept of a chat and in the last part I present the main implementations.The goal of this article is to show the interested reader how to develop a chat without browser-plugins or java-applets, just pure HTML and javascript.
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 for the client-server-intercation without postbacks of course Ajax. We could use Ajax.NET but to keep it simple we decided to use the Ajax-implementation from Mike Schwartz called AjaxPro.
To do all serverside calls from javascript with AjaxPro you need to do the following:
1. Add a reference to the Assembly AjaxPro.dll which you can download
here.
2. Add a class to your project.
3. Add a method to that class you want to call by script and mark it with the Attribute
AjaxMethod4. Register the class in the Page_Load-handler of your aspx-page from which you want to use it. With
AjaxPro.Utility.RegisterTypeForAjax(typeof(MyAjaxClass));
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.
Figure 1The 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 ChatMessageQueue (CMQ) which in our example is stored in the Application (2). Okay, now the message lies in the CMQ on the server. We have to get it from there, so that every client can see it. Therefore we have a javascript-timer running, that gets all new messages from the CMQ and displays it in an HTML-DIV for example (3).
Sounds simple, doesn't it? Here is what we need to do, to implement points 1 to 3.
(1) AddChatter (store chat-user)
Save the curent user after successful login to the Session.
(2) AddToMsgQueue
When sending a chat-message you need to store this in the CMQ. You will have to invoke this action from a javascript function. The scriptcode calls a serverside method via Ajax that has the ability to access the ASP.NET-Application.
(3) GetMsgsFromQueue
Here we need to check in a javascript-timer every n seconds, if there are new chat-messages for the client to display. So we poll the CMQ for new messages by an Ajax-method. If we have new messages, theses are transformed to a string that can be displayed as a list in a chatwindow.
The implementation
So far the theory, now the concrete coding. Here are the datatypes we need:
Figure 2This 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.
ChatMsgA chat-message has a Key (Guid), the name of the chatter who sent this message and the message itself as string.
ChatMgrThe 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.
When the page loads, all logged in chatters and the available messages are loaded and displayed in the corresponding HTML-elements. Here is the javascript-code which is called cause we add the calls to it in the onload-handler of the Chat.aspx-page:
Attachment
