Click here to Skip to main content
15,867,488 members
Articles / Web Development / ASP.NET
Article

Simple Chat Application in ASP.NET

Rate me:
Please Sign up or sign in to vote.
4.51/5 (75 votes)
20 Sep 20043 min read 942.8K   60K   240   120
Implementing a simple chat application using ASP.NET and remote scripting.

Introduction

I ran into the problem of creating a chat room where two users can chat directly. I didn't like the idea of using server side code and doing all these post back which is not user friendly. I found that with the use of remote scripting, we can make a simple and fast chat application.

Background

I built this application using the Remote Scripting client and server side implementation provided by Alvaro Mendez: Remote Scripting. I also used some chat room logic from Julien Couvreur.

Code Walkthrough

I'll start by examining the ChatEngine.cs file which contains all the logic. You'll find four classes in this file:

  1. The ChatUser that contains the user info (ID, name, active or not, last seen time, last message received):
    C#
    public class ChatUser : IDisposable    
    {
      public string UserID;
      public string UserName;
      public bool IsActive;
      public DateTime LastSeen;
      public int LastMessageReceived;
      public ChatUser(string id,string userName)
      {
        this.UserID=id;
        this.IsActive=false;
        this.LastSeen=DateTime.MinValue ;
        this.UserName=userName;
        this.LastMessageReceived=0;
      }
      public void Dispose()
      {
        this.UserID="";
        this.IsActive=false;
        this.LastSeen=DateTime.MinValue ;
        this.UserName="";
        this.LastMessageReceived=0;
      }
    }
  2. The Message class contains information about the message (the message text, message type, sender ID):
    C#
    public class Message 
    {
      public string user;
      public string msg;
      public MsgType type;
    
      public Message(string _user, string _msg, MsgType _type) 
      {
        user = _user;
        msg = _msg;
        type = _type;
      }
      public override string ToString()
      {
        switch(this.type)
        {
          case MsgType.Msg:
            return this.user+" says: "+this.msg;
          case MsgType.Join :
            return this.user + " has joined the room";
          case MsgType.Left :
            return this.user + " has left the room";
        }
        return "";
      }
    
    
      public Message(string _user, MsgType _type) : this(_user, "", _type) { }
    
      public Message(MsgType _type) : this("", "", _type) { }
    
    }
    
    public enum MsgType { Msg, Start, Join, Left }
  3. The ChatRoom class:

    Each chat room can have two users only represented by the two members FirstUser and SecondUser. The messages are stored in the ArrayList messages of Message instances. The class contains the common operations for a chat room like joining, sending message and leaving the room.

  4. The ChatEngine class: contains a HashTable of chat rooms.

Other operations in the class include creating new rooms and deleting the empty chat rooms.

Building The Application

I will build a simple app to demonstrate the usage of the Chat Engine classes. First, we create a simple page (default.aspx) where the user can enter his nickname (which is saved in the session). After that, the user enters the nickname of the other user he wants to chat with. The two user names are used to create the ID of the chat room. Then the user is redirected to chat.aspx with the name of the other passed in the query string and saved in a hidden variable.

In Chat.aspx, a chat room is created for the two users:

C#
private void Page_Load(object sender, System.EventArgs e)
{
  if (AMS.Web.RemoteScripting.InvokeMethod(this))
       //if this is a callback function return
    return;

  txtMsg.Attributes.Add("onkeypress", "return clickButton(event,'btn')");
  
  if (!IsPostBack)
  {
    if (Request.QueryString["userid"]!=null 
            && Request.QueryString["userid"]!="")
    {
      otherUser.Value=Request.QueryString["userid"];
      ChatRoom room=ChatEngine.GetRoom(Session["UserName"].ToString() ,
          Request.QueryString["userid"]);
      string s=room.JoinRoom(Session["UserName"].ToString(),
          Session["UserName"].ToString() );
      txt.InnerText=s;
      string strScript="< script >startTimer();< /script >";
      this.RegisterClientScriptBlock("timerScript",strScript);
    }
    else
    {
      Response.Write("User id Missing");
    }
  }
}

On the client side, remote scripting is used to send messages to the chat room. Using Alvaro Mendez's implementation, calling server functions from the client is very simple. For example, when the user clicks the Enter key in the text box, a message is sent to the chat room using the following script:

JavaScript
//Chat.aspx
function clickButton(e, buttonid)
{ 
  var bt = document.getElementById(buttonid); 
  if (typeof bt == 'object')
    { 
      if(navigator.appName.indexOf("Netscape")>(-1)){ 
      if (e.keyCode == 13)
      { 
        bt.click(); 
        return false; 
      } 
    } 
  if (navigator.appName.indexOf("Microsoft Internet Explorer")>(-1))
    { 
      if (event.keyCode == 13)
      { 
        bt.click(); 
        return false; 
      } 
    } 
  }   
} 
function button_clicked()
{
  RS.Execute("Chat.aspx", "SendMessage",document.Form1.txtMsg.value,
document.Form1.otherUser.value, callback, errorCallback);
  document.Form1.txtMsg.value="";
  document.Form1.txt.scrollIntoView("true");
}
function callback(result)
{
  document.Form1.txt.value=document.Form1.txt.value+result;
  document.Form1.txt.doScroll();
}
function errorCallback(result)
{
  alert("An error occurred while invoking the remote method: " 
  + result);
}

The RS object is defined in the rs.js file, so you have to include it in the aspx page. The Execute method takes the name of the page (chat.aspx) in the first parameter, and the name of the function in the second parameter. This function must be a public function in the page class you pass as the parameter of the server function to the Execute function. The last two parameters are for the callback and error callback functions. The result of the server function is passed as an argument to the callback function.

C#
//Chat.aspx.cs
public string SendMessage(string msg,string toUserID)
{
  try
  {
    ChatRoom room=ChatEngine.GetRoom(Session["UserName"].ToString() ,toUserID);
    string res="";
    if (room!=null)
    {
      res=room.SendMessage(msg,Session["UserName"].ToString() ,toUserID);
    }
    return res;
  }
  catch(Exception ex)
  {
    
  }
  return "";
}

As you can see, SendMessage takes the message as a parameter and the ID of the other user, adds this message to the chat room, and returns all the messages that have been sent that the user didn't receive yet.

The user can leave the room by clicking the Exit button.

C#
private void btnExit_Click(object sender, System.EventArgs e)
{
  try
  {
    ChatRoom room=ChatEngine.GetRoom(Session["UserName"].ToString(), 
                  Request.QueryString["userid"]);
    room.LeaveRoom(Session["UserName"].ToString() );
    Response.Redirect("default.aspx");
  }
  catch(Exception ex)
  {
    
  }
}

I also added a client side function that handles the onunload event of the form.

JavaScript
//Chat.aspx
function Leave()
{
  RS.Execute("Chat.aspx", "LeaveRoom",document.Form1.otherUser.value);
}
C#
//Chat.aspx.cs
public string LeaveRoom(string otherUser)
{
  try
  {
    ChatRoom room=ChatEngine.GetRoom(Session["UserName"].ToString() ,otherUser);
    if (room!=null)
            room.LeaveRoom(Session["UserName"].ToString() );
  }
  catch(Exception ex)
  {
    
  }
  return "";
}

Remaining is to periodically update the client to receive the messages sent from the other user. A simple solution is to add a timer that makes a remote call to the server function.

JavaScript
//Chat.aspx
var interval = "";
var i = 5;

function startTimer()
{
  interval = window.setInterval("tTimer()",1000);
} 
function stopTimer()
{
  window.clearInterval (interval);
  interval="";
}
function tTimer()
{
  RS.Execute("Chat.aspx", "UpdateUser",document.Form1.otherUser.value, 
         callback, errorCallback);  
}
C#
//Chat.aspx.cs
public string UpdateUser(string otherUserID)
{
  try
  {
    ChatRoom room=ChatEngine.GetRoom(Session["UserName"].ToString() ,
      otherUserID);
    if (room!=null)
    {
      string res="";
      if (room!=null)
      {
        res=room.UpdateUser(Session["UserName"].ToString());
      }
      return res;
    }
  }
  catch(Exception ex)
  {
    
  }
  return "";
}

A timer is added on the server to periodically clean and remove the empty chat rooms.

C#
//Global.asax.cs
Timer ChatRoomsCleanerTimer=new System.Threading.Timer(
   new TimerCallback(ChatEngine.CleanChatRooms),null,3600000,3600000);
C#
//ChatEngine.cs
public static void CleanChatRooms(object state)
{
  Monitor.Enter(Rooms);
  foreach(object key in Rooms.Keys)
  {
    ChatRoom room=(ChatRoom)Rooms[key.ToString()];
    room.ExpireUsers(100);
    if (room.IsEmpty())
    {
      room.Dispose();
      Rooms.Remove(key.ToString());
    }
  }
  Monitor.Exit(Rooms);

}

Points of Interest

You can easily extend the ChatRoom class to allow multiple users per chat room.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


Written By
Software Developer (Senior)
Egypt Egypt
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
Questionhow can I forcefully open a window? Pin
Ajita Kumar Satpathy15-Nov-10 2:06
Ajita Kumar Satpathy15-Nov-10 2:06 
GeneralASP.NET + Jquery Chat Pin
Ali Kazmi6-Aug-10 6:14
Ali Kazmi6-Aug-10 6:14 
Generalunable to run project on my laptop Pin
Rami1122-Jun-10 8:39
Rami1122-Jun-10 8:39 
Generalhello sir Pin
rteswaran31-Mar-10 19:07
rteswaran31-Mar-10 19:07 
Generalweb projekt component not installed !! Pin
šprici2-Mar-10 4:26
šprici2-Mar-10 4:26 
GeneralURGENT!!! user is typing a message Pin
baharango16-Jan-10 22:56
baharango16-Jan-10 22:56 
GeneralRe: URGENT!!! user is typing a message Pin
šprici2-Mar-10 4:26
šprici2-Mar-10 4:26 
GeneralRe: URGENT!!! user is typing a message Pin
DuncanOtieno22-May-12 5:33
DuncanOtieno22-May-12 5:33 
Cmon! Nobody knows?
GeneralRe: URGENT!!! user is typing a message Pin
vValkir4-Jul-12 1:36
vValkir4-Jul-12 1:36 
GeneralRequest for data entry form and access db Pin
faizi.nasir28-Nov-09 1:32
faizi.nasir28-Nov-09 1:32 
QuestionReg : Private chat Pin
gopalanmani10-Nov-09 2:21
gopalanmani10-Nov-09 2:21 
Answerpublic chat Pin
Decepticons15-Nov-09 23:35
Decepticons15-Nov-09 23:35 
GeneralAdding Sound For IM & Users Entering the room Pin
James Forsythe13-Jan-09 6:07
James Forsythe13-Jan-09 6:07 
Generalhow to implement this code... Pin
mayur_818922-Apr-10 8:57
mayur_818922-Apr-10 8:57 
QuestionVB.net version Pin
CurtSWRT1-Dec-08 0:54
CurtSWRT1-Dec-08 0:54 
GeneralRe: VB.net version Pin
biddydee17-Feb-09 4:46
biddydee17-Feb-09 4:46 
GeneralAbout livechat script Pin
yogita kanire27-Nov-08 19:46
yogita kanire27-Nov-08 19:46 
GeneralGmail chat Pin
Aravind198328-Aug-08 5:10
Aravind198328-Aug-08 5:10 
GeneralHi Pin
v-bhpati30-Jun-08 12:58
v-bhpati30-Jun-08 12:58 
GeneralAdd emotions(smileys) Pin
cooolremo10-Jun-08 0:26
cooolremo10-Jun-08 0:26 
Questionpop up of private chat when msg sent? Pin
cooolremo6-Jun-08 2:36
cooolremo6-Jun-08 2:36 
GeneralGreat Job Pin
Shyana26-May-08 3:26
Shyana26-May-08 3:26 
Questionhow to run this application Pin
Gayathri_Sridaran18-May-08 22:24
Gayathri_Sridaran18-May-08 22:24 
GeneralGmail chat / Yahoo messanger Pin
sharewithme2624-Feb-08 20:26
sharewithme2624-Feb-08 20:26 
GeneralIssue I found Pin
Member 175104814-Jan-08 0:15
Member 175104814-Jan-08 0:15 

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.