Alright... so what I'm trying to do is create a client that connects to a chat server. The frontend is all done in AJAX (jquery to be specific) and it's powered by PHP.

My only problem right now that seems to be giving me trouble is relaying the data the PHP recieves back to AJAX so it than can append the data to my chat box.

Here is what I have for my request...

                    function connect()
                    {
                        var page = getXHRObject();

                        page.onreadystatechange = function()
                        {
                            if (page.readyState == 3 && page.status == 200)
                                parse(page.responseText);
                        }

                        page.open("GET", "botmain.php", true);
                        page.send();
                    }

This opens botmain.php which creates a class that initiates the connection sequence. The responses (such as Connecting.. Connected, etc..) in the class calls a function called "echo_flush" which just echos and just flushes.

                    function addChat(msg_type, icon, text)
                    {
                        var msgtype_pln;
                        var icon_str;

                        if (msg_type === undefined) msg_type = 0;
                        if (icon === undefined) icon = 0;
                        
                        if (msg_type == 0)
                            msgtype_pln = 'ui-state-highlight';
                        else
                            msgtype_pln = 'ui-state-error';

                        switch (icon)
                        {
                            case 0:
                                icon_str = '';
                                break;
                            case 1:
                                icon_str = 'class="ui-icon ui-icon-info" ';
                                break;
                            case 2:
                                icon_str = 'class="ui-icon ui-icon-person" ';
                                break;
                            case 3:
                                icon_str = 'class="ui-icon ui-icon-alert" ';
                                break;
                            case 4:
                                icon_str = 'class="ui-icon ui-icon-notice" ';
                                break;
                        }
                        
                        $('.bot_chat').append('<div class="' + msgtype_pln + ' ui-corner-all" style="margin-top: 1px; padding: 0 .7em;"><p><span ' + icon_str + 'style="float: left; margin-right: .3em;"></span>' + text + '</p> </div>');
                        $('.bot_chat').scrollTop($('.bot_chat')[0].scrollHeight);
                }

This is pretty self explanatory. Anyways, what's happening is when ajax is requesting the page, every new echo is stacked. Meaning, it will do this in the chat window.

"Connecting..."

"Connecting...
Connected!"

"Connecting...
Connected!
Sending login information..."

An so on. Is there a better way to communicate to AJAX with PHP without using the XMLHttpRequest object?

Thanks in advanced!

You don't seem to be giving us all of your code. Specifically, we can't see what the getXHRObject() function does (it doesn't seem you're actually using jQuery for anything related to AJAX), and we also can't see what the parse() function does. In addition to both of these, we have no idea what your PHP looks like, so if it's not returning a correct response, we can't possibly know.

All the parse function is doing is calling addChat. That's all that's inside of the procedure. The getXHRObject returns a XMLHttpRequest object for the browser, and it does it successfully. That's why I didn't include both of them because they aren't really critical.

What my ultimate question is how I can effectively relay data the XMLHttpRequest object is retreiving from botmain.php back to the page without stacking the echo'd data.

This will be a chat program for a IRC like daemon which means trying to strip out the latest data that botmain.php echos would start to require memory and CPU and this is what I want to avoid.

addChat is all jquery, however the request is raw AJAX.

Originally Posted by Punk

What my ultimate question is how I can effectively relay data the XMLHttpRequest object is retreiving from botmain.php back to the page without stacking the echo'd data.

Return the data in a format such as XML or JSON, then parse it however you see fit.

It's easier said than done.

If you where going about creating a ajax front end website that would relay echo'd information from a php script that was performing a task (such as connecting to a remote IRC server) and then displaying it for the user to see whats going on - how would you do it?

I've considered having the PHP script open a mysql connection and just create a new row for every new message. If I did that, how would I alert ajax that there is new data? I don't want to do a timer to just check for new content because I want this to be as real time as possible.

Originally Posted by Punk

f I did that, how would I alert ajax that there is new data? I don't want to do a timer to just check for new content because I want this to be as real time as possible.

That's the key question, and you've really hit the crux of the issue, which is important. It's critical to understand that JavaScript can only receive information if it is asking for it: it can only make requests of the server, and will never be aware of anything new unless it asks for it repeatedly. However, you've rightly pointed out that having the browser on a loop which constantly asks for new information is not a good design scheme: especially with something as inefficient as JavaScript.

If you're going to use JavaScript as your client, it's better to issue only a single request at a time, then only when it receives a new chat message issue a new request. Do the "waiting for a new message" on the server side. And yes, you should be using the XMLHttpRequest object for this.

An XMLHttpRequest object will not complete until it has received a response from the server. Using this basic premise of HTTP protocol, you can eliminate a lot of overhead in the browser, which generally doesn't deal with repeated requests over a long period of time very well.

I've thought about this theory for a while, after observing this sort of behavior on a chat program I was using recently. I noticed that it was only using JavaScript to relay requests, so I Firebugged it to see what the requests looked like. I may write up a better theory of how this should function with PHP on the server side someday, but if you can figure it out yourself, you'll have a pretty cool chat client that's more efficient than what you would have if you forced the browser to connect to the server every few seconds.

Unfortunately PHP isn't going to be very adept on the server-side, if you keep all of your information inside the database. This is because PHP MySQL connections are single threaded, which means, to the best of my knowledge, they won't know about new information inside a single mysql_connect() session. This means you are probably going to have to keep the most recent messages inside of a file instead of the database, then push them to the database for long term storage when you're done with them.

The combination of JavaScript and PHP is probably not the most ideal situation for this sort of application, but with a little extra work it's possible to make something that's still good.

I've read a couple of articles about making chat programs with JavaScript and PHP, but they invariably seem to be about how to make constant requests from the browser, which I just feel is the wrong approach if you want something that responds instantly and doesn't create memory leaks.

Glad to see where on the same page

It seems the only way to do this is actually keeping the browser to keep the XMLHttpRequest object open and streaming.

My first approach was unsuccessful and only returned the data back to the ajax when the page was finished loading... And considering that this script never finishes loading... well I'm sure you can guess what happened. The data was never appended...

So what I did was change the value of readyState 4 (page completion) to readyState 3 (page data receiving) and this seemed to be the only probable way of doing any type of client-server notifications that new data is ready to be appended.

The only problem with this is that when the data is being echo'd, the XHR object will keep returning new data along with the old data... So like I said before, MySQL would probably be best to do this routine.

Basically this is what I'll have it do: When the php script (botmain.php) is suppose to be echo'ing data, it will be creating new rows in mysql with the appending data... So let's say it says "Connecting...". This will have it's own separate row along with any new data in a MySQL table. I will do the XHRObject in the same fassion except I won't be echo'ing any data (such as "Connecting") that the PHP script (botmain.php) is relaying to MySQL. botmain.php will only echo 1 byte informing the browser that there is new pending data in MySQL. Then Ajax will create a new XHRObject to connect to another page (getmysqldata.php) which will relay the new data and then it will be closed right after the data has been echo'd.

You're probably thinking botmain.php will still eventually produce too much data for a client to handle. This is why I will have the XHR object function check to see how much data is being received from botmain.php and once it hits 1000 bytes, it will destroy and reinit the XHR object.

The script currently stays open and the socket remains connected so destroying the XHR object isn't going to be an issue.

Here's something that may help you. It's something I've been studying as I go along:
Comet Programming which uses a long standing HTTP connection which in turn uses Chunked Transfer Encoding to gradually push more and more information to the client inside a single HTTP connection (such as one established by an XMLHttpRequest object). You could also in theory do this with an IFRAME, which is probably the old-school hack way of doing it.

The theory I had was unsuccessful ...

I've just came up with a new idea that will hopefully put this to rest, and I'm assuming it will...

Thanks for showing me that... my friend is doing something similar to what I am doing and uses HTTP streaming but since he is never on, I can't ask him exactly how he does it.

Anyway, what I'm intending on doing now so just bringing the back end, to the front end (the echo'd data). Before, the XHR object had to request a page to init the connection to the server and relay data back to the XHR object which has been giving me problems. Now what I plan to do is just create the class on the main page so that I don't have to use the XHR object to retrieve the data since the data will be outputted straight to the page..

I still don't think this is how I should do but at this point I feel as if I have no other choice.