Nodejs, express, Ajax: Function triggers only Six Times

Question

using nodejs and express I'm trying to trigger a js function which contains a simple console log. Sadly the function only triggers 6 times and freezes for a while. After a minute or two all the button clicks which where clicked during the "frozen time" triggers at once. It happens always after 6 times of pressing a button.

index.html -> button
client side -> jquery function that triggers an Ajax post function
server.js -> contains the express function which triggers the console log

index.html

<input type="button" id="car" value="drive"/>

clientside.js

$('#car').click(function(){

   $.ajax({
      type:'POST',
      url: url + '/drive'
   });

});

server.js

var app = express();

app.post('/drive', function(req, res){

   console.log('Car starts driving');

});

What am I doing wrong? Any tips how I can improve my code?

Thank You

It could be because your server doesn't respond. Are you testing this in Chrome by any chance? Chrome will allow 6 concurrent requests to a hostname. So after 6 the browser will block you making more request. In your server.js file, trying calling `res.send(200)` after the `console.log(...)` line. — dan, Jun 01 '17 at 12:44
In your server.js module, make sure that you return. Such as res.send('Car starts driving') — Amiga500, Jun 01 '17 at 12:47
In your clientside.js, good practice is to disable the button after is clicked, and then enable it back in the Ajax call either success or fail — Amiga500, Jun 01 '17 at 12:49

dan · Accepted Answer · 2017-06-01T15:18:42.870

4

Your server needs to respond to the request. Try updating your server to:

var app = express();

app.post('/drive', function(req, res){

   console.log('Car starts driving');
   res.sendStatus(200)

});

This will return 200 OK to all requests.

Why does this happen after 6 requests? I'm guessing you're using Chrome or Firefox. Chrome and Firefox will only allow a maximum of 6 concurrent requests to a single server. Once you reach 6, the browser will queue the remaining requests.

The reason your seeing it fix itself after a while is due to the request timeout. Once the request has timed out (because it has received no response), the browser will close the connection.

Browser concurrent request per host limits - https://stackoverflow.com/a/985704/4774345

edited Jun 01 '17 at 15:18

answered Jun 01 '17 at 12:48

dan

1,944
1
15
22

Great answer, and explanation! Had no idea chrome stopped all outgoing requests at 6. – JonLuca Jun 01 '17 at 12:50
This fixed it. Thank you. To make it clear: Chrome allows only 6 concurrent request but after my server response this number falls to 0 again am I right? – Preprocezzor Jun 01 '17 at 12:51
@Preprocezzor Yes. Each time your server responds to the request, the browser will close that connection to the server. – dan Jun 01 '17 at 12:54
@JonLuca Thanks! :) There's a good answer here which outlines the different limits for each browser - https://stackoverflow.com/a/985704/4774345 – dan Jun 01 '17 at 12:55

score 2 · Answer 2 · answered Jun 01 '17 at 13:00

Your server code should return statement:

app.post('/drive', function(req, res){
   console.log('Car starts driving');
   res.sendStatus(sendStatus)
});

sendStatus details

Good practice is to disable the button after clicking, and then enable it after the response comes back:

//Disable button

$.ajax({
    url: url + '/drive'        
    type: 'POST',        
    data: {},
    success: function(data){
        //Enable button
    },
    error: function(data){
        //Enable button
    }
});

score 1 · Answer 3 · answered Jun 01 '17 at 12:43

1

$('#car').click(function(){

   $.ajax({
      type:'POST',
      async : true,
      url: url + '/drive'
   });

You need to send it asynchronous.

answered Jun 01 '17 at 12:43

Daniel Taub

5,133
7
42
72

Nodejs, express, Ajax: Function triggers only Six Times

3 Answers3