Tengo un chat que tiene la siguiente estrutura:
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.
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 ponalert()
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.alert(formData);
o unconsole.log(formData);
en tu contexto de Ajax. Debes revisar qué estás mandando y cómo lo estás mandando.