3

Tenho uma aplicação feita em Node, Express e Socket.oi no qual alertas são enviados a uma determinada tela que recebe a mensagem através do socket.io, nesta tela eu recebo a mensagem, formato ela em uma dialog e exibo em tela cheia que é ocultada apos 5 segundos. O problema é que se outro usuário enviar um alerta durante esses 5 segundos ela substitui a mensagem que esta sendo exibida e eu quero que uma mensagem aguarde a outra antes de ser exibida. Tentei de varias formas, jogando em um array e criando uma rotina, TimeOut e SetInterval mas nem uma destas formas funcionou. Deixo abaixo uma exemplo de como esta sendo exibida a mensagem...

    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);
}

Se algum tiver alguma ideia de como criar alguma rotina que mostre as mensagens sem que elas se substituam, agradeço.

2
  • E se nos 5 segundos forem enviadas 10 mensagens, é para mostrar as 10 mensagem em fila, uma após a outra a cada 5 segundos? Ou seja, a décima mensagem vai aguardar quase 1 minuto para ser exibida.
    – Meu ovo
    17/12/2018 às 20:33
  • Sim, normalmente uma mensagem vai ser enviada a cada 10 minutos, mas pode acontecer de 2 ou mais serem enviadas ao mesmo tempo. 18/12/2018 às 10:19

2 Respostas 2

1

Você pode criar uma array pra ir enfileirando os JSON recebidos, e a cada meio-segundo verificar com setInterval se existe item na array. Se existir, irá exibir dados do primeiro item e bloquear nova exibição até que a modal seja fechada. Quando a modal for fechada, irá liberar nova exibição se existir itens na array.

O callback do socket apenas irá adicionar itens na array, criando uma fila.

O código ficaria assim:

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);

Vou colocar abaixo um exemplo simulando o socket. Cada vez que você clicar no botão Novo alerta será adicionado na array um novo JSON e será mostrada os alertas em fila somente após a modal fechar. Caso a array esteja vazia, não irá mostrar nada, mas assim que clicar no botão, imediatamente a modal se abrirá mostrando o alerta que foi adicionado (coloquei um número sequencial no título para mostrar que cada alerta é diferente):

// 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>

1
  • 1
    Isso funcionou bem como eu precisava, obrigado. Eu tinha testado fazer isso antes mas estava me atrapalhando com o array e o setInterval 18/12/2018 às 16:51
0
socket.on('novaMsg', function(data) {
  mostrarMsg(data);
});

const renderMsg = ({ titulo, texto }) => `
  <div>
    <p>${titulo}</p>
    <p>${texto}</p>
  </div>
`

function mostrarMsg(msg){
  var mensagem = renderMsg(msg);

  // É bom declarar os elementos em váriaveis
  // para que não percorra o DOM novamente
  const $dialog = $("#dialog");
  const $modalContent = $dialog.find(".content");

  // Pega o conteudo da modal
  // e concatena o conteudo da modal com a mensagem que está vindo do servidor
  // Assim são adicionadas mais de uma mensagem no corpo da modal
  modalContent.html(modalContent.html() + mensagem);

  // Mostra a modal
  $dialog.modal("show");

  // Fecha a modal depois de 5 segundos
  window.setTimeout(function() {
    $dialog.modal('hide');
  }, 5000);
}
1
  • Isso funcionaria em partes mas o problema e quem minha modal em fullscreen foi projetada para 2 palavras, sendo uma um nome de terminal e a outra uma sequencia numérica, ao meu ver esta função acumularia as mensagens no content sem uma rotina para apaga e não agregaria mais 5 segundos na seguinte mensagem. 18/12/2018 às 10:27

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .