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

Collapse this imageExpand this image

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:
   Collapse this tableExpand this table

   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:
   Collapse this tableExpand this table

   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.

What is All-In-One Code Framework?

All-In-One Code Framework shows most Microsoft development techniques by using code samples in different programming languages. Each example is carefully selected, composed, and documented to show one common code scenario. For more information about All-In-One Code Framework, visit the following Microsoft website:

How to find more All-In-One Code Framework samples

To find more All-In-One Code Framework samples, search for "kbcodefx" together with related keywords on the Microsoft support Web site. Or, visit the following Microsoft website:

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: For more information about the .NET Language-Integrated query for relational data, visit the following Microsoft website: For more information about how to explore rich client scripting by using jQuery, visit the following Microsoft website: For more information about JavaScript Object Notation (JSON) in JavaScript and .NET, visit the following Microsoft website: For more information about Microsoft Ajax Content Delivery Network (Microsoft Ajax CDN), visit the following Microsoft website: