How to develop a web chat application by using ASP.NET AJAX

This article describes an All-In-One framework sample that is available for download. This code sample demonstrates a step-by-step guide that illustrates how to create a web chat application by using ASP.NET AJAX. You can get the sample package from the download icons below.

Difficulty level

Download information

To download this code sample, click one of the following links:

 

Technical overview

You should have some experience in chatting with friends on the web. You may think it is complicated to develop a web chat application. However, ASP.NET provides an easy and accessible way to do it. The technical overview introduces how to construct a web chat room by using AJAX.


The principle controls needed to construct a web chat room by using AJAX are not that complicated. As you know, a web chat application needs the following four basic controls:

• A list control that is used to show the list of chat room members.
• A list control that is used to show the list of chat messages.
• A text box control that is used to input messages.
• A button that is used to send a message.

Users input a message in the text box, and then they press the Send button. In this situation, the message is sent to the server. The message list is updated every two seconds to get the newest messages in the chat room from the server.


It is difficult to make an AJAX web chat application that behaves the same way as a Windows Form application, because you cannot maintain a continuous connection with the server. Therefore, a lot of events that could be immediately communicated between a client and server cannot be realized. The common workaround is to make the web chat application send a request every few seconds to check for server-side updates.


Note Before you start to develop a web chat application by using AJAX, you need to have basic knowledge about ASP.NET AJAX, the Windows Communication Foundation (WCF) service, JavaScript (for example, jQuery and Microsoft Ajax CDN), HTML, and CSS. This code sample uses a database to host the chat data, so you also need some knowledge of LINQ to SQL. For more details about these technologies, click the links in the "References" section.
 

Sample Overview

This code sample is separated into 4 sections:

• The Data section. For example, LINQ to SQL.
• The Service section. For example, the WCF service.
• The Logic section. For example, the classes that are used for the service and that communicate data.
• The User interface (UI) section. For example, pages and client scripts.

Download the sample code and follow these steps to get started developing a web chat application.

Data

1. Create an ASP.NET web application.
2. Create a database file. For example, you can create an .mdf file.
3. Open the database file and create the following four tables:

   Table name	Description
   tblChatRoom	stores chat room data
   tblMessagePool	stores the chat message data temporarily
   tblSession	stores the user session data
   tblTalker	stores the active user data

   Note For more information about how to design these tables, follow the sample code that you downloaded.
4. Add LINQ to an SQL file. For example, you can add LINQ to a .dbml SQL file. Drag and drop the tables into the stage of the file in the Visual Studio IDE.

Logic

1. Create the following class files:

   Table name	Description
   ChatManager.cs	In the code sample, there are some static methods to control the data in the database by using LINQ.
   ChatRoom.cs	It is a DataContract that is used to send the chat room data to the client by using the WCF service.
   Message.cs	It is a DataContract that is used to send the message data to the client by using the WCF service.
   RoomTalker.cs	It is a DataContract that is used to send the talker data in a chat room to the client by using the WCF service.

   NoteFor more information about how to design these classes, follow the sample code that you downloaded.

Service

1. Add an AJAX-enabled WCF service.

User interface

1. You need to create some JavaScript files to make client-side calls to the WCF service. This code sample contains some page logic codes, but you can define your own page logic codes. ASP.NET AJAX allows you to add some service references. This way, the ScriptManager will generate the client-side service contract scripts automatically. You can call the service methods the same names that you use on the server. For example, if you want to call the LeaveChatRoom method in the Transition.svc file, you can use the following code to write a JavaScript function:

   csaspnetajaxwebchat.transition.LeaveChatRoom(RoomID, SuccessCallBack, FailCallBack); 

   vbaspnetajaxwebchat.transition.LeaveChatRoom(RoomID, SuccessCallBack, FailCallBack); 

   Notes
   • Csaspnetajaxwebchat is the namespace for this application.
   • Transition is the service name.
   • LeaveChatRoom is the method name.
     In this JavaScript sample code, the LeaveChatRoom method has one parameter, RoomID. However, if you have two or more parameters for one method, you need to define the parameters before the SuccessCallBack function.
   • SuccessCallBack is a function that is called when the service is called successfully.
   • FailCallBack is a function that is called when the service call fails.
   For more information about these script functions, refer to the chatbox.js, chatMessage.js, and chatRoom.js files in this code sample.
2. Open the Default.aspx page. If there is no Default.aspx page, you need to create one. Create a ScriptManager control, and then insert the following code to add a service reference and a script reference:

   <asp:ScriptManager ID="ScriptManager1" runat="server">
               <Services>
                   <asp:ServiceReference Path="~/Services/Transition.svc" />
               </Services>
               <Scripts>
                   <asp:ScriptReference Path="~/Scripts/chatbox.js" />
               </Scripts>
           </asp:ScriptManager> 

   In the Head block, insert the following code to add the JavaScript and CSS references from the CDN:

       <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
       <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.ui/1.8.5/jquery-ui.min.js"></script>
       <script type="text/javascript" src="scripts/chatRoom.js"></script> 
       <link rel="Stylesheet" type="text/css" href="http://ajax.microsoft.com/ajax/jquery.ui/1.8.5/themes/dark-hive/jquery-ui.css" /> 

   These references will improve the look of the sample code. There are some additional UI markup definitions that are referenced in the Default.aspx page in this code sample.
   
   
   Note For more details about Microsoft Ajax CDN, click the link in the “References” section.
3. Create a new web page. In this code sample, the new web page is the ChatBox.aspx page. In the ChatBox.aspx page, some UI controls are created to send and receive messages.
   
   Note For more information about the ChatBox.aspx page, see the ChatBox.aspx page in this code sample.
4. You are now ready to test the application.

Technology category

• Microsoft ASP.NET 3.5
• Microsoft ASP.NET 4

Languages

This code sample contains the following programming languages:

Prerequisites

• To run this sample code, you must have the Microsoft .NET Framework installed.

For more information about how to create an AJAX-Enabled WCF service and an ASP.NET client that accesses the Service, visit the following Microsoft website:

How to create an AJAX-Enabled WCF service and an ASP.NET client that accesses the Service

For more information about the .NET Language-Integrated query for relational data, visit the following Microsoft website:

General information about the .NET Language-Integrated query for relational data

For more information about how to explore rich client scripting by using jQuery, visit the following Microsoft website:

How to explore rich client scripting by using jQuery

For more information about JavaScript Object Notation (JSON) in JavaScript and .NET, visit the following Microsoft website:

An introduction to JavaScript Object Notation (JSON) in JavaScript and .NET

For more information about Microsoft Ajax Content Delivery Network (Microsoft Ajax CDN), visit the following Microsoft website:

Microsoft Ajax Content Delivery Network (Microsoft Ajax CDN)

Microsoft corporation and/or its respective suppliers make no representations about the suitability, reliability, or accuracy of the information and related graphics contained herein. All such information and related graphics are provided "as is" without warranty of any kind. Microsoft and/or its respective suppliers hereby disclaim all warranties and conditions with regard to this information and related graphics, including all implied warranties and conditions of merchantability, fitness for a particular purpose, workmanlike effort, title and non-infringement. You specifically agree that in no event shall Microsoft and/or its suppliers be liable for any direct, indirect, punitive, incidental, special, consequential damages or any damages whatsoever including, without limitation, damages for loss of use, data or profits, arising out of or in any way connected with the use of or inability to use the information and related graphics contained herein, whether based on contract, tort, negligence, strict liability or otherwise, even if Microsoft or any of its suppliers has been advised of the possibility of damages.