Make data load lively from MySQL-CodePudding

How could I refresh data on my chat page lively, when i'm using MySQL database with php?

I think, the best way to do this could be saving last loaded message and then, when someone send new one, load only this new message.

I am loading data(currently not live) this way:

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);

To load it into chat box im using 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();
        }
    })
}

Thank you in advance!

CodePudding user response：

I don't recommend this but you can try making a function that has setTimeout(), like this:

loadMessages();
function loadMessages(){
   setTimeout(function(){
      // ajax code for getting messages here
   }, 1000)
}

CodePudding user response：

I am trying to use nodejs in this app, but i can't find out how to correctly import css into ejs file using express. On first request to page css is loading correctly, but on another ones it completly doesn't load.

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}`)
})

file structure: tree

login.ejs content


<!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 >
        <form id="loginForm" autocomplete="off" method="POST">
            <div >
                <h1>logowanie</h1>
            </div>
            <div >
                <div >
                    <div id="messageBox"></div>
                </div>
                <div ><i ></i><input placeholder="Login" name="login" type="text" id="username"></div>
                <div ><i ></i><input placeholder="Hasło" name="passwd" type="password" isHidden="true" id="password" ><i id="showhide" ></i></div>
                <input type="submit" id="submit" value="Zaloguj">
            </div>
            <p >Nie masz jeszcze konta? <a href="../register/">Załóż je!</a></p>
        </form>
    </div>
</body>

</html>

(sorry for mixing abbs)