Home | Projects | Tutorials | Articles | live chat | Submit Project | Big Vote
 
Ajax Projects
.NET Frameworks
Java Frameworks
PHP Frameworks
Ruby Frameworks
Other Frameworks
Cool AJAX sites
Ajax Resources
Ajax Tools
JavaScript frameworks

 Home /  Tutorials / ASP.NET Ajax Chat Application

ASP.NET Ajax Chat Application





The application includes a class to handle the xml file by some methods to create the xml or load it, to save info, modify it, or remove it. The public methods of this class are:

Read The Full Tutorial.
































Technique

The application includes a class to handle the xml file by some methods to create the xml or load it, to save info, modify it, or remove it. The public methods of this class are:

    * ---------------------------------------------------------------------------
    * void Join(string userName, DateTime dateTime)
    * void Say(string userName, string msg, DateTime dateTime)
    * void Leave(string userName, DateTime dateTime)
    * ---------------------------------------------------------------------------
    * List< string > GetOnlineNames()
    * int GetNumberOfOnlines()
    * List< string > GetMessagesHistory()
    * ---------------------------------------------------------------------------


The Client-side calls (asynchronously using ajax) these methods Join(), Say(), Leave().
And a timer on the Server-side ticks every fixed time (2 seconds in our app.), to read the xml (by calling these methods GetOnlineNames(), GetNumberOfOnlines(), GetMessagesHistory()) and refresh our controls (asynchronously).


The Code
Starting with our XHandle.cs class which is like a chat room, lets see its members:

using System.Linq;
using System.Xml.Linq;
using System.Collections.Generic;

public class XHandle
{
    private string _path;
    private string _xPageName;
    private string _FullPath;

    private XDocument _xDoc;
    private bool _xDocCreated;

    private XElement _usersRoot;
    private int _onlineUsers;
   
    ....
}

The constructor job is to:
Know the path of the App_Data folder (_path), and the name of the xml file (_xPageName), to set the _FullPath that we will be using shortly.
Check to see if the xml file is already created, or create it if it is not.
Collapse

public XHandle(string _path)
    {
        this._path = _path;
        this._xDocCreated = false;
        this._xPageName = "Default";
        this._FullPath = this._path + @"\" + this._xPageName + ".xml";
        this._onlineUsers = 0;

        //Check the xml page if already exist
        LoadXPage();

        //or create it if it doesnt
        if (!_xDocCreated)
        {
            CreateXPage();
        }
       
    }

    public XHandle(string _path, string ChatRoomName)
    {
        this._path = _path;
        this._xDocCreated = false;
        this._xPageName = ChatRoomName;
        this._FullPath = this._path + @"\" + this._xPageName + ".xml";

        //Check the xml page if already exist
        LoadXPage();

        //or create it if it doesnt
        if (!_xDocCreated)
        {
            CreateXPage();
        }

    }

Private Methods
The LoadXPage() and CreateXPage() are private methods to load or create the xml file and set the _xDocCreated bool to true or false;

    private void CreateXPage()
    {
        _xDoc = new XDocument();
        XDeclaration dec = new XDeclaration("1.0", "utf-8", "yes");
        _xDoc.Declaration = dec;
        _usersRoot = new XElement("users");
        _xDoc.Add(_usersRoot);
        _xDoc.Save(_FullPath);
        _xDocCreated = true;
    }

    private void LoadXPage()
    {
        try
        {
            _usersRoot = XElement.Load(_FullPath);
            _xDocCreated = true;
        }
        catch
        {
            _xDocCreated = false;
        }
    }

Creating the xml file will end up with this:

Public Methods
When a user joins the chat, we save their information as name, message, and dateTime, when a user say something we also save their information as name, message, and dateTime, and when they leave we just remove any info that corresponds to their name.
This is the xml file when a user named Ahmed joins the chat

This is the xml file when a user named Ahmed says hello

And finally this is the xml file when the user(s) leave


The three methods Join(..), void Say(..), void Leave(..):
Collapse

    public void Say(string userName, string msg, DateTime dateTime)
    {
        XElement user = new XElement("user");
        XElement elementName = new XElement("name", userName);
        XElement elementLastMsg = new XElement("message", msg);
        XElement elementDate = new XElement("date", dateTime.ToString());
        user.Add(elementName);
        user.Add(elementLastMsg);
        user.Add(elementDate);
        _usersRoot.Add(user);
        _usersRoot.Save(_FullPath);
    }

    public void Join(string userName, DateTime dateTime)
    {
        string systemMsg = userName + " joined chat room.";
        this.Say(userName, systemMsg, dateTime);
    }

    public void Leave(string userName, DateTime dateTime)
    {
        var user = from o in _usersRoot.Elements("user")
                   where (string)o.Element("name").Value == userName
                   select o;

        user.Remove();

        _usersRoot.Save(_FullPath);
    }


Other public methods are methods to get the names, number of all online chatters, and the messages history.
Collapse

    public List< string> GetOnlineNames()
    {
        List< string> names = new List< string>();
        var users = (from o in _usersRoot.Elements("user")
                    select o).Distinct();

        foreach (var user in users)
        {
            if (!names.Contains(user.Element("name").Value))
            {
                names.Add(user.Element("name").Value);
            }
        }
        _onlineUsers = names.Count;

        return names;
    }

    public int GetNumberOfOnlines()
    {
        var users = (from o in _usersRoot.Elements("user")
                     select o).Distinct();
        List< string> names = new List< string>();
        foreach (var user in users)
        {
            //Filter the names to avoid duplicates
            if (!names.Contains(user.Element("name").Value))
            {
                names.Add(user.Element("name").Value);
            }
        }
        if (names.Count > 0)
        {
            _onlineUsers = names.Count;
            return names.Count;
        }
        _onlineUsers = 0;
        return 0;
    }

    public List< string> GetMessagesHistory()
    {
        List< string> messages = new List< string>();
        var users = (from o in _usersRoot.Elements("user")
                     where o.Element("message").Value != string.Empty
                     orderby DateTime.Parse(o.Element("date").Value) ascending
                     select o).Distinct();
        foreach (var user in users)
        {
            string fullString = user.Element("name").Value + " : " + user.Element("message").Value;
            if (!messages.Contains(fullString))
            {
                messages.Add(fullString);
            }
        }
        return messages;
    }


Well, now we are done with our class, we have the ability to get the online names, the number of them, and the messages history (this means if someone started the chat at x time and another one joined the chat after 30 minutes from x, the last one will get the messages history since the chat has been started..).

In the Page_Load event, we are going to:

    * Register the page to the Anthem Manager to allow it to be called from client-side script.
    * Get an instance of the XHandle class.
    * Get the number of online chatters if there is.
    * Set a fixed time (may be 2 seconds) as the timer interval
    * Subscribe to the Tick event
    * Attach the refreshing controls methods to delegates, So we can invoke them asynchronously.

Collapse

public partial class ChatRoom : System.Web.UI.Page
{
    XHandle xmll;
   
    List< string> names;
    List< string> msgs;

    private delegate void AsyncCallingNames();
    private delegate void AsyncCallingMessages();

    AsyncCallingNames callerNames;
    AsyncCallingMessages callerMessages;

    protected void Page_Load(object sender, EventArgs e)
    {
        Anthem.Manager.Register(this);

        xmll = new XHandle(Server.MapPath("App_Data"), "FirstChatRoom");
        //Get chat room name from user or chat admin

        int x = xmll.GetNumberOfOnlines();
        if (Session["userName"] != null)
        {
            LabelError.Text = "Online, Users Online: " + x.ToString();
        }
        else
        {
            LabelError.Text = "Offline, Users Online: " + x.ToString();
        }

        Timer1.Interval = 2;
        //I set it to 1 second, and it wroked well

        Timer1.Tick += new EventHandler(Timer1_Tick);

        callerNames = new AsyncCallingNames(this.RefreshListNames);
        callerMessages = new AsyncCallingMessages(this.RefreshMessages);
    }
   
    .....

}

Now we have 2 jobs:

    * Join, say and leave, This is done by:
          o Join button click event handler
          o Send button click event handler
          o onunload client-side script event handler
          o
            Collapse

                protected void ButtonJoin_Click(object sender, EventArgs e)
                {
                    if (Session["userName"] == null)
                    {
                        Session["userName"] = TextBoxName.Text.ToString();
                        xmll.Join(Session["userName"].ToString(), DateTime.Now);

                        TextBoxName.Enabled = false;

                        Timer1.StartTimer();

                        TextBoxType2.Focus();
                    }
                }
                protected void ButtonSend_Click(object sender, EventArgs e)
                {
                    if (Session["userName"] != null)
                    {
                        string name = (string)Session["userName"];
                        string msg = TextBoxType2.Text.ToString();
                        xmll.Say(name, msg, DateTime.Now);
                        TextBoxType2.Text = "";
                        TextBoxType2.Focus();
                    }
                    else
                    {
                        LabelError.Text = "You have to join with a name first..";
                    }
                }

                [Anthem.Method]
                public void Leave()
                {
                    Timer1.StopTimer();

                    if (Session["userName"] != null)
                    {
                        string name = (string)Session["userName"];
                        xmll.Leave(name, DateTime.Now);

                        LabelError.Text = "Offline";
                    }
                }

    * Refresh our controls in timer tick event handler:
          o ListBox of chatters names
          o ListBox of messages
          o
            Collapse

                void Timer1_Tick(object sender, EventArgs e)
                {
                    if (Session["userName"] != null)
                    {
                        IAsyncResult resultN = callerNames.BeginInvoke(null, null);
                        if (!resultN.IsCompleted)
                        {
                            callerNames.EndInvoke(resultN);
                        }

                        IAsyncResult resultM = callerMessages.BeginInvoke(null, null);
                        if (!resultM.IsCompleted)
                        {
                            callerMessages.EndInvoke(resultM);
                        }
                        TextBoxType2.Focus();
                    }
                    else
                    {
                        Timer1.StopTimer();
                        TextBoxType2.Text = "You have to join with a name first..";
                    }
                }


                private void RefreshListNames()
                {
                    ListBox1.Items.Clear();
                    names = xmll.GetOnlineNames();
                    foreach (var name in names)
                    {
                        ListBox1.Items.Add(name);
                    }
                }

                private void RefreshMessages()
                {
                    ListBox2.Items.Clear();
                    msgs = xmll.GetMessagesHistory();
                    foreach (var msg in msgs)
                    {
                        ListBox2.Items.Add(msg);
                    }
                }

Leave()
The last thing is how to call the Leave() method from Client-side script

< body  önunload="Leave(); return false;">
< script type="text/javascript">
function Leave()
{
    Anthem_InvokePageMethod('Leave', null, null);
}

< /script>


AddThis Social Bookmark Button
Top Projects
MessengerFX
MSN Web Messenger
ebuddy
e-messenger
ILoveIM
You Tube
AJAX file upload
KoolIM.com
Meebo
Ajax.NET Professional
Tutorials
CSS Text Wrapper Script
Conditional Rendering in ASP.NET AJAX 4.0
Periodical Ajax Requests Using MooTools 1.2
Showing an Alert or Message Box using ASP.NET AJAX
JavaScript Method Overloading
Stripes and jQuery: AJAX forms and HTTP Session Validation
How to create the Google Suggest feature with ASP.NET 2.0
jQuery AJAX Tabs with ThickBox enabled
Rolling your own GWT Hyperlink class
HTML5 Client-side Database Storage