Building an AJAX based chat room in ASP.NET

• Download demo project - 91.5 Kb

Introduction

I built my first chat room using ASP 3.0. It was nothing more than two text boxes that sent messages to an application variable that gets put on the page when it refreshes every second. At that time, building a true chartroom required using a Java Applet or an ActiveX control. HTTP based chart rooms suffered from the same issues my basic chat room suffered from. These issues included constant page refreshes which causes an annoying flicker and sound. That has changed with the introduction of AJAX. AJAX is the combination of Asynchronous calls with JavaScript and XML. A true chat room could now be built using server side code with some JavaScript. This article is not an introduction to AJAX. It is assumed that you have a basic knowledge of using AJAX with ASP.NET. This article is an introduction to using AJAX techniques to create a basic chat room.

The sample application

The sample application is a single chat room with many users. It maintains a list of users that gets populated as users log in. The list gets shorter as a user session times out. The chat room also permits the execution of some command-line-like functions such as /admin clear which clears the chat room, and /nick [Name] which changes the current user's nickname.

What you need to know

This application uses a class called ChatEngine. This class handles all chat room messages and users. Users are stored in a Hashtable, and messages are stored in a StringCollection.

Hashtable users;
StringCollection chat;

A global instance of ChatEngine is declared in Global.asax.cs to be shared by all users of the chat room:

public static UChat.ChatEngine.IChatEngine Engine = 
              new UChat.ChatEngine.ChatEngine();

A JavaScript timer function is used to asynchronously pull data from the global variable and renders it on the page.

function setTimers()
{
  timeID = window.setTimeout( "updateAll()", refreshRate );
}

Each user is identified by a supplied username and a GUID.

public void AddUser(string id, string user)
{
      //make sure user name does not exist already

      if( !UserExists( user ) )
      {
            //add user to users list

            users.Add( id, user );
                                    
            //display a notification message to all users 

            chat.Add( this.MakeServerMessage(string.Format(
                      joinedfmt, user ) ));
      }
}

Screenshots and application workflow

The default page shows the basic info of the current chat session, such as number of users and the size of the chat log. In order for a user to join the chat room, a user name must be supplied.

When the Login button is clicked, the following function is executed:

protected void Login( object sender, EventArgs e )
{
      string user = txtUsername.Text;

      if( !ValidateNick( user ) ) return;

      if( Global.Engine.UserExists( user ) )
      {
            lblErrorMsg.Text = "A user with this " + 
                 "name already exists, try again.";
            return;
      }
      Response.Redirect( "Server.aspx?action=Login&u=" + user );
}

After some validation, the user is directed to a page where he is added to the users' list using the AddUser function above. When this is done, the user is redirected to the chat.aspx page where the following JavaScript functions are executed:

<script type="text/javascript">
      sniffBrowserType();
      //Shows loading.. screen

      showLoadScreen();
      //Set the javascript timer and 

      //loads user list and messages 

      setTimers();
      setFocus('mytext');
</script>

When a user types some text and hits the Enter key, the following code gets executed:

<input type="text" class="mytext" 
       id="mytext" onkeydown="captureReturn(event)">

// Capture the enter key on the input box and post message

function captureReturn( event )
{
      if(event.which || event.keyCode)
      {
            if ((event.which == 13) || (event.keyCode == 13)) 
            {
                  postText();
                  return false;
            }
            else {
                  return true;
            }
      }     
}
function postText()
{
      rnd++;
      //Clear text box first

      chatbox = getElement( "mytext" );
      chat = chatbox.value;
      chatbox.value = "";
      
      //get user GUID from url

      userid = location.search.substring( 1, location.search.length );
      
      //construct Ajax Server URL

      url = 'Server.aspx?action=PostMsg&u=' + userid + '&t=' +
             encodeURIComponent(chat) + '&session=' + rnd;
      
      //Create and set the instance 

      //of appropriate XMLHTTP Request      object

      req = getAjax();
      
      //Update page with new message

      req.onreadystatechange = function(){
      
            if( req.readyState == 4 && req.status == 200 ) {
                  updateAll();
            }
      }
      
      req.open( 'GET', url, true );
      req.send( null );
}

That is all there is to it. Nothing too fancy. Download the sample application and go through the code. The code has been commented properly.

Conclusion

Building a chat room using a Java Applet requires JVM to be installed on the user’s PC. Using an ActiveX control has security issues attached to it. With the introduction of AJAX, you could build an HTTP based chat-room that does not require the user to download or install software. It is also easy to create and maintain.