我怎么能刷新数据在我的聊天页面生动，当我使用MySQL数据库与php?
我认为，最好的方法是保存上次加载的消息，然后，当有人发送新的消息时，只加载这条新消息。
我正在加载数据(目前不是活的):
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);
使用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();
}
})
}
提前感谢!
我不建议这样做，但你可以尝试创建一个函数setTimeout()，像这样:
loadMessages();
function loadMessages(){
setTimeout(function(){
// ajax code for getting messages here
}, 1000)
}
我试图在这个应用程序中使用nodejs，但我找不到如何使用express将css正确导入ejs文件。在第一次请求页面css加载正确，但在另一个完全不加载。
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}`)
})
文件结构:树
login.ejscontent
<!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>