How to create a sequence of messages in Javascript?

Question:

I have an application made in Node, Express and Socket.oi in which alerts are sent to a certain screen that receives the message through socket.io, on this screen I receive the message, format it in a dialog and display it in full screen, which is hidden after 5 seconds. The problem is that if another user sends an alert during these 5 seconds it replaces the message being displayed and I want one message to wait for the other before being displayed. I tried in several ways, playing in an array and creating a routine, TimeOut and SetInterval but none of these ways worked. Below is an example of how the message is being displayed…

    socket.on('novaMsg', function(data) {
     mostrarMsg(data);
    });

 function mostrarMsg(msg){
 var mensagem = "";
 mensagem += '<p>'+msg.titulo+'</p>';
 mensagem += '<p>'+msg.texto+'</p>';
 $("#dialog .content").html(mensagem);
 $("#dialog").modal("show");
 window.setTimeout(function() {
        $("#dialog").modal('hide');
      }, 5000);
}

If anyone has any idea how to create a routine that shows the messages without them being replaced, I appreciate it.

Answer:

You can create an array to queue the received JSON, and every half-second check with setInterval if there is an item in the array. If it exists, it will display data from the first item and block new display until the modal is closed. When the modal is closed, it will release new display if there are items in the array.

The socket callback will just add items to the array, creating a queue.

The code would look like this:

var msgs = []; // array
var flag = true; // variável de controle

socket.on('novaMsg', function(data) {
   msgs.push(data);
});

function mostrarMsg(msg){

   var mensagem = "";
   mensagem += '<p>'+msg.titulo+'</p>';
   mensagem += '<p>'+msg.texto+'</p>';
   $("#dialog .content").html(mensagem);
   $("#dialog").modal("show");
   window.setTimeout(function() {
      $("#dialog").modal('hide');

      // remove o primeiro item da array
      msgs.shift();

      // libera nova exibição
      flag = true;
   }, 5000);

}

setInterval(function(){

   // verifica se existe o primeiro item na array e
   // se está liberado nova exibição
   if(msgs[0] && flag){
      flag = false;
      mostrarMsg(msgs[0]);
   }
}, 500);

I'll put an example below simulating the socket. Each time you click the New alert button, a new JSON will be added to the array and the alerts will be shown in queue only after the modal closes. If the array is empty, it won't show anything, but as soon as you click on the button, the modal will immediately open showing the alert that was added (I put a sequential number in the title to show that each alert is different):

 // linhas de exemplo - início var conta = 0; $("button").click(function(){ getData(JSON.parse('{"titulo": "título: '+conta+'", "texto": "texto qualquer"}')); conta++; }); function getData(data){ msgs.push(data); } // linhas de exemplo - fim var msgs = []; // array var flag = true; // variável de controle function mostrarMsg(msg){ var mensagem = ""; mensagem += '<p>'+msg.titulo+'</p>'; mensagem += '<p>'+msg.texto+'</p>'; $("#dialog .content").html(mensagem); $("#dialog").modal("show"); window.setTimeout(function() { $("#dialog").modal('hide'); // remove o primeiro item da array msgs.shift(); // libera nova exibição flag = true; }, 5000); } setInterval(function(){ // verifica se existe o primeiro item na array e // se está liberado nova exibição if(msgs[0] && flag){ flag = false; mostrarMsg(msgs[0]); } }, 500);
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"> <button style="z-index: 9999; position: fixed; top: 0; left: 0">Novo alerta</button> <!-- Modal --> <div class="modal fade" id="dialog" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="content"> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> </div> </div> </div> </div>
Scroll to Top