AJAX requests are sometimes slow

mx270a · Post by **mx270a** » Mon Jun 22, 2015 10:04 am

I have an app that uses AJAX to display a table of data in a web browser. The page is set for a refresh every 200ms. I have noticed that sometimes it is fast, sometimes it is really slow (2-30 seconds between updates in the browser).

I added a simple iprintf("#"); to the function that generates the AJAX data, and it is running every 200ms even with the browser isn't displaying updates that fast.

The slow refresh occurs in Chrome, Firefox, and Internet Explorer. Oddly, if I open a second tab of the same web page, both tabs will act normal. I see occasional 1-2 second delays, but for the most part is is refreshing at 200ms. Doesn't matter if both instances are in the same browser or different browsers.

This has something to do with the size of the AJAX data being returned. When the data is 450 bytes, I do not see the problem. At 580 bytes, the problem exists.

I don't believe the problem is with the browser because if see the problem in browser A, then open browser B, A goes back to acting normal.

Anyone else seen this weird AJAX behavior? I'm on a Nano54415 with NNDK 2.7.3 but was seeing the issue on 2.7.1 as well. Not sure about older versions.

Edit: I think this is being caused by the Netburner not closing the connection after sending the data that the AJAX requested. If I go direct to the web page that AJAX is hitting, I can see the page data show up immediately, but the browser indicates that it is still loading the page. The problem doesn't exist with static content, only with dynamic content if it is over a certain size (between 450-580 bytes).

mx270a · Post by **mx270a** » Mon Jun 22, 2015 11:53 am

Chrome with the developer tools turned on shows that the page consistently takes 45 seconds to load. The content is returned immediately, but it appears there is a timeout somewhere of 45 seconds before it knows it is finished.

sulliwk06 · Post by **sulliwk06** » Mon Jun 22, 2015 1:48 pm

How are you handling your AJAX requests? I think that at some point the socket should be closed by the server and that's where the AJAX call will terminate. In my case my custom GetHandler will return 1 which will cause the socket to close.

Also are you using any header fields like Content-Length? I could imagine a browser might wait for more data if you have specified a Content-Length but haven't sent that many bytes.

Post by **dciliske** » Mon Jun 22, 2015 2:43 pm

Can we get a pcap of the transaction?

mx270a · Post by **mx270a** » Mon Jun 22, 2015 8:40 pm

How about a simple program that that can reproduce the issue. This app has a character array that gets filled by 1 byte every time the AJAX page is called. It goes good until it gets to about 750 bytes, then gets slow. Tested on two Nano modules, and in both Chrome and Firefox. I also noticed with this example that if I let it keep going, at about 1400 bytes it goes back to normal. That's close to the size of an Ethernet packet, so I'm guessing it has something to do with the response being more than 1 packet.

main.cpp

Code: Select all

#include "predef.h"
#include <stdio.h>
#include <ctype.h>
#include <startnet.h>
#include <autoupdate.h>
#include <sstream>
using namespace std;

extern "C" {
	void UserMain(void * pd);
	void getAJAXMessageList(int sock, PCSTR url);
}

const char * AppName="AJAX Test";
char something[10000];
int x = 0;

void UserMain(void * pd) {
    InitializeStack();
    OSChangePrio(MAIN_PRIO);
    EnableAutoUpdate();
    StartHTTP();
    iprintf("Application started\n");

    while (1) {
        OSTimeDly(20);
    }
}

void getAJAXMessageList(int sock, PCSTR url) {
	ostringstream output;
	output << "Uptime = " << TimeTick << "<BR>";
	if (x < 9999) {
		something[x] = 'A';
		something[x+1] = '\0';
		x++;
	}
	output << something;
	output << "<BR><BR>Bytes above = " << strlen(output.str().c_str());
	iprintf("#");
	writestring(sock, output.str().c_str());
}

index.htm

Code: Select all

<HTML><HEAD><TITLE>Connections</TITLE>
<script type="text/javascript">
var req;
window.onload=function(){
	ajax_refresh();
}
function ajax_refresh() {
	url = "ajax.html?" + Math.random();
	if (window.XMLHttpRequest) req = new XMLHttpRequest(); //Most browsers
	else if (window.ActiveXObject) req = new ActiveXObject("Microsoft.XMLHTTP"); //IE5 and IE6
	if (req != null) {
		req.onreadystatechange = gotAjaxResponse;		
		req.open("GET", url, true);
		req.send(null);
	}
	setTimeout("ajax_refresh()", 200);
}
function gotAjaxResponse() {
	if (req.readyState == 4) { // Complete
		if (req.status == 200) { // OK response
			document.getElementById("SYSTEMSTATUS").innerHTML = req.responseText;
		}
	}
}
</script>
</HEAD>

<BODY>
<div id="SYSTEMSTATUS">Waiting for AJAX data...</div>
</BODY>
</HTML>

ajax.html

Code: Select all

<!--FUNCTIONCALL getAJAXMessageList -->

Post by **dciliske** » Tue Jun 23, 2015 2:13 pm

Currently testing. Also, I'd like to inform you about our fancy new function 'fdprintf'. It let's you printf straight to a fd!

Code: Select all

#include <fdprintf.h>

int decimallen(DWORD dw);
void getAJAXMessageList(int sock, PCSTR url) {
//	ostringstream output;
//	output << "Uptime = " << TimeTick << "<BR>";
	if (x < 9999) {
		something[x] = 'A';
		something[x+1] = '\0';
		x++;
	}
	iprintf("#");
    fdprintf(sock, "Uptime = %lu<BR>%s<BR><BR>Bytes above = %lu", TimeTick, something, x+35+decimallen(TimeTick));
//	output << something;
//	output << "<BR><BR>Bytes above = " << strlen(output.str().c_str());
//	writestring(sock, output.str().c_str());
}

Joking aside, I'd caution at using ostreams as those use malloc. But, your application, your code

-Dan

Post by **dciliske** » Tue Jun 23, 2015 2:22 pm

I'm not seeing anything... buffer count is steady, we're not getting backed up at all...

What version of the NNDK are you running? I'd actually like to see the pcap as well. I'm not saying you're not having the issue; I just can't reproduce it on my end, and a packet capture is a close second.

Also, if you're hammering the crap out of AJAX (which it kinda feels like you are), you may see about using websockets instead. They are muuuuch smoother and lower latency than this.

-Dan

mx270a · Post by **mx270a** » Tue Jun 23, 2015 8:09 pm

Two packet captures are attached below. Looks like the difference is that on the "slow" capture, I don't get a packet containing the 'HTTP/1.0 200 OK" to close the session.

I'm using NNDK 2.7.3.

I still have a lot to learn about C/C++, so I'll dig in to what malloc is and why it is bad. fdprintf looks useful. Websockets are now at the top of my need-to-learn list. I'd like to have an interface with a 20Hz refresh rate, and a single socket that stays open is certainly a lot more efficient than a pile of HTTP requests and TCP sessions.

Post by **dciliske** » Wed Jun 24, 2015 10:04 am

Ok, that's... interesting. This is going to get deep fast. Mind making a support ticket for this?

(Don't worry folks, I'll be sure to update y'all with what the solution is.)

mx270a · Post by **mx270a** » Wed Jun 24, 2015 10:23 am

Ticket opened.

NetBurner Community Forum

AJAX requests are sometimes slow

AJAX requests are sometimes slow

Re: AJAX requests are sometimes slow

Re: AJAX requests are sometimes slow

Re: AJAX requests are sometimes slow

Re: AJAX requests are sometimes slow

Re: AJAX requests are sometimes slow

Re: AJAX requests are sometimes slow

Re: AJAX requests are sometimes slow

Re: AJAX requests are sometimes slow

Re: AJAX requests are sometimes slow