Getting ERR_EMPTY_RESPONSE on $.POST

Question

I have a simple social networking site with chat functionality. I have used $.post a lot in multiple pages. The code works well on all pages except message.php where the user message is posted and fetched multiple times with $.post (used to work well on local server).

When the messaging between users occur simulateously, the website stops to respond. On reload, the server goes down and ERR_EMPTY_RESPONSE message is shown. The website again comes into operation after a couple of minutes. To what I learnt, this is happening on pages that use $.post frequently.

To summarize the situation, I have created a live test page. An ERR_EMPTY_RESPONSE occurs when input is given continuously for some seconds.
The page contents:

a.php

<script>
$(document).ready(function(e) {
$(".abc").keyup(function(){
    var a = $(this).val();
    $(".showoff").text("wait..");
    $.post('bbs.php',{a:a},function(abc){
        $(".showoff").html(abc);
    });
});});
</script>
<input type="textbox" class="abc">
<div class="showoff">Type to Change Me!</div>

bbs.php

<?php
echo $_POST['a'];
?>

I am hitting my head hard on the wall for a week. So, Please help me with this problem. Thanks in Advance. Sorry for my lame English as well.

Answer 1

Ajax syncronous: Make the ajax call syncronous. This will stop its thread untill the response is back, easy to implement but comes with the downside that the user cannot type anymore untill request is solved

$.ajax({
        url: 'bbs.php',
        data: {a:a},
        success: function(abc){
            $(".showoff").html(abc);
        },
        async: false
    });

Global variable check: make a global variable that checks the state of previous request and doesn't allow future ones until it is resolved:

var waiting=false;

$(".abc").keyup(function(){

    if(!waiting){
         waiting = true;
         // code
         $.post('bbs.php',{a:a},function(abc){
            $(".showoff").html(abc);
            waiting=false;
         });
    }
 });

Answer 2

This is good.

var waiting=false;

$(".abc").keyup(function(){

    if(!waiting){
         waiting = true;
         // code
         $.post('bbs.php',{a:a},function(abc){
            $(".showoff").html(abc);
            waiting=false;
         });
    }
 });

Answer 3

Simplest answer would be you allow your server to be spammed to the point that it stops responding (yet still recieving new connections). If the connections are not closed(resolved) in time you will also hit limitation of concurrent browser connections to domain (which I think is really happening - browser blocking you in making those request).

You either switch to sockets, or send text to server on set interval of time. Alternatively you dont allow next post, till previous is resolved.

Answer 4

Instead of allowing your server to be spammed, you can remove the handler before the first post and set it back again when the post returns.

$(document).ready(function(e) {
    var $abc = $('.abc'); //good idea to cache those jQuery selectors!

    function abcPost() {
        $abc.off('keyup', abcPost)
        var a = $(this).val();
        $(".showoff").text("wait..");
        $.post('bbs.php', {
            a: a
        },
        function(abc) {
            $(".showoff").html(abc);
            $abc.on('keyup', abcPost)
        });
    }

    $abc.on('keyup', abcPost);

});

Answer 5

As you appear to want an autocomplete type setup, use a timer. Reset it on each keypress and after a delay send your post. In this example it will send 3 seconds after the last keypress.

$(document).ready(function(e) {
  var timer;
  $(".abc").keyup(function() {
    var $input= $(this);
    // Start timer
    clearTimeout(timer);
    // Start a new 3 second timer
    timer = setTimeout(function() {
        // Once the 
      var a = $input.val();
      $(".showoff").text("wait..");
      $.post('bbs.php', {
        a: a
      }, function(abc) {
        $(".showoff").html(abc);
      });
    }, 3000);
  });
});

JSFiddle: https://jsfiddle.net/TrueBlueAussie/Locpnk35/

This will avoid overloading your server as no more than 1 request every 3 seconds can come from the same user. If the response is slower than 3 seconds you may also need to disable the key handler while an Ajax request is in progress.