Problem with access limit by refresh JAVASCRIPT account

Question

Is there any way to return updated data from the server directly on HTML without using the setInterval, setTimeout those things?

Because these server functions are wearing off.. Every time he gives a refresh it’s like I’m getting one more user access to the site, which ends up exceeding the daily access limit on the server.

Example:

    var loop = setInterval;

    function setLoop(de, para, nome) {
       var url_s = $("#url_s").val();
       // $("._5chat").attr('id','chat_'+para);

       clearInterval(loop);
       loop = setInterval(function() {
           $("#mensChat div._5chat").load(url_s+'/demo/chat/test.php?de='+de+'&para='+para+'&url_s='+url_s)
       }, 1000);
    }

    $(document).ready(function()
    {
        $('.usuario').click(function() {
            setLoop($(this).attr('user-d'), $(this).attr('user-p'), $(this).attr('nome-p'));
        });
    });

When he gives one refresh in 1000ms of time setInterval it’s like the server gets another visitor...

Two people in 1hr on the site think it’s enough to exceed the limit now imagine the world...

Answer 1

Each HTTP request is a new request to the server. It is only possible to "simulate" sessions thanks to the server-side languages that support this, as is the case with PHP. But this is only a request of the "current session" for PHP, the apache server interprets it as a new request and has no "clue" that that user was already "using" the services.

So two people using the site for two hours with the 1 second "refresh", for the server will be 14400 independent requests and there is nothing that can be done about this, except the following solutions:

• Increase the request time (5s would be good but depends on your need in case a chat is not feasible);
• Hire a host that has unlimited traffic. (Essential).

_{An interesting observation is that attacks by are quite similar to what they were doing, except that they see in a much larger amount of requests in a much smaller time span. That is, your own site was "attacking" and the reason comes next.}

Another problem is the use of the function setInterval that sends a new request before the previous one ends (in the case of asynchronous requests). Create a recursive function using the setTimeout as already mentioned in the comments by Guilherme Nascimento.

AtualizaDados = function(){
  var endereco = 'https://fiddle.jshell.net/';
  var params = {param1: 1, param2: 2};
  var time = 3000;
  var el = $("#mensChat div._5chat");

  $.ajax({
    url: endereco,
    type: 'GET',
    dataType: 'html',
    data: params,
    success: function(html){
      el.html(html);
    },
    error: function(x, s){
      console.log(s, x);
    },
    complete: function(){
      setTimeout(AtualizaDados, time);
    }
  });
};

AtualizaDados();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="mensChat">
    <div class="_5chat"></div>
</div>

A good practice is also to decrease the amount of data to be trafficked, that is, remove the "garbage" from your requests, use JSON to traffic the data, so instead of downloading HTML content that would have for example 300 to 500 bytes (each character is a byte, including white spaces ) would only have 80 to 120 bytes (depending on the size of the message), and then mount the HTML on the client side, example:

Server:

<?php

  /* Executa todas as ações necessárias */

  header('Content-Type: application/json');
  echo json_encode(Array(
     'autor' => $autor,
     'msg'   => $msg,
     'time'  => $time,
     'etc'   => $etc
  ));
  exit;

Client:

<script type="text/javascript">

AtualizaDados = function(){
  var endereco = 'http://endereco/da/application/';
  var params = {param1: 1, param2: 2};
  var time = 3000;
  var el = $("#mensChat div._5chat");

  $.ajax({
    url: endereco,
    type: 'GET',
    dataType: 'json',
    data: params,
    success: function(json){
      el.append(
        $('<div />').addClass('mensagem')
                    .append( $('<span />').addClass('autor').text( json.autor ) )
                    .append( $('<span />').addClass('msg').text( json.msg ) )
                    .append( $('<span />').addClass('hora').text( json.time ) );
      );
    },
    error: function(x, s){
      console.log(s, x);
    },
    complete: function(){
      setTimeout(AtualizaDados, time);
    }
  });
};

AtualizaDados();

Answer 2

Like I said in the other answer, setInterval does not wait for the load to finish, so use the setTimeout: Load Chatbox message notifications

function setLoop(de, para, nome) {
   var url_s = $("#url_s").val();

   $("#mensChat div._5chat").load(url_s+'/demo/chat/test.php?de='+de+'&para='+para+'&url_s='+url_s,
       function() {
            setTimeout(function() {
                setLoop(de, para, nome);
            }, 1000);
       }
   );
}

$(document).ready(function() {
    $('.usuario').click(function() {
        setLoop($(this).attr('user-d'), $(this).attr('user-p'), $(this).attr('nome-p'));
    });
});