AjaxPro Framework hitting timeout function?

Question

I am trying to develop a chat application.I am using Asp.Net2.0 and vs2005.Iam using AjaxPro Framework for getting asynchronous calls to the server side.

My problem is when i send message im getting timeout error after a few seconds.What could be the problem and how will i resolve it?

My another doubt is that is there some serious problem in using AjaxPro Framework

Heres the code i have used in the client side to send messages

    <script language="javascript">
           // Send messages
        function sendMessage()
        {               
            // input box for entering message
            var ta_content = el("txtcontent");

            // if the content input is not empty
            if (ta_content.value.length > 0)
            {
                //the message show area
                var div_recentMsg = el("recentMsg");        

                var clientUname=document.getElementById("<%=hFieldClientUserName.ClientID %>").value;       

                var adminUname=document.getElementById("<%=hFieldAdminUserName.ClientID %>").value; 

                // send the message
                AjaxProChat.SendMessage(clientUname,adminUname,ta_content.value);

                // clear the input box
                ta_content.value = "";

                // roll up the web page with the messages
                ta_content.scrollIntoView(false);

                getNewMessage();


            }
        }


        //Obtain the new messages
        function getNewMessage()
        {
            // AjaxProChat.timeouPeriod(1800000);
            // the user name
            var username = document.getElementById("<%=hFieldClientUserName.ClientID %>").value;        

            // the message show area
            var div_recentMsg = el("recentMsg");

            // Obtain the DataTable for the newest messages
            var dt = AjaxProChat.GetNewMsg(username).value;
            for (var i = 0;i < dt.Rows.length;i++)
            {

                // one message in response to one <span> object
                var oneMsg = document.createElement("span");

                // the message sender and corresponding sent content
                var strLine1 = dt.Rows[i].Sender + " says: (" + dt.Rows[i].SendTime + ")";
                strLine1 = DealBrackets(strLine1);

                // the content of the message
                var strLine2 = dt.Rows[i].Contents;
                strLine2 = DealBrackets(strLine2);

                // show style
                oneMsg.innerHTML = "<pre>" + strLine1 + "<br>&nbsp;&nbsp;" + strLine2 + "</pre>";
                oneMsg.style.padding = "2px 2px 2px 2px";
                oneMsg.style.color = (dt.Rows[i].Sender == username) ? "blue" : "red";
                oneMsg.style.fontFamily = "'Courier New'";

                // attached to DOM
                div_recentMsg.appendChild(oneMsg);
            }
        }


</script>   

Heres the html code

 <div style="text-align: center">
    <strong><span style="font-size: 24pt"><span style="color: #333399; background-color: #ffffff">
        Chatting Room</span></span></strong>  

</div>
    <table border="2" style="width: 792px; height: 443px;background-color:#ffffff;">
        <tr>
            <td colspan="3" style="height: 373px; width: 729px;">
                <div id="recentMsg" style="width: 779px; height: 368px; overflow:auto;">
                </div>
            </td>
        </tr>
        <tr>
            <td colspan="3" style="height: 30px; width: 729px;">
                <asp:Label ID="Label1" runat="server" Font-Size="X-Large" ForeColor="Maroon">Input the message and click Send or press ENTER key:</asp:Label>
            </td>
        </tr>
        <tr>
            <td colspan="3" style="height: 40px; width: 729px;">
                <input id="txtcontent" onkeydown="if (event.keyCode==13) {sendMessage();return false;}"
                    style="width: 55%; height: 30px" type="text" runat="server" />         
                <input onclick="javascript:sendMessage();" style="width: 58px; border-top-style: groove;
                    border-right-style: groove; border-left-style: groove; background-color: #ebf1fa;
                    border-bottom-style: groove; height: 34px;" type="button" value="Send" id="btnSend" /></td>
        </tr>
        <tr>
            <td colspan="3" style="width: 729px">
            </td>
        </tr>
    </table>

Heres the code for sending and receving messages i have written in server side

    [AjaxPro.AjaxMethod]//code for sending messages
public void SendMessage(string Sender,string Receiver,string Content)
{
    ChatBAL clsChat = new ChatBAL();
    clsChat.SENDER = Sender;
    clsChat.RECEIVER = Receiver;
    clsChat.CONTENT = Content;
    clsChat.SendMessage();

}

[AjaxPro.AjaxMethod]//code for getting latest message and returns datatable
public DataTable GetNewMsg(string UserName)
{
    ChatBAL clsChat = new ChatBAL();
    DataTable dtNewMsg =new DataTable();
    try
    {
        clsChat.USERNAME = UserName;
        dtNewMsg = clsChat.GetNewMessage();            
    }
    catch
    {
        throw;
    }
    finally
    {
        clsChat = null;
    }
    return dtNewMsg;
}

Answer 1

In your javascript code, you can use this code right before of the ajax call.

    AjaxPro.timeoutPeriod = 120 * 1000; //this will add a 2 minutes timeout
    AjaxPro.onTimeout = (function (time, obj, something) {
       if (time < AjaxPro.timeOutPeriod || obj.method !="SendMessage") return false;
       else
        {
           console.log("Ajaxpro timeout exception after 120 seconds!");
         }
    });