¿Cómo podría actualizar los datos en mi página de chat de forma animada, cuando estoy usando la base de datos MySQL con php?
Creo que la mejor manera de hacer esto podría ser guardar el último mensaje cargado y luego, cuando alguien envíe uno nuevo, cargue solo este nuevo mensaje.
Estoy cargando datos (actualmente no en vivo) de esta manera:
include '../connection.php'; include 'verifyLogin.php'; if (!checkUserLogin()) { echo "User not logged"; return; } $chat = $_POST['chat']; if (!$chat || empty($chat) || $chat === null) return; //check is data valid $toReturn = new stdClass(); $sql0 = 'SELECT COUNT(*) AS \'count\' FROM chat_chats cc,chat_userchats cu WHERE cc.code=:code AND cc.CODE = cu.CHAT_CODE AND cu.USER_ID = :id;'; $stmt0 = $conn->prepare($sql0); $stmt0->bindParam(':code', $chat); $stmt0->bindParam(':id', $_SESSION['ID']); $stmt0->execute(); $row = $stmt0->fetch(PDO::FETCH_ASSOC); $isUserMember = $row['count'] > 0 ? true : false; $toReturn->isMember = $isUserMember; //checking is user member of chat if($isUserMember){ $sql = 'SELECT cc.MESSAGE AS "MSG",cc.SEND_TIME AS "TIME",cu.USERNAME AS "SENDER" FROM chat_conversations cc, chat_users cu WHERE cc.CODE=:code AND cu.ID = cc.SENDER_ID ORDER BY 2 DESC;'; $stmt = $conn->prepare($sql); $stmt->bindParam(':code', $chat); $stmt->execute(); $messagesArray = array(); while($row = $stmt->fetch(PDO::FETCH_ASSOC)){ $messagesArray[] = $row; } $toReturn -> chatMessages = $messagesArray; $toReturn -> chatMessagesAmount = count($messagesArray); } echo json_encode($toReturn);Para cargarlo en el cuadro de chat estoy usando AJAX:
function loadMessages() { if (!getCurrenCode() || getCurrenCode() === null) return; $.ajax({ type: 'post', url: 'actions/getMessages.php', data: { chat: getCurrenCode() }, beforeSend: () => { CHAT_MESSAGE_WRAPPER.innerHTML = null; CHAT_MESSAGE_WRAPPER.appendChild(loading); }, success: (resp) => { console.table(resp); CHAT_MESSAGE_WRAPPER.innerHTML = null; CHAT_AREA.innerHTML = null; if (!resp || resp === null) return; var response = JSON.parse(resp); var msgs = response.chatMessages; if (!msgs || msgs === null) return; for (var i of msgs) { CHAT_AREA.appendChild(generateMessageBox(i['MSG'], formatDate(new Date(i['TIME'])), i['SENDER'])); } if (response.chatMessagesAmount < 1) { CHAT_MESSAGE_WRAPPER.appendChild(noMessages); } setCurrentChatActive(); } }) }¡Gracias de antemano!
No recomiendo esto, pero puede intentar crear una función que tenga setTimeout(), como esta:
loadMessages(); function loadMessages(){ setTimeout(function(){ // ajax code for getting messages here }, 1000) }Estoy tratando de usar nodejs en esta aplicación, pero no puedo averiguar cómo importar correctamente css en el archivo ejs usando express. En la primera solicitud a la página css se carga correctamente, pero en otras no se carga por completo.
const express = require('express') const app = express() const port = 8080 app.use(express.static('public')); //static - public app.use('/css', express.static(__dirname + 'public/css')); //static - css app.use('/js', express.static(__dirname + 'public/js')); //static - js app.use('/img', express.static(__dirname + 'public/img')); //static - img app.set('views', './views'); app.set('view engine', 'ejs'); app.get('/login', (req,res) => { res.render('login') }) app.get('/register', (req,res) => { res.render('register') }) app.get('/', (req,res) => { res.render('index') }) app.listen(port, () => { console.info(`[APP] running on port: ${port}`) })estructura de archivos: árbol
contenido login.ejs
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Logowanie</title> <link rel="stylesheet" href="css/mainLogRegStyle.css"> <link rel="stylesheet" href="css/loginStyle.css"> <script src="https://kit.fontawesome.com/58fefbd958.js" crossorigin="anonymous"></script> <link rel="shortcut icon" href="../img/login-icon.png" type="image/x-icon"> </head> <body> <div class="container"> <form id="loginForm" autocomplete="off" method="POST"> <div class="formHeader"> <h1>logowanie</h1> </div> <div class="content"> <div class="messageContaier"> <div id="messageBox"></div> </div> <div class="line"><i class="fa-solid fa-user icon"></i><input placeholder="Login" name="login" type="text" id="username"></div> <div class="line"><i class="fa-solid fa-key icon"></i><input placeholder="Hasło" name="passwd" type="password" isHidden="true" id="password" class="password"><i id="showhide" class="fa-solid fa-eye show-hidePass"></i></div> <input type="submit" id="submit" value="Zaloguj"> </div> <p class="bottomText">Nie masz jeszcze konta? <a href="../register/">Załóż je!</a></p> </form> </div> </body> </html>(perdón por mezclar abbs)