[RESOLVED] AJAX, How to queue data before sent?

[Atomiku]

Well, Ive been working on a little ajax chatroom and im not too happy about the way the data is sent.

Lets say a user has just sent a message, and while the message is still trying to be sent, the user trys to send another

The 2nd would not show. So instead, how could I put all messages into a queue, then send them when no other data is being sent?

So far I have this:

<script language="javascript">
var currentmd5;
function createRequestObject() {
    var ro;
    var browser = navigator.appName;
    if(browser == "Microsoft Internet Explorer"){
        ro = new ActiveXObject("Microsoft.XMLHTTP");
    }else{
        ro = new XMLHttpRequest();
    }
    return ro;
}

var http = createRequestObject();

function sndReq(action,arg2) {
    http.open('get', 'pages/chat2.php?action='+action+'&nolayout=true&arg2='+arg2);
    http.onreadystatechange = handleResponse;
    http.send(null);
	tick = setTimeout("sndReq('getchat')", 1000);
}

function lock() {
	document.getElementById('EIEIO').disabled = true;
}

function unlock() {
	document.getElementById('EIEIO').disabled = false;
}

function addmsg() {
	omg = document.getElementById('EIEIO').value;
	document.getElementById('EIEIO').value = "";
	sndReq('addmessage',omg);
}
numbah = 0;

function handleResponse() {
    if(http.readyState == 4){
		//document.getElementById('omgggg').innerHTML = "Recieving Data...";
        var response = http.responseText;
        var update = new Array();

    if(response.indexOf('|' != -1)) {
		first = response.split('999');
        update = first[1].split('|');
		if(update[0] == 'chat'){
			hello = document.getElementById(update[0]).innerHTML;
			if(update[2] != currentmd5){
				document.getElementById(update[0]).innerHTML = update[1];
				currentmd5 = update[2];
			}
		}
		if(update[0] == 'system'){
			if(update[1] == 'ready'){
			}
		}
    }
	//document.getElementById('omgggg').innerHTML = "Data recieved.";
}
}
tick = setTimeout("sndReq('getchat')", 1000);
</script>
<?
$output .= cbox("Chat","<span id='omgggg'></span><div style='overflow: auto; height:150px;'><span id='chat'></span></div>
<br><form name='messageform' onSubmit='return false;'>
<input name='msg' id='EIEIO' type='text' style='width: 100%;' onKeyPress='if (event.keyCode == 13) addmsg();' />
<input name='action' type='hidden' value='submit' />
</form>");
?>

All help is appreciated, Matt.

PS: Sorry I havent been on in a while, ive been very busy (New highschool, new house, parents split up... etc etc etc) Hopefully I will be more active soon 🙂

[ednark]

right now you are making one global http object that is your connection.
you could always have your function sndReq() create a new xmlHttpRequest object each time it is called. You could always do resource pooling, here is the process :

0) 2 global array that hold xmlHttpRequest objects Available and Active
1) sndReq() called
2) look in Available array to see if there are any objects
3) if Available is empty, create a new xmlHttpRequest and put it in Available
4) if Available is not empty, grab the first object and move it to Active keeping track of a timestamp of when it was moved
5) use the object you just moved to process the request via .open()
6) check to see if any of them other objects in Active have and old timestamp
7) if any objects have been waiting for say 30 sec... call .abort() and move it back into the Available

really you might want to do 6 & 7 first, and maybe set an upper limit on how many objects you might create... if you desire more active requests than you have objects, then you might need some queue.... which would just be a function that checks the Active Objects array with a setTimeout() until a new object opens up...

does that help?

--- edit

also I have found this nifty package which seems to do this pooling thing i was talking about already

http://www.ajaxtoolbox.com/request/

[Atomiku]

Thanks for the help! Works fine now 😃 I just did this for the sndReq

function sndReq(action,arg2) {
	http = createRequestObject();
    http.open('get', 'pages/chat2.php?action='+action+'&nolayout=true&arg2='+arg2);
    http.onreadystatechange = handleResponse;
    http.send(null);
	tick = setTimeout("sndReq('getchat')", 1000);
}

I didnt bother using "pooling" because it looks complicated 😛