121 lines
4.1 KiB
PHP
121 lines
4.1 KiB
PHP
<?php
|
|
require_once 'header.php';
|
|
require_once 'db/config.php';
|
|
|
|
if (!isset($_SESSION['user_id'])) {
|
|
header("Location: login.php");
|
|
exit;
|
|
}
|
|
|
|
$pdo = db();
|
|
$stmt = $pdo->prepare("SELECT id, username FROM users WHERE id != ?");
|
|
$stmt->execute([$_SESSION['user_id']]);
|
|
$users = $stmt->fetchAll();
|
|
?>
|
|
|
|
<header class="hero text-center">
|
|
<div class="container">
|
|
<h1 class="display-4">Chat</h1>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="container my-5">
|
|
<div class="row">
|
|
<div class="col-md-4">
|
|
<div class="card">
|
|
<div class="card-header">Users</div>
|
|
<div class="list-group list-group-flush">
|
|
<?php foreach ($users as $user): ?>
|
|
<a href="chat.php?user_id=<?php echo $user['id']; ?>" class="list-group-item list-group-item-action">
|
|
<?php echo htmlspecialchars($user['username']); ?>
|
|
</a>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-8">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
Chat with <?php
|
|
if (isset($_GET['user_id'])) {
|
|
$stmt = $pdo->prepare("SELECT username FROM users WHERE id = ?");
|
|
$stmt->execute([$_GET['user_id']]);
|
|
$chat_user = $stmt->fetch();
|
|
echo htmlspecialchars($chat_user['username']);
|
|
} else {
|
|
echo '...';
|
|
}
|
|
?>
|
|
</div>
|
|
<div class="card-body chat-box" id="chat-box" style="height: 400px; overflow-y: scroll;">
|
|
<!-- Messages will be loaded here -->
|
|
</div>
|
|
<div class="card-footer">
|
|
<?php if (isset($_GET['user_id'])):
|
|
<form id="message-form">
|
|
<div class="input-group">
|
|
<input type="hidden" name="receiver_id" id="receiver_id" value="<?php echo $_GET['user_id']; ?>">
|
|
<input type="text" name="message" id="message-input" class="form-control" placeholder="Type your message...">
|
|
<button type="submit" class="btn btn-primary">Send</button>
|
|
</div>
|
|
</form>
|
|
<?php else: ?>
|
|
<p class="text-muted">Select a user to start chatting.</p>
|
|
<?php endif; ?>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const chatBox = document.getElementById('chat-box');
|
|
const messageForm = document.getElementById('message-form');
|
|
const receiverId = document.getElementById('receiver_id');
|
|
|
|
function fetchMessages() {
|
|
if (!receiverId) return;
|
|
|
|
fetch(`api_chat.php?action=get_messages&receiver_id=${receiverId.value}`)
|
|
.then(response => response.text())
|
|
.then(data => {
|
|
chatBox.innerHTML = data;
|
|
chatBox.scrollTop = chatBox.scrollHeight;
|
|
});
|
|
}
|
|
|
|
if (messageForm) {
|
|
messageForm.addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
const messageInput = document.getElementById('message-input');
|
|
const message = messageInput.value;
|
|
|
|
if (message.trim() === '') {
|
|
return;
|
|
}
|
|
|
|
const formData = new FormData();
|
|
formData.append('action', 'send_message');
|
|
formData.append('receiver_id', receiverId.value);
|
|
formData.append('message', message);
|
|
|
|
fetch('api_chat.php', {
|
|
method: 'POST',
|
|
body: formData
|
|
})
|
|
.then(() => {
|
|
messageInput.value = '';
|
|
fetchMessages();
|
|
});
|
|
});
|
|
|
|
// Fetch messages every 3 seconds
|
|
setInterval(fetchMessages, 3000);
|
|
// Initial fetch
|
|
fetchMessages();
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<?php require_once 'footer.php'; ?>
|