Click here to Skip to main content
15,868,141 members
Articles / Web Development / HTML
Article

A Sample Chat Application using Mike Schwarz's AJAX Library

Rate me:
Please Sign up or sign in to vote.
4.14/5 (17 votes)
15 Mar 20061 min read 114.7K   2.5K   59   16
An article on developing a chat application using AJAX and .NET.

Sample Image

Introduction

This article describes a sample chat application using Mike Schwarz's AJAX library. With the development of AJAX as a new development mode for the Web, every one seems to be more interested in it. Here, I have used an AJAX library for .NET developed by Mike Schwarz. This library is basically an HTTP handler which redirects AJAX requests from a client to the appropriate types. This library in turn uses JSON - JavaScript Object Notation which is a data-interchange format; using JSON, we can access even complex types on the client side.

Using the code

To use Schwarz's AJAX library, we have to register the type which we want to associate for AJAX calls:

C#
// Register
Ajax.Utility.RegisterTypeForAjax(typeof(Chat));

Add an HTTP handler section to web.config:

XML
<httpHandlers>
    <add verb="POST,GET" path="ajax/*.ashx" 
         type="Ajax.PageHandlerFactory, Ajax" />
</httpHandlers>

You can find further details in the library documentation. Now, to start out with the code: the application mainly consists of two files, Chat.aspx and DragAndPost.js. The DragAndPost.js consists of a function which posts the AJAX request and gets a hashtable back and populates the open chat rooms.

You will have a context menu to open private chat rooms to which you can use the same context to invite as well. The source code is pretty simple, all we need to do is configure a lot of things in JavaScript, like opening divs on double click etc. Post your comments, so that I can improve it.

This function creates a div on the double click of a chat room:

JavaScript
function CreateDiv(DivID,Roomid)
{
    ParentElement=document.getElementById("TRCHAT");
    var Divelement=document.createElement("DIV");
    Divelement.align="right";
    Divelement.setAttribute('id',DivID);
    Divelement.setAttribute('name',DivID);
    Divelement.style.width=250;
    Divelement.style.height=300;
    Divelement.style.left=200;
    Divelement.style.top=170;
    Divelement.style.position='absolute';
    Divelement.style.background='#9fc9d3';
    Divelement.style.cursor='Move';
    ParentElement.appendChild(Divelement);
    /
    /
}
//The Drag part of Div is handled By
function movemouse(e)
{
  if (isdrag)
  {
    fobj.style.left = nn6 ? tx + e.clientX - x : 
                            tx + event.clientX - x;
    fobj.style.top  = nn6 ? ty + e.clientY - y : 
                            ty + event.clientY - y;
    return false;
  }
}
function selectmouse(e) 
{
  fobj = nn6 ? e.target : event.srcElement;
  if (fobj.parentElement.tagName!="DIV" 
                 && fobj.tagName=="DIV")
  {
        isdrag = true;
        tx = parseInt(fobj.style.left+0);
        ty = parseInt(fobj.style.top+0);
        x = nn6 ? e.clientX : event.clientX;
        y = nn6 ? e.clientY : event.clientY;
        document.onmousemove=movemouse;
        return false;
  }
}
document.onmousedown=selectmouse;
document.onmouseup=new Function("isdrag=false");

I have used a string builder like class to speed up the client side string manipulation:

JavaScript
//StringBufferLikeClase
function StringBuffer() { 
  this.buffer = [];
} 

StringBuffer.prototype.append = 
  function append(string) { 
    this.buffer.push(string); 
    return this; 
}; 

StringBuffer.prototype.toString = 
  function toString() { 
    return this.buffer.join(""); 
};

History

  • Posted on March 07, 2006.

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
Web Developer
India India
Hi,
i had been programming in .NET for 2 years,
Visit me at my Space
http://spaces.msn.com/ksundar

Comments and Discussions

 
Generalnice but needs some enhancement Pin
qusai8422-Apr-11 2:24
qusai8422-Apr-11 2:24 
GeneralMy vote of 4 Pin
qusai8422-Apr-11 2:22
qusai8422-Apr-11 2:22 
QuestionHow to save the chat information Pin
Nag242519-Aug-09 18:33
Nag242519-Aug-09 18:33 
GeneralDatabase for this project Pin
mharoon bhatti11-Dec-08 20:40
mharoon bhatti11-Dec-08 20:40 
GeneralGood! Pin
JasonC7213-Oct-08 5:26
JasonC7213-Oct-08 5:26 
QuestionChat messenger allows 1-to-1 communication [modified] Pin
Mr. Saikat Choudhury7-Apr-08 21:38
Mr. Saikat Choudhury7-Apr-08 21:38 
GeneralExcelent sample!! [modified] Pin
zSegundo29-Aug-07 8:10
zSegundo29-Aug-07 8:10 
Generalhelp needed Pin
vimala soujanya21-Jun-07 20:58
vimala soujanya21-Jun-07 20:58 
ok ...the chat application is very cool and very user friendly.
I have done a slight modification to your chat application such that when we click on the user name ,the pop window opens and it enables us to chat with that particular user in a separate roo.But ,iam facing difficulty in chatting with the particular user.Whenever i click on a particular user ,the pop-up window opens but when i type any message in that window it is displaying null .Can you suggest me to overcome this problem.

Soujanya
GeneralRe: help needed Pin
arindam.roy26-Oct-07 23:52
arindam.roy26-Oct-07 23:52 
Questionhow to display text as it is send Pin
lata kumari10-Jun-07 20:18
lata kumari10-Jun-07 20:18 
GeneralNice Pin
Member 35781938-Mar-07 19:30
Member 35781938-Mar-07 19:30 
QuestionQuery Pin
vcksaran21-Sep-06 23:04
vcksaran21-Sep-06 23:04 
Questionuser status Pin
jasine7-Aug-06 23:41
jasine7-Aug-06 23:41 
Generalsimple and effictive Pin
Ramesh Ramalingam5-Aug-06 1:00
Ramesh Ramalingam5-Aug-06 1:00 
GeneralAjax enabled DataGrid - Chat Application Example Pin
OmegaCD26-May-06 2:59
OmegaCD26-May-06 2:59 
GeneralCool Pin
-JeRoK-12-May-06 9:53
-JeRoK-12-May-06 9:53 

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.