PHP聊天应用：用户收新消息时自动刷新页面功能失效求助

First, let’s break down why manual refreshes are needed right now: PHP generates a static page when it loads, so your browser has no way to know when new messages arrive unless it explicitly asks the server. Here are practical, step-by-step solutions to get automatic updates working, ordered by ease of implementation:

1. Simple Periodic AJAX Polling (Easiest to Set Up) #

This uses JavaScript to check for new messages every few seconds via AJAX. It works with your existing code and requires minimal changes.

Step 1: Update Your PHP Backend #

Create a new file get_new_messages.php that fetches only messages the client hasn’t seen yet (instead of reloading the entire chat history):

<?php
// Include your database connection code here
$email = $_GET['email'];
$last_message_id = $_GET['last_id'];

// Fetch only new messages (more efficient than UNION ALL for this use case)
$query = "SELECT * FROM `chat` 
          WHERE ((fromthe = ? AND tothe='theadmin') OR (fromthe = 'theadmin' AND tothe=?)) 
          AND id > ? 
          ORDER BY id DESC";

// Use prepared statements to prevent SQL injection
$stmt = mysqli_prepare($conn, $query);
mysqli_stmt_bind_param($stmt, "ssi", $email, $email, $last_message_id);
mysqli_stmt_execute($stmt);
$result = mysqli_stmt_get_result($stmt);

$messages = [];
while ($row = mysqli_fetch_assoc($result)) {
    $messages[] = $row;
}

// Mark new messages as read
$sql1 = "UPDATE `chat` SET `status`='1' WHERE tothe=? AND id > ?";
$stmt_update = mysqli_prepare($conn, $sql1);
mysqli_stmt_bind_param($stmt_update, "si", $email, $last_message_id);
mysqli_stmt_execute($stmt_update);

// Return messages as JSON for the client
echo json_encode($messages);
?>

Step 2: Add Client-Side JavaScript #

Add this script to your chat page to fetch and display new messages automatically:

// Track the ID of the last message the user has seen
let lastMessageId = 0;
const userEmail = "<?php echo $email; ?>"; // Pass the user's email from PHP

// Function to fetch and display new messages
function loadNewMessages() {
    fetch(`get_new_messages.php?email=${userEmail}&last_id=${lastMessageId}`)
        .then(response => response.json())
        .then(messages => {
            if (messages.length > 0) {
                // Update the last seen message ID
                lastMessageId = messages[0].id;
                
                // Append new messages to your chat container (adjust selectors to match your UI)
                const chatContainer = document.getElementById('chat-box');
                messages.reverse().forEach(msg => {
                    const messageDiv = document.createElement('div');
                    messageDiv.className = msg.fromthe === 'theadmin' ? 'admin-msg' : 'user-msg';
                    messageDiv.textContent = msg.message; // Replace with your message content field
                    messageDiv.dataset.messageId = msg.id; // For initial load tracking
                    chatContainer.appendChild(messageDiv);
                });
                
                // Scroll to the bottom of the chat to show new messages
                chatContainer.scrollTop = chatContainer.scrollHeight;
            }
        })
        .catch(err => console.error('Failed to load messages:', err));
}

// Check for new messages every 3 seconds (adjust interval as needed)
setInterval(loadNewMessages, 3000);

// Set initial lastMessageId when the page loads
document.addEventListener('DOMContentLoaded', () => {
    const lastMsgElement = document.querySelector('#chat-box div:last-child');
    if (lastMsgElement) {
        lastMessageId = parseInt(lastMsgElement.dataset.messageId);
    }
});

Don’t forget to add data-message-id="<?php echo $row['id']; ?>" to each message element in your initial chat load so the script knows where to start.

2. Server-Sent Events (SSE) for Real-Time Pushes #

SSE is better than polling because the server pushes updates to the client whenever new messages arrive, instead of the client asking repeatedly. It’s still relatively simple to implement.

Step 1: Create an SSE Endpoint (chat_sse.php) #

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
header('Connection: keep-alive');

$email = $_GET['email'];
$last_message_id = $_GET['last_id'];

while (true) {
    // Check for new messages using prepared statements
    $query = "SELECT * FROM `chat` 
              WHERE ((fromthe = ? AND tothe='theadmin') OR (fromthe = 'theadmin' AND tothe=?)) 
              AND id > ? 
              ORDER BY id DESC";
    $stmt = mysqli_prepare($conn, $query);
    mysqli_stmt_bind_param($stmt, "ssi", $email, $email, $last_message_id);
    mysqli_stmt_execute($stmt);
    $result = mysqli_stmt_get_result($stmt);
    
    $messages = [];
    while ($row = mysqli_fetch_assoc($result)) {
        $messages[] = $row;
    }
    
    if (!empty($messages)) {
        // Mark messages as read
        $sql1 = "UPDATE `chat` SET `status`='1' WHERE tothe=? AND id > ?";
        $stmt_update = mysqli_prepare($conn, $sql1);
        mysqli_stmt_bind_param($stmt_update, "si", $email, $last_message_id);
        mysqli_stmt_execute($stmt_update);
        
        // Send messages to the client
        echo "data: " . json_encode($messages) . "\n\n";
        flush();
        
        // Update last message ID
        $last_message_id = $messages[0]['id'];
    }
    
    // Wait 2 seconds before checking again
    sleep(2);
}
?>

Step 2: Client-Side SSE Code #

let lastMessageId = 0;
const userEmail = "<?php echo $email; ?>";

// Initialize SSE connection
const eventSource = new EventSource(`chat_sse.php?email=${userEmail}&last_id=${lastMessageId}`);

eventSource.onmessage = function(event) {
    const messages = JSON.parse(event.data);
    if (messages.length > 0) {
        lastMessageId = messages[0].id;
        const chatContainer = document.getElementById('chat-box');
        messages.reverse().forEach(msg => {
            const messageDiv = document.createElement('div');
            messageDiv.className = msg.fromthe === 'theadmin' ? 'admin-msg' : 'user-msg';
            messageDiv.textContent = msg.message;
            messageDiv.dataset.messageId = msg.id;
            chatContainer.appendChild(messageDiv);
        });
        chatContainer.scrollTop = chatContainer.scrollHeight;
    }
};

// Handle disconnections and reconnect automatically
eventSource.onerror = function(error) {
    console.error('SSE connection failed:', error);
    eventSource.close();
    setTimeout(() => window.location.reload(), 5000);
};

3. WebSockets for Instant Two-Way Communication #

For the most responsive chat experience, WebSockets enable real-time, two-way communication. In PHP, you can use the Ratchet library to implement this. It’s more complex but ideal for chat apps where instant updates are critical.

Quick Setup Overview: #

1. Install Ratchet via Composer: composer require cboden/ratchet
2. Create a WebSocket server class that handles message routing between admin and users
3. Run the server in the background
4. Use JavaScript’s WebSocket API to connect to the server from your chat page

This approach eliminates polling entirely and sends messages the moment they’re created.

Key Best Practices #

• Always Use Prepared Statements: This prevents SQL injection, which is a critical security risk in your original query.
• Minimize Data Transfer: Only fetch new messages instead of reloading the entire chat history every time.
• Handle Edge Cases: Add logic to reconnect clients if the connection drops (especially for SSE/WebSockets).

内容的提问来源于stack exchange，提问作者fazal za