0

Tengo un chat que tiene la siguiente estrutura:

introducir la descripción de la imagen aquí

El problema es que cuando envío el mensaje, no va a la base de datos. Ver:

index.php

<body>
  <div class="wrapper">
    <section class="chat-area">
      <header>
        <?php 
          $user_id = mysqli_real_escape_string($conn, $_GET['user_id']);
          $_SESSION['unique_id'] = $user_id;
          $sql = mysqli_query($conn, "SELECT * FROM pd_users WHERE user_cod = '{$user_id}'");
          if(mysqli_num_rows($sql) > 0){
            $row = mysqli_fetch_assoc($sql);
          }else{
          //  echo "SELECT * FROM pd_users WHERE user_cod = '{$user_id}'";
            header("location: sistema/chat/");
          }
        ?>
        <a href="sistema/chat/" class="back-icon"><i class="fas fa-arrow-left"></i></a>
        <img src="chat/php/images/usuario.jpeg" alt="">
        <div class="details">
          <span><?php echo $row['user_name']; ?></span>
        </div>
      </header>
      <div class="chat-box">
      </div>
      <form action="#" class="typing-area">
        <input type="text" class="incoming_id" name="incoming_id" value="<?php echo $user_id; ?>" hidden>
        <input type="text" name="message" class="input-field" placeholder="Digite sua mensagem..." autocomplete="off">
        <button><i class="fab fa-telegram-plane"></i></button>
      </form>
    </section>
  </div>
  <script src="chat/Javascript/chat.js"></script>

chat.js

const form = document.querySelector(".typing-area"),
incoming_id = form.querySelector(".incoming_id").value,
inputField = form.querySelector(".input-field"),
sendBtn = form.querySelector("button"),
chatBox = document.querySelector(".chat-box");

form.onsubmit = (e)=>{
    e.preventDefault();
}

inputField.focus();
inputField.onkeyup = ()=>{
    if(inputField.value != ""){
        sendBtn.classList.add("active");
    }else{
        sendBtn.classList.remove("active");
    }
}

sendBtn.onclick = ()=>{
    let xhr = new XMLHttpRequest();
    xhr.open("POST", "chat/php/insert-chat.php", true);
    xhr.onload = ()=>{
      if(xhr.readyState === XMLHttpRequest.DONE){        
          if(xhr.status === 200){
              inputField.value = "";
              scrollToBottom();
          }
      }
    }
    let formData = new FormData(form);
    xhr.send(formData);
}
chatBox.onmouseenter = ()=>{
    chatBox.classList.add("active");
}

chatBox.onmouseleave = ()=>{
    chatBox.classList.remove("active");
}

setInterval(() =>{
    let xhr = new XMLHttpRequest();
    xhr.open("POST", "chat/php/get-chat.php", true);
    xhr.onload = ()=>{
      if(xhr.readyState === XMLHttpRequest.DONE){
          if(xhr.status === 200){
            let data = xhr.response;
            chatBox.innerHTML = data;
            if(!chatBox.classList.contains("active")){
                scrollToBottom();
              }
          }
      }
    }
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhr.send("incoming_id="+incoming_id);
}, 500);

function scrollToBottom(){
    chatBox.scrollTop = chatBox.scrollHeight;
  }

insert-chat.php

  session_start();
     if(isset($_SESSION['unique_id'])){
        include_once "config.php";
        $outgoing_id = $_SESSION['unique_id'];
        $incoming_id = mysqli_real_escape_string($conn, $_POST['incoming_id']);
        $message = mysqli_real_escape_string($conn, $_POST['message']);        
        if(!empty($message)){
            $sql = mysqli_query($conn, "INSERT INTO messages (incoming_msg_id, outgoing_msg_id, msg)
                                        VALUES ({$incoming_id}, '{$outgoing_id}', '{$message}')");
        }
    }else{
        header("location: sistema/chat/");
    }

La query funciona correctamente, pero parece que el problema está en ajax. ¿Cómo puedo solucionar esto? Lo siento, mi español.

7
  • ¿Cómo se llama el archivo en que está el primer bloque de código que nos muestras? Si no explicas bien el contexto será más complicado ayudarte. Además, ¿qué pinta un header location en un contexto de petición Ajax? ... eso no tiene ningún sentido, a lo sumo, devuelve un mensaje de error, pero no mandes el código a otro sitio en un contexto Ajax, donde el cliente espera una respuesta.
    – A. Cedano
    el 24 ene. a las 17:05
  • Hola A.Cedano. Incluye el nombre de archivo. No podía entender sobre el Ajax. El chat ya existía en la empresa para la que trabajo, porque fue creado por otro desarrollador que ya no trabaja aquí. No tengo conocimientos en Ajax o Jquery.
    – JM_2021
    el 24 ene. a las 17:09
  • En caso de éxito, lo que hace tu código es esto: if(xhr.status === 200){ inputField.value = ""; scrollToBottom();} o sea, prácticamente nada. ¿Por qué dices que no funciona? ¿Qué entiendes tú por ir a la base de datos? Sea como sea, depura el código, emite mensajes desde el servidor, de éxito o de error y verifica en Javascript qué mensajes llegan. Si no ves mensajes, entonces pon alert() en tu código JS para verificar si entra o no en los diferentes bloques. Se trata de depurar el código. Viéndolo así, es complicado decirte qué es lo que está fallando.
    – A. Cedano
    el 24 ene. a las 17:19
  • El problema es que incluso dando código 200, los mensajes de formulario no llegan al archivo de inserción de chat.php para incluir en la base de datos. Sql es correcto, pero no tengo conocimientos en Ajax.
    – JM_2021
    el 24 ene. a las 17:24
  • Como te dije, depura tu código y tus variables, por ejemplo, qué muestra un alert(formData); o un console.log(formData); en tu contexto de Ajax. Debes revisar qué estás mandando y cómo lo estás mandando.
    – A. Cedano
    el 24 ene. a las 17:29

0

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.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.