I am trying to create a simple ajax chat using JQuery and ASP.NET. My code works like this:
- When the page loads it refreshes the ‘chatbox’ div with a request to the messages.aspx page, which handles getting new messages from the database and kicks off an auto-refresh with the setTimeout().
- Whenever the user clicks the send button, it adds the message to the database inside the messages.aspx page_load code.
I am getting a stack overflow error right from the start when the timeout starts, and I am not sure what would cause this? Could it be caching? Maybe the code in messages.aspx can’t complete running within those 5 seconds? Any help would be appreciated!
Also, I didn’t worry about sql injection attacks yet b/c I was just trying to get it working with simple code.
Here’s my code:
Client side
<%@ Page Language='C#' AutoEventWireup='true' CodeFile='Default.aspx.cs' Inherits='_Default' %> <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'> <html xmlns='http://www.w3.org/1999/xhtml'> <head runat='server'> <title>Untitled Page</title> <script src='jquery.js' type='text/javascript'></script> <script type='text/javascript'> $(document).ready(function () { refreshChat(); $('#btnSend').click(function () { addMessage(); }); return false; }); function refreshChat() { $.get('messages.aspx', function (data) { $('#chatbox').empty(); $('#chatbox').prepend(data); }); setTimeout(refreshChat(), 5000); } function addMessage() { $.get('messages.aspx', { usr: $('#usr').val(), msg: $('#msg').val() }); } </script> </head> <body> <form id='form1' runat='server'> <div id='input'> username: <input type='text' name='usr' id='usr' /><br /> message:<br /> <textarea id='msg' name='msg' rows='5' cols='30'></textarea><br /><br /> <input type='button' id='btnSend' name='btnSend' value='Send' /> </div> <div id='chatbox'></div> </form> </body> </html> Server Side
using System; using System.Data.SqlClient; using System.Configuration; using System.Collections; using System.IO; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Web.UI.HtmlControls; public partial class messages : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { SqlConnection conn = new SqlConnection('Data Source=.\\SQLEXPRESS;AttachDbFilename=F:\\Chatter\\App_Data\\messages.mdf;Integrated Security=True;User Instance=True'); conn.Open(); string sql; SqlCommand comm; if (Request['usr'] != null) { string user = Request['usr'].ToString(); string message = Request['msg'].ToString(); sql = 'insert into messages (usr, msg, [date]) values ('' + user + '', '' + message + '', '' + DateTime.Now + '')'; comm = new SqlCommand(sql, conn); comm.ExecuteNonQuery(); } sql = 'select top 5 usr, msg from messages order by [date] desc'; comm = new SqlCommand(sql, conn); SqlDataReader dr = comm.ExecuteReader(); while (dr.Read()) { Response.Write(dr['usr'].ToString() + ': <br/>' + dr['msg'] + '<br/><br/>'); } dr.Close(); conn.Close(); } }
Your javascript refreshChat function is recursively calling itself. Change the code to: