当前位置：首页 > PHP

php实现消息红点

2026-02-16 06:09:12PHP

PHP 实现消息红点功能

在 PHP 中实现消息红点功能通常需要结合前端和后端技术。以下是一种常见的实现方式：

数据库设计

创建一个消息表用于存储用户未读消息的状态

CREATE TABLE user_messages (
    id INT AUTO_INCREMENT PRIMARY KEY,
    user_id INT NOT NULL,
    message TEXT NOT NULL,
    is_read BOOLEAN DEFAULT FALSE,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

后端实现

创建一个 API 端点来检查未读消息

// get_unread_count.php
header('Content-Type: application/json');

$userId = $_SESSION['user_id'] ?? 0;
$pdo = new PDO('mysql:host=localhost;dbname=your_db', 'username', 'password');

$stmt = $pdo->prepare("SELECT COUNT(*) FROM user_messages WHERE user_id = ? AND is_read = FALSE");
$stmt->execute([$userId]);
$unreadCount = $stmt->fetchColumn();

echo json_encode(['unread_count' => $unreadCount]);

前端实现

使用 JavaScript 定期检查未读消息并显示红点

function checkUnreadMessages() {
    fetch('/get_unread_count.php')
        .then(response => response.json())
        .then(data => {
            const badge = document.getElementById('message-badge');
            if (data.unread_count > 0) {
                badge.style.display = 'inline-block';
                badge.textContent = data.unread_count;
            } else {
                badge.style.display = 'none';
            }
        });
}

// 每30秒检查一次
setInterval(checkUnreadMessages, 30000);
// 页面加载时立即检查
window.addEventListener('DOMContentLoaded', checkUnreadMessages);

红点样式

在 HTML 中添加红点元素并使用 CSS 进行样式设置

<div class="message-icon">
    <span id="message-badge" class="badge"></span>
    <i class="fas fa-envelope"></i>
</div>

.badge {
    display: none;
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: red;
    color: white;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    text-align: center;
    font-size: 12px;
    line-height: 18px;
}
.message-icon {
    position: relative;
    display: inline-block;
}

标记消息为已读

当用户查看消息时更新数据库状态

// mark_as_read.php
$messageId = $_POST['message_id'] ?? 0;
$pdo = new PDO('mysql:host=localhost;dbname=your_db', 'username', 'password');

$stmt = $pdo->prepare("UPDATE user_messages SET is_read = TRUE WHERE id = ?");
$stmt->execute([$messageId]);

echo json_encode(['success' => true]);

实时更新方案

如果需要更实时的效果，可以考虑使用 WebSocket 或 Server-Sent Events (SSE) 技术

// sse_unread_count.php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

while (true) {
    $userId = $_SESSION['user_id'] ?? 0;
    $pdo = new PDO('mysql:host=localhost;dbname=your_db', 'username', 'password');

    $stmt = $pdo->prepare("SELECT COUNT(*) FROM user_messages WHERE user_id = ? AND is_read = FALSE");
    $stmt->execute([$userId]);
    $unreadCount = $stmt->fetchColumn();

    echo "data: " . json_encode(['unread_count' => $unreadCount]) . "\n\n";
    ob_flush();
    flush();

    sleep(5); // 每5秒检查一次
}

这种方法结合了 PHP 后端处理和前端 JavaScript 定时检查，可以有效地实现消息红点功能。根据实际需求可以选择简单的轮询方式或更高级的实时推送方案。

php实现消息红点