Sample Downloads: http://code.msdn.microsoft.com/CSASPNETAJAXWebChat-c4c9b8fe
Today’s sample demonstrates how to design a simple AJAX web chat application. We use jQuery, ASP.NET AJAX at client side and Linq to SQL at server side. In this sample, we could create a chat room and invite someone else to join in the room and start to chat.
You can find more code samples that demonstrate the most typical programming scenarios by using Microsoft All-In-One Code Framework Sample Browser or Sample Browser Visual Studio extension. They give you the flexibility to search samples, download samples on demand, manage the downloaded samples in a centralized place, and automatically be notified about sample updates. If it is the first time that you hear about Microsoft All-In-One Code Framework, please watch the introduction video on Microsoft Showcase, or read the introduction on our homepage http://1code.codeplex.com/.
The project demonstrates how to design a simple AJAX web chat application. We use jQuery, ASP.NET AJAX at client side and Linq to SQL at server side. In this sample, we could create a chat room and invite someone else to join in the room and start to chat.
Open the CSASPNETAJAXWebChat.sln directly, expand the WebChat web application node and press F5 to test the application.
If you want to have a further test, please follow the demonstration step below.
Step 1: Press F5 to open the default.aspx.
Step 2: By default, we could see two chat rooms in the list, you can click the button, "Create chat room", to create your own chat room. Before that button, we could see a textbox, we can input our chatting alias before joining into the room.
Step 3: Click any "Join" button at the end of each row. You will see a popup chat room window.
Step 4: Open a new browser and make the same steps to impersonate another user to join in the same chat room.
Step 5: When we input one message, we will see both of the chat room windows will show the messages.
Step 1. Create an ASP.NET Web Application. In this sample it is "WebChat".
Step 2. Right-click the App_Data directory, and click Add -> New Item –> SQL Server DataBase. In this sample it is "SessionDB.mdf".
Step 3. Open the database file and create four tables.
* tblChatRoom: store chat room data.
* tblMessagePool: store the chat message data temporarily.
* tblSession: store the user session data.
* tblTalker: store the user data who in the chat rooms.
The details columns for these tables, please refer to the SessionDB.mdf in this sample.
Step 4. Create a new directory, "Data". Right-click the directory and click Add -> New Item -> Linq to SQL classes.(If you could not find that template, please click the Data node of the tree view at the left hand.) In this sample, it is SessionDB.dbml.
Step 5. Open the SessionDB.dbml and double-click the SessionDB.mdf, you will see the database in the Server Explorer. Expand the SessionDB.mdf, expand the Tables folder, and select the four tables, and drag them all to the stage of the SessionDB.dbml.
Step 6. Create a new directory, "Logic". We need to create some class files.
* ChatManager.cs: we have some static methods to control the data in the database by using Linq.
* ChatRoom.cs: it is a DataContract used to send the chat room data to the client side by WCF service.
* Message.cs: it is a DataContract used to send the message data to the client side by WCF service.
* RoomTalker.cs: it is a DataContract used to send the talker data in one chat room to the client side by WCF service.
For the details of these classes, please refer to these four files in this sample.
Step 7. Create a new directory, "Services". Right-click the directory and click Add -> New Item -> AJAX-enabled WCF service. In this sample, it is Transition.svc.
Add these two attributes for that class to make sure that the session is allowed.
[ServiceContract(Namespace = "http://CSASPNETAJAXWebChat", SessionMode = SessionMode.Allowed)] [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
In this file, we create some WCF service method which could be used by the client side to execute.
For the details of these classes, please refer to the Transition.svc in this sample.
* csaspnetajaxwebchat is the namespace for this application.
* transition is the service name.
* LeaveChatRoom is the method name.
Because of this method has one parameter, the RoomID stands for that parameter, if we have two or more parameters for one methed, just write them before SuccessCallBack.
* SuccessCallBack is a function used to be fired when the service called successfully.
* FailCallBack is a function used to be fired when the service called unsuccessfully.
For more details about these script functions, please refer to the files in this sample.(chatbox.js, chatMessage.js, chatRoom.js)
Step 9. Open the Default.aspx,(If there is no Default.aspx, create one.)
Create a ScriptManager control and add a service reference and a script reference like below.
<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, add some js and css references from the CDN.
We use these references to make this sample to write code easier and looks better. There are some other UI markups, please refer to the Default.aspx in this sample. For more details about CDN, please view the links listed in the References part at the end of this ReadMe file.
Step 10. Create a new web page. In this sample, it is "ChatBox.aspx". In that page, we create some UI controls to send and receive messages. For more details, please refer to the ChatBox.aspx in this sample.
MSDN: How to: Create an AJAX-Enabled WCF Service and an ASP.NET Client that Accesses the Service
MSDN: LINQ to SQL: .NET Language-Integrated Query for Relational Data
MSDN: Explore Rich Client Scripting With jQuery
ASP.NET: Microsoft Ajax Content Delivery Network(Microsoft Ajax CDN)