35539-vm/dashboard.php

<?php
session_start();
if (!isset($_SESSION['user_id'])) {
    header('Location: login.php');
    exit();
}

require_once 'db/config.php';
include 'header.php';

$pdo = db();
$current_user_id = $_SESSION['user_id'];

// Check if we are viewing a specific chat
$chat_with_id = isset($_GET['chat_with_id']) ? (int)$_GET['chat_with_id'] : null;




if ($chat_with_id) {
    // Chat view
    $stmt = $pdo->prepare('SELECT display_name FROM users WHERE id = ?');
    $stmt->execute([$chat_with_id]);
    $chat_with_user = $stmt->fetch(PDO::FETCH_ASSOC);

    // Fetch messages
    $stmt = $pdo->prepare('SELECT * FROM messages WHERE (sender_id = ? AND receiver_id = ?) OR (sender_id = ? AND receiver_id = ?) ORDER BY created_at ASC');
    $stmt->execute([$current_user_id, $chat_with_id, $chat_with_id, $current_user_id]);
    $messages = $stmt->fetchAll(PDO::FETCH_ASSOC);

    ?>
    <div class="d-flex flex-column" style="height: calc(100vh - 56px);">
        <header class="p-3 bg-light border-bottom">
            <div class="container-fluid">
                <div class="d-flex justify-content-between align-items-center">
                    <a href="dashboard.php" class="btn btn-secondary">< Back</a>
                    <h1 class="h5 mb-0">Chat with <?php echo htmlspecialchars($chat_with_user['display_name']); ?></h1>
                    <div></div>
                </div>
            </div>
        </header>

        <main class="flex-grow-1" style="overflow-y: auto;">
            <div class="container-fluid p-3">
                <div class="d-flex flex-column gap-3" id="chat-messages">
                    <?php foreach ($messages as $message): ?>
                        <div class="p-2 rounded <?php echo $message['sender_id'] == $current_user_id ? 'bg-light text-dark align-self-end text-end' : 'bg-primary text-white align-self-start'; ?> col-8">
                            <?php echo htmlspecialchars($message['message']); ?>
                        </div>
                    <?php endforeach; ?>
                </div>
            </div>
        </main>

        <footer class="p-3 bg-light border-top">
            <div class="container-fluid">
                <form id="message-form">
                    <div class="input-group">
                        <input type="hidden" name="receiver_id" value="<?php echo $chat_with_id; ?>">
                        <input type="text" name="message" class="form-control" placeholder="Type a message..." required>
                        <button class="btn btn-primary" type="submit">Send</button>
                    </div>
                </form>
            </div>
        </footer>
    </div>
    <?php
} else {
    // Contact list view
    $stmt = $pdo->prepare('SELECT id, display_name FROM users WHERE id != ?');
    $stmt->execute([$current_user_id]);
    $users = $stmt->fetchAll(PDO::FETCH_ASSOC);
    ?>
    <div class="container mt-4">
        <h1 class="h3 mb-3">Contacts</h1>
        <div class="list-group">
            <?php foreach ($users as $user): ?>
                <a href="dashboard.php?chat_with_id=<?php echo $user['id']; ?>" class="list-group-item list-group-item-action">
                    <?php echo htmlspecialchars($user['display_name']); ?>
                </a>
            <?php endforeach; ?>
        </div>
    </div>
    <?php
}
?>
<script>
if (document.getElementById('message-form')) {
    const chatMessages = document.getElementById('chat-messages');
    const messageForm = document.getElementById('message-form');
    const messageInput = messageForm.querySelector('input[name="message"]');
    const receiverId = messageForm.querySelector('input[name="receiver_id"]').value;
    const senderId = <?php echo $current_user_id; ?>;

    const conn = new WebSocket(`ws://${window.location.hostname}:8080?user_id=${senderId}`);

    conn.onopen = function(e) {
        console.log("Connection established!");
    };

    conn.onmessage = function(e) {
        const msg = JSON.parse(e.data);
        
        // Only append if the message is part of the current chat
        if ((msg.sender_id == senderId && msg.receiver_id == receiverId) || (msg.sender_id == receiverId && msg.receiver_id == senderId)) {
            const messageElement = document.createElement('div');
            messageElement.classList.add('p-2', 'rounded', 'col-8');

            if (msg.sender_id == senderId) {
                messageElement.classList.add('bg-light', 'text-dark', 'align-self-end', 'text-end');
            } else {
                messageElement.classList.add('bg-primary', 'text-white', 'align-self-start');
            }

            messageElement.innerHTML = msg.message;
            chatMessages.appendChild(messageElement);
            chatMessages.scrollTop = chatMessages.scrollHeight;
        }
    };

    conn.onclose = function(e) {
        console.log("Connection closed!");
    }

    messageForm.addEventListener('submit', function(e) {
        e.preventDefault();
        const message = messageInput.value;
        if (message) {
            const data = {
                sender_id: senderId,
                receiver_id: receiverId,
                message: message
            };
            conn.send(JSON.stringify(data));

            // Append sent message immediately
            const messageElement = document.createElement('div');
            messageElement.classList.add('p-2', 'rounded', 'col-8', 'bg-light', 'text-dark', 'align-self-end', 'text-end');
            messageElement.innerHTML = message;
            chatMessages.appendChild(messageElement);
            chatMessages.scrollTop = chatMessages.scrollHeight;

            messageInput.value = '';
        }
    });
}
</script>
<?php
include 'footer.php';
?>