Click here to Skip to main content
Click here to Skip to main content

A Sample Chat Application using Mike Schwarz's AJAX Library

, 15 Mar 2006
Rate this:
Please Sign up or sign in to vote.
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:

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

Add an HTTP handler section to web.config:

<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:

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:

//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

Share

About the Author

K.sundar
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 Pinmemberqusai8422-Apr-11 3:24 
GeneralMy vote of 4 Pinmemberqusai8422-Apr-11 3:22 
QuestionHow to save the chat information PinmemberNaga Raju Vutla19-Aug-09 19:33 
GeneralDatabase for this project Pinmembermharoon bhatti11-Dec-08 21:40 
GeneralGood! PinmemberJasonC7213-Oct-08 6:26 
QuestionChat messenger allows 1-to-1 communication [modified] PinmemberMember 29618457-Apr-08 22:38 
GeneralExcelent sample!! [modified] PinmemberZeus>Segundo29-Aug-07 9:10 
Generalhelp needed Pinmembervimala soujanya21-Jun-07 21:58 
GeneralRe: help needed Pinmemberarindam.roy27-Oct-07 0:52 
Questionhow to display text as it is send Pinmemberlata kumari10-Jun-07 21:18 
GeneralNice PinmemberMember #35781938-Mar-07 20:30 
QuestionQuery Pinmembervcksaran22-Sep-06 0:04 
Questionuser status Pinmemberjasine8-Aug-06 0:41 
Generalsimple and effictive PinmemberRamesh Ramalingam5-Aug-06 2:00 
GeneralAjax enabled DataGrid - Chat Application Example PinmemberOmegaCD26-May-06 3:59 
GeneralCool PinmemberJerok7812-May-06 10:53 

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

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

| Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.1411023.1 | Last Updated 15 Mar 2006
Article Copyright 2006 by K.sundar
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid