Express.js doesn't get more than six results in a row while using jQuery Ajax

Question

I have a very interesting problem that I can't solve. If I click "Done" more than six times in a row, Express.js stops displaying results after the sixth result, so I can't see more than six results in my console. If I refresh the page, the same thing happens again.

What's causing this?

index.jade

html
  head
    link(rel="stylesheet" href="stylesheets/bootstrap.css")
  body
    .container
      .row
        .col-md-10
          table.table.table-striped
            thead
              tr
                th Title
                th Channel
                th Video
                th Done
              tbody
                for m in mi
                  tr.test
                    td.videourl #{m.video_url}
                    td #{m.video_title}
                    td #{m.channel_name}
                    td
                      a(href="https://www.youtube.com/watch?v=#{m.video_url}") Watch
                    td
                      button.btn.btn-success(type='button') Done
    script(src="https://code.jquery.com/jquery-3.0.0-alpha1.js")
    script(src="javascripts/frontend/bootstrap/bootstrap.js")
    script(src="javascripts/youtube.js")

jQuery

$('.btn-success').click(function() {
    $(this).parent().parent().fadeOut(1);
    var url = $(this).parent().parent().find('.videourl').text();
    console.log(url); // there is no problem here, I can see every url in Chrome console.
    $.post(
      "/form2", {
        url: url
      },
      function(data) {
        console.log("success");
      });
  });

app.js

app.post('/form2', function(req, res) {
  var url = req.body.url;
  console.log(url);
});

score 2 · Answer 1 · edited May 23 '17 at 11:58

The issue is not with express it is with Chrome. Because Chrome can make only 6 concurrent request for same domain at one time.

That is the reason you can only see 6 request getting fired. Other requests will be in pending state and pending requests will be made only when exiting requests are done.

Have a look at following links

http://sgdev-blog.blogspot.in/2014/01/maximum-concurrent-connection-to-same.html

How many concurrent AJAX (XmlHttpRequest) requests are allowed in popular browsers?

score 1 · Accepted Answer · answered Dec 25 '15 at 02:45

The issue is that you are not completing the requests in your express application so the sockets remain open (eventually the browser will probably time them out, but you probably aren't waiting long enough to see that).

The browser limits how many simultaneous connections it will make to a particular server so it's waiting for one of the previous 6 connections to finish before connecting the next one.

If you properly complete your app.post() handler with a response, the issue will go away because as each response completes, the browser will see that it is done and thus allow another connection to be made for the next click.

app.post('/form2', function(req, res) {
  var url = req.body.url;
  console.log(url);
  res.send("whatever");
});

The browser will still only allow a fixed number of connections to a given host to be "in-flight" at the same moment, but as long as each connection does finish properly, the extra ones will be queued and will get their turn when one of them in front of them in line finishes and thus frees up.

Aaaand it works. Thank you very much. I should have known that. — salep, Dec 25 '15 at 02:52

Express.js doesn't get more than six results in a row while using jQuery Ajax

2 Answers2