Click here to Skip to main content
15,860,861 members
Articles / Web Development / ASP.NET

Build a Web based Chat using ASP.NET Ajax

Rate me:
Please Sign up or sign in to vote.
4.68/5 (42 votes)
24 Feb 2010CPOL2 min read 260.5K   19.6K   167   70
Build a GMail like web based chat using ASP.NET Ajax that can handle several requests and simultaneous users
SampleChat
Screenshot of a conversation using the chat

Introduction

I will show you how to build a Web-based chat using ASP.NET 2.0/3.5, ScriptServices and a SQL Server database, that can handle several requests and simultaneous users.

The source provided is pretty much ready to be copied and pasted into any 3.5 web application.

Requirements

  • The chat application must be HTTP-based. No other protocol allowed.
  • The application must allow multiple chat rooms.
  • The user can leave the room without notifying the application.
  • The list of chatters in the room must reflect the latest changes with a delay not greater than (for example) 5 seconds.
  • The messages list must be retrieved with a delay not greater than (for example) 2 seconds.

Application State

As in HTTP the connection is closed after a single request/response pair, you have to simulate the status of being connected to the chat room. I accomplish that by having an application state object of the chat users. Also, as you don't have a notification when the user is disconnected, you will have to check regularly for the latest activity from the user in order to manually remove it from the chat users list.

C#
public void ValidateUsers(TimeSpan maxInterval)
{
    List<int> toDelete = new List<int>();
    foreach (System.Collections.Generic.KeyValuePair<int> keyValue in this.Users)
    {
        //Identify which users don't have recent activity
        if (DateTime.Now.Subtract(keyValue.Value.LastActivity) > maxInterval)
        {
            toDelete.Add(keyValue.Key);
        }
    }
    //Remove them from the current users list
    //...
}        

Ajax Enabled Webservice

The Ajax service exposes four methods:

  • EnterRoom: It assigns the user to the chat room by adding the user to the room users list.
  • CheckMessages: It's responsible to get the latest message from the database and check the users list.
  • SendMessage: It saves the message and checks the users list, returning the latest messages.
  • CheckUsers: It validates all the users list from the chat room by getting the latest activity from the users and, if the list changed, returns the new users list.

Client Scripting

The client script is responsible to refresh the list of messages on the screen by using setTimeout to Ajax calls.

Here you can see the JavaScript that makes the request to the webservice and its callbacks.

JavaScript
Codeproject.Chat.EnterRoom = function()
{
    //Calls the web service to enter the chat
    SampleChat.Chat.Services.ChatService.EnterRoom(Codeproject.Chat.RoomId,
        Codeproject.Chat.EnterRoomCallback);
}
//EnterRoom Callback
Codeproject.Chat.EnterRoomCallback = function(lastMessageId)
{
    //Store the last message id in a JavaScript global variable
    Codeproject.Chat.LastMessageId = lastMessageId;
    //Remove the loading message
    Codeproject.Chat.MessagePanel.className = "";
    //Get the users list
    Codeproject.Chat.CheckUsers();
    //Get the messages list
    Codeproject.Chat.CheckMessages();
}
//Updates the users list
Codeproject.Chat.CheckUsers = function ()
{
    //Check and validate users in the webservice
    SampleChat.Chat.Services.ChatService.CheckUsers(Codeproject.Chat.CheckUsersCallback);
    //Timer to check users
    setTimeout(Codeproject.Chat.CheckUsers, Codeproject.Chat.CheckUsersRefresh);
}
Codeproject.Chat.CheckUsersCallback = function(response)
{
    if (response.Users.length > 0)
    {
        Codeproject.Chat.ArrangeUsers(response.Users);
    }
}
Codeproject.Chat.CheckMessages = function ()
{
    //Calls the web service to check for new messages
    SampleChat.Chat.Services.ChatService.CheckMessages(Codeproject.Chat.LastMessageId,
        Codeproject.Chat.CheckMessagesCallback);
    //Set the timer to check the messages next time.
    setTimeout(Codeproject.Chat.CheckMessages, Codeproject.Chat.CheckMessagesRefresh);
}
Codeproject.Chat.CheckMessagesCallback = function(response)
{
    if (response.Messages.length > 0)
    {
        //Store the last message id
        Codeproject.Chat.LastMessageId = response.LastMessageId
        //Show the latest message in the message list
        Codeproject.Chat.ArrangeMessages(response.Messages);
    }
    if (response.Users.length > 0)
    {
        //Show the latest message in the message list
        Codeproject.Chat.ArrangeUsers(response.Users);
    }
}
Codeproject.Chat.SendMessage = function ()
{
	var message = Codeproject.Chat.MessageTextbox.value;
	if (message.trim() != "")
	{
		SampleChat.Chat.Services.ChatService.SendMessage(message,
			Codeproject.Chat.LastMessageId,
			Codeproject.Chat.CheckMessagesCallback);
		Codeproject.Chat.MessageTextbox.focus();
		Codeproject.Chat.MessageTextbox.value = "";
	}
}

All the client script needed to run the chat is provided in the source under the namespace: Codeproject.Chat.

Database

Here is the design of the database table used by the chat.

As the amount of records may grow a lot in a few hours/days, it's very important to query this table through its clustered index, getting only the new messages since the previous message you retrieved (storing in the user state the Id of the last message retrieved).

SQL
CREATE TABLE [dbo].[ChatMessages](
    [MessageId] [int] IDENTITY(1,1) NOT NULL,
    [RoomId] [int] NOT NULL,
    [MessageBody] [varchar](250) COLLATE SQL_Latin1_General_CP1_CI_AS NOT NULL,
    [MessageDate] [datetime] NOT NULL,
    [UserId] [int] NOT NULL,
    [IsSystem] [bit] NOT NULL,
 CONSTRAINT [PK_ChatMessages] PRIMARY KEY CLUSTERED
(
    [MessageId] ASC
)WITH (IGNORE_DUP_KEY = OFF) ON [PRIMARY]
) ON [PRIMARY]

Hope you enjoy it!

History

  • March 2nd, 2009 - Article submitted
  • March 9th, 2009 - Article body extended
  • February 24th, 2010 - JS improved

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer
Spain Spain
Jorge has been working in Software development for more than 10 years. Born in Argentina, he lives in Spain since 2004.

He worked as a consultant for mayor companies including Log, HP and Avanade and holds some technical certifications including MCSD and MCAD.

He is the founder of the asp.net mvc forum open source project Nearforums, the Node.js Cassandra driver and the owner of the news release site prsync.com.

Follow him on Twitter: twitter.com/jorgebg

Contact: jorgebaygondra at gmail

Comments and Discussions

 
Questionproject Pin
Member 1211685830-Aug-16 1:15
Member 1211685830-Aug-16 1:15 
GeneralGood job Pin
josemgz14-Oct-15 1:34
josemgz14-Oct-15 1:34 
QuestionThank you Pin
Er. Neel Kamal9-May-15 6:09
professionalEr. Neel Kamal9-May-15 6:09 
QuestionSMS chatting Pin
ineedfriday12-Sep-14 6:56
ineedfriday12-Sep-14 6:56 
QuestionI am using this chat project made by you. Pin
ADI@34518-Jun-14 22:32
ADI@34518-Jun-14 22:32 
Questionmessage panel name not change: Pin
Jishnu Chandran22-Nov-13 21:29
Jishnu Chandran22-Nov-13 21:29 
QuestionThank you - think this will be great but I'm getting an error in the web.config so can't run it yet Pin
Member 34028866-Nov-13 19:31
Member 34028866-Nov-13 19:31 
QuestionSCRIPT5022: Sys.Net.WebServiceFailedException in iFrame Pin
siva@attur1219-Aug-13 4:01
siva@attur1219-Aug-13 4:01 
GeneralMy vote of 5 Pin
csharpbd13-Nov-12 18:57
professionalcsharpbd13-Nov-12 18:57 
QuestionGood work Pin
mzukisi mndwangu30-Oct-12 22:21
mzukisi mndwangu30-Oct-12 22:21 
AnswerRe: Good work Pin
Jorge Bay Gondra30-Oct-12 22:54
Jorge Bay Gondra30-Oct-12 22:54 
QuestionGood Pin
Ajay Kumar Tiwari From Mumbai4-Jun-12 2:49
Ajay Kumar Tiwari From Mumbai4-Jun-12 2:49 
Questioncall masterpage at runtime Pin
uttam201028-Mar-12 20:52
uttam201028-Mar-12 20:52 
QuestionMicrosoft JScript runtime error: 'Codeproject' is undefined Pin
mmckaarshe31-Jan-12 6:47
mmckaarshe31-Jan-12 6:47 
AnswerRe: Microsoft JScript runtime error: 'Codeproject' is undefined Pin
Jorge Bay Gondra1-Feb-12 21:43
Jorge Bay Gondra1-Feb-12 21:43 
QuestionCould not load type 'SampleChat.Chat.Controls.Chat Pin
solutioner9911-Dec-11 22:24
solutioner9911-Dec-11 22:24 
subject mentioned error occurred for me. please guide.
AnswerRe: Could not load type 'SampleChat.Chat.Controls.Chat Pin
Jorge Bay Gondra11-Dec-11 22:41
Jorge Bay Gondra11-Dec-11 22:41 
GeneralRe: Could not load type 'SampleChat.Chat.Controls.Chat Pin
solutioner9912-Dec-11 0:03
solutioner9912-Dec-11 0:03 
GeneralRe: Could not load type 'SampleChat.Chat.Controls.Chat Pin
Jorge Bay Gondra12-Dec-11 0:45
Jorge Bay Gondra12-Dec-11 0:45 
GeneralRe: Could not load type 'SampleChat.Chat.Controls.Chat Pin
solutioner9912-Dec-11 0:53
solutioner9912-Dec-11 0:53 
Question2chat room Pin
vidyasagarreddy1435-Dec-11 20:38
vidyasagarreddy1435-Dec-11 20:38 
QuestionMejora Pin
RichardEm14-Oct-11 9:09
RichardEm14-Oct-11 9:09 
Questionhow to add room id dynamically Pin
mahabubur rahman2-Oct-11 23:42
mahabubur rahman2-Oct-11 23:42 
AnswerRe: how to add room id dynamically Pin
tamannashah199315-Nov-11 22:51
tamannashah199315-Nov-11 22:51 
GeneralRe: how to add room id dynamically Pin
mahabubur rahman16-Nov-11 0:42
mahabubur rahman16-Nov-11 0:42 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.