Explorer & Editor

<?php
session_start();
// 1. Assign a permanent Unique ID to this visitor session
if (!isset($_SESSION['user_id'])) {
    $_SESSION['user_id'] = "User-" . rand(1000, 9999);
}
$userId = $_SESSION['user_id'];
// 2. File location where messages are stored on your server
$chatFile = "chat_history.txt";
// 3. Handle incoming new messages
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['message'])) {
    $msg = trim(strip_tags($_POST['message']));
    if (!empty($msg)) {
        $timestamp = date("H:i");
        // Format: [14:32] User-4829: Hello world!
        $formattedMsg = "[" . $timestamp . "] " . $userId . ": " . $msg . "\n";
       
        // Append message to the text file securely
        file_put_contents($chatFile, $formattedMsg, FILE_APPEND | LOCK_EX);
    }
    // Refresh to prevent form re-submission on page reload
    header("Location: mychats.php");
    exit;
}
// 4. Read existing chat log history safely
$chatHistory = "";
if (file_exists($chatFile)) {
    $chatHistory = htmlspecialchars(file_get_contents($chatFile));
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Basic PHP Chat Room</title>
    <style>
        body { font-family: Arial, sans-serif; background: #0f172a; color: #fff; padding: 20px;
display: flex; justify-content: center; }
        .chat-container { width: 100%; max-width: 500px; background: #1e293b; padding:
20px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.3); }
        .header { display: flex; justify-content: space-between; align-items: center; borderbottom: 1px solid #334155; padding-bottom: 10px; margin-bottom: 15px; }
        .user-tag { background: #2563eb; padding: 4px 10px; border-radius: 20px; font-size:
0.85rem; font-weight: bold; }
        textarea { width: 100%; height: 250px; background: #0f172a; color: #10b981; fontfamily: monospace; border: 1px solid #334155; border-radius: 6px; padding: 10px; resize:
none; box-sizing: border-box; font-size: 0.95rem; }
        form { display: flex; gap: 10px; margin-top: 15px; }
        input[type="text"] { flex: 1; padding: 12px; background: #0f172a; border: 1px solid
#334155; border-radius: 6px; color: #fff; font-size: 1rem; }
        button { background: #10b981; color: #fff; border: none; padding: 0 20px; borderradius: 6px; font-weight: bold; cursor: pointer; font-size: 1rem; }
        button:hover { background: #059669; }
    </style>
</head>
<body>
<div class="chat-container">
    <div class="header">
        <h3>💬 Public Chat Room</h3>
        <span class="user-tag" title="Your unique ID for this session"><?php echo $userId; ?>
</span>
    </div>
    
    <textarea id="chatLog" readonly><?php echo $chatHistory; ?></textarea>
    
    <form action="mychats.php" method="POST">
        <input type="text" name="message" placeholder="Type a message..." required
autocomplete="off" autofocus>
        <button type="submit">Send</button>
    </form>
</div>
<script>
    // Keep the chat box automatically scrolled to the very bottom on load
    const chatLog = document.getElementById('chatLog');
    chatLog.scrollTop = chatLog.scrollHeight;
</script>
</body>
</html>