Xin chào anh/chị,
Em mới học lập trình gần đây và đang tạo forum, hiện tại em đang bị lỗi phần chatbox chung, khi nhập nội dung chat thì có hiển thị lên chatbox nhưng sau đó mất đi vì dữ liệu chat không import được vào database để lưu trữ. Đây là code của em, mong anh/chị nào có thời gian có thể hỗ trợ xem giúp em, em cám ơn anh/chị.
HTML:
<div class="chatbox-container">
<h3>Trò chuyện</h3>
<div class="divider"></div> <!-- Đường line phân cách -->
<div class="chatbox-body" id="chatbox-body">
<!-- Tin nhắn sẽ được thêm vào đây -->
</div>
<div class="divider"></div> <!-- Đường line phân cách -->
<div class="chatbox-footer">
<input type="text" class="input-field" id="message-input" placeholder="Nhập tin nhắn...">
<button id="send-button"><i class="fas fa-paper-plane"></i> Gửi</button>
</div>
JS/AJAX
$(document).ready(function() {
var user_id = "<?php echo $_SESSION['user']['id']; ?>";
var username = "<?php echo $_SESSION['user']['username']; ?>";
var avatar = "<?php echo $_SESSION['user']['avatar']; ?>";
function appendMessage(message, username, avatar, type) {
var messageDiv = $('<div class="message"></div>');
var avatarImg = $('<img class="avatar">').attr('src', avatar);
var usernameSpan = $('<span class="username">').text(username);
var messageBody = $('<div class="message-body">').text(message);
messageDiv.append(avatarImg).append(usernameSpan).append(messageBody);
if (type === 'sent') {
messageDiv.addClass('sent');
}
$('#chatbox-body').append(messageDiv);
$('#chatbox-body').scrollTop($('#chatbox-body')[0].scrollHeight);
}
$('#send-button').click(function() {
var message = $('#message-input').val().trim();
if (message) {
$.ajax({
url: 'send_message.php',
method: 'POST',
data: {
message: message,
user_id: user_id
},
dataType: 'json',
success: function(response) {
appendMessage(message, username, avatar, 'sent');
$('#message-input').val(''); // Xóa ô nhập tin nhắn
}
});
}
});
$('#message-input').keypress(function(e) {
if (e.which === 13) { // Khi nhấn Enter
$('#send-button').click();
}
});
function loadMessages() {
$.ajax({
url: 'get_messages.php',
method: 'GET',
success: function(data) {
const messages = JSON.parse(data);
$('#chatbox-body').empty();
messages.forEach(function(message) {
appendMessage(message.message, message.username, message.avatar, 'received');
});
}
});
}
setInterval(loadMessages, 3000);
loadMessages(); });
file send message
<?php session_start(); include 'db.php'; if ($_SERVER['REQUEST_METHOD'] == 'POST') {
if (!isset($_POST['message']) || empty(trim($_POST['message']))) {
echo json_encode(['status' => 'error', 'message' => 'Tin nhắn không được để trống']); exit();
} if (!isset($_SESSION['user']) || !isset($_SESSION['user']['id'])) { echo json_encode(['status' => 'error', 'message' => 'Người dùng chưa đăng nhập']);
exit();
}
$user_id = $_SESSION['user']['id'];
$message = htmlspecialchars(trim($_POST['message']), ENT_QUOTES, 'UTF-8'); if (!$conn) {
echo json_encode(['status' => 'error', 'message' => 'Lỗi kết nối database']);
exit();
}
$sql = "INSERT INTO messages (user_id, message) VALUES (?, ?)";
$stmt = $conn->prepare($sql);
if (!$stmt) {
echo json_encode(['status' => 'error', 'message' => 'Lỗi chuẩn bị truy vấn SQL: ' . $conn->error]);
exit();
}
$stmt->bind_param("is", $user_id, $message);
if ($stmt->execute()) {
echo json_encode(['status' => 'success', 'message' => 'Tin nhắn đã được gửi']);
} else {
echo json_encode(['status' => 'error', 'message' => 'Lỗi khi gửi tin nhắn: ' . $stmt->error]);
}
$stmt->close(); } else { echo json_encode(['status' => 'error', 'message' => 'Yêu cầu không hợp lệ']); } ? >
file get message
<?php
session_start();
include 'db.php';
$sql = "SELECT m.message, u.username, u.avatar, m.timestamp
FROM messages m
JOIN users u ON m.user_id = u.id
ORDER BY m.timestamp ASC";
$result = $conn->query($sql);
$messages = [];
while ($row = $result->fetch_assoc()) {
$messages[] = $row;
}
echo json_encode($messages);
?>
83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?