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