0

Buen día,

Estoy programando un chat, el cual mando a actualizar los mensajes cada X segundos, uso una funcion ajax que me trae los datos y luego ejecuto un setInterval para que se ejecute varias veces.

El problema se da al cliquear un chat, y luego otro, la funcion setInterval anterior se mescla con la nueva y comienza un bucle y se muestra un chat y luego el otro y el otro... y asi se van alternando

Paso a explicar mas detalladamente:

Tengo el siguiente chat basado en HTML, CSS y Js.

introducir la descripción de la imagen aquí

En la parte donde dice Usuario 1 y Usuario 2, estan enlistado en un foreach desde la base de datos, muestro el nombre, el avatar y el estado online.(esto es indiferente ya que solo muestro datos)

<div class="row sideBar">
    <?php 
    if(isset({ch[0][0]}) && {ch[0][0]}!=null){
        foreach({ch} as $chat){
        ?>
            <div class="row sideBar-body" onclick="Chatear('<?php echo $chat[0];?>');"> <!-- onclick con ID del chat -->
                <div class="col-sm-3 col-xs-3 sideBar-avatar">
                    <div class="avatar-icon">
                        <img src="../_lib/assets/img/<?php echo $chat[2];?>">
                    </div>
                </div>
                <div class="col-sm-9 col-xs-9 sideBar-main">
                    <div class="row">
                        <div class="col-sm-8 col-xs-8 sideBar-name">
                            <span class="name-meta"><?php echo $chat[1];?></span>
                        </div>
                        <div class="col-sm-4 col-xs-4 pull-right sideBar-time">
                            <span class="time-meta pull-right"><i class="fas fa-circle <?php if($chat[3]==1){ ?> text-success <?php }else{ ?> text-danger <?php } ?>"></i></span>
                        </div>
                    </div>
                </div>            
            </div>
        <?php
        }
    }
    ?>
</div>

Lo importante de esto es que al momento de enlistar estos usuarios, agrego una funcion onclick con el ID del chat:

onclick="Chatear('<?php echo $chat[0];?>');"

En esta funcion JavaScript Chatear esta el problema:

function Chatear(recive_id){
    var parametros = {                      
        "recive_id" : recive_id //recibo el ID del chat
    };
    $.ajax({ //proceso ajax donde envio el ID para hacer una consulta PHP
        data:  parametros,
        url:   '../ChatController/index.php',
        type:  'post',
        beforeSend: function () {                       
        },
        success:  function (response){
            $("#chatear").html(response); //esta funcion devuelve codigo html con el historial del chat
            $('#conversation').scrollTop( $('#conversation').prop('scrollHeight')); //bajo el scroll del chat al final
            //Borrar();  ya hablare de esta funcion mas adelante.
            ReloadChat(recive_id); //aqui llamo a la función recargar el chat
                            
        }
    });
}

//funcion recargar chat, lo que hago es el setInterval cada 2 segundos para que se actualicen los mensajes entrantes o salientes.
function ReloadChat(id){
    setInterval(function(){
        Chatear(id);
    },2000);
}

Si doy clic en Usuario 1 funciona sin problemas, pero si doy clic en usuario 1 y luego en usuario 2, comienza el bucle y el aplicativo muestra los mensajes del usuario 2 y luego del usuario 1 y asi sucesivamente de manera infinita. (Entiendo que esto pasa porque hay varios setInterval ejecutandose al mismo tiempo)

Lo que trate de hacer es eliminar todos los setInterval con la funcion Borrar(); que estaba comentada:

function Borrar(){
    var ints = [];
    $("#chatear").each(function() {
      ints.Push( setInterval(function() {
                 }, 1000) 
      );
    });
    for( var i = 0; i < ints.length; ++i ){
        clearInterval( ints[i] );                   
    }
    ints = [];
}

pero esta funcion me elimina todos los procesos y los mensajes no se actualizan.

¿Como puedo eliminar los proceso setInterval sin que se elimine el ultimo o en su defecto indicarme alguna otra manera de hacer un reload cuando lleguen mensajes nuevos al chat?

2 respuestas 2

0

Mi propuesta es que intentes simplificar:

const intervals= [];

function Chatear(recive_id){

    const intervalId = setInterval(() => {
    
        $.ajax({ //proceso ajax donde envio el ID para hacer una consulta PHP
            data:  {recive_id},
            url:   '../ChatController/index.php',
            type:  'post',
            beforeSend: function () {                       
            },
            success:  function (response){
                $("#chatear").html(response); //esta funcion devuelve codigo html con el historial del chat
                $('#conversation').scrollTop( $('#conversation').prop('scrollHeight')); //bajo el scroll del chat al final
                //Borrar();  ya hablare de esta funcion mas adelante.
            }
        });
    },1000);

    intervals.push(intervalId);
}

Con esto no necesitas tener dos funciones que se llaman mutuamente, complicando la lógica y creando intervalos extra tras cada llamada.

0

Hola yo tambien estoy creando un chat que tambien ha dado varios problemas pero el tuyo puedes solucionarlo coloczando un id='numero del usuario', y utiliza el evnto onclick() para ejecutar la consulta ajax() y luego si usa el setInterval() para llamar la funcion, te dejo un ejemplo espero te sirva, comento alguans cosas dentro del codigo.

$(document).on('click', '.usuario', function(e){
  var user = $(e.target).attr('id');
  $('.chat').text(user);
  $('.text').attr('to', user);
  //aqui usas el ajax para traer el chat del usuario.
  $.ajax({
  
  });
});
function actulizar(user_id){
   $.ajax({
     url:"chat.php",
        method:"POST",
        data:{user_id:user_id, action: 'actulizar'},
        dataType: "json",
        success:function(d) {
      //Aqui aces lo que quieras con los resultados.
      }
   });
}
//seleccionas el numero del usuario del atributo to.
var user = $('.text').attr('to');
setInterval(function(){
  //descomenta la llamada a la funcion para que actualize.
  //actualizar(user);
}, 1000);
.usuario{
  cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Haz click en el usuario.</p>
<div class="usuario" id="1">Usuario1</div>
<div class="usuario" id="2">Usuario2</div>
<div class="chat"></div>
<div class="textbox">
  <input class="text" type="text" to="" name="mensaje" /> <button>Enviar</button> 
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.