如何结合EventSource与Ajax实现多访客网页更新实时通知？

算力阿峰

2026-8-9

解决方案

可行性结论

需求完全可行，但你的实现逻辑存在核心错误：EventSource是基于HTTP长连接的单向推送机制，客户端会持续保持与服务器的GET连接，而非在POST提交时临时返回事件。原代码混淆了“提交数据”和“推送通知”两个独立流程，导致无法正常工作。

核心逻辑修正

要实现跨访客的实时通知，需要拆分两个独立端点：

提交端点：处理访客的AJAX POST请求，保存数据并标记更新
推送端点：维持与所有在线访客的长连接，定期检查更新并推送通知

具体实现代码

1. 提交端点（save.php）

负责接收表单提交、保存数据，同时记录更新信息供推送端点读取：

<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['save'])) {
    // 替换为你的业务逻辑：保存提交的内容
    $content = $_POST['content'] ?? '';
    $updateData = json_encode([
        'time' => date('Y-m-d H:i:s'),
        'type' => 'save',
        'content' => $content
    ]);
    // 用文件暂存更新信息（生产环境建议用Redis等内存存储）
    file_put_contents('latest_update.json', $updateData);

    // 向AJAX请求返回成功响应
    header('Content-Type: application/json');
    echo json_encode(['status' => 'success']);
    exit;
}

2. 推送端点（events.php）

维持长连接，定期检查更新并推送给所有在线客户端：

<?php
// 设置EventSource所需的HTTP头部
header('Cache-Control: no-store, no-cache, must-revalidate');
header('Content-Type: text/event-stream');
header('Connection: keep-alive');
header('Access-Control-Allow-Origin: *'); // 根据实际域名调整

// 关闭PHP超时限制，维持长连接
set_time_limit(0);
// 关闭输出缓冲，确保事件实时推送
ob_implicit_flush(true);
ob_end_flush();

$lastUpdateTime = 0;
$updateFile = 'latest_update.json';

// 长连接循环，持续监听更新
while (true) {
    // 检查是否有新的更新
    if (file_exists($updateFile)) {
        $currentMtime = filemtime($updateFile);
        if ($currentMtime > $lastUpdateTime) {
            $lastUpdateTime = $currentMtime;
            $updateData = file_get_contents($updateFile);
            // 发送自定义"update"事件
            echo "event: update\n";
            echo "data: {$updateData}\n\n";
        }
    }

    // 发送心跳事件，避免连接被浏览器/服务器断开
    echo "event: ping\n";
    echo "data: {\"time\": \"" . date('Y-m-d H:i:s') . "\"}\n\n";

    // 休眠3秒，降低服务器资源消耗
    sleep(3);
}

3. 客户端JavaScript代码

同时处理表单提交和EventSource监听：

// 建立EventSource长连接，监听推送通知
const eventSource = new EventSource('events.php', { withCredentials: true });

// 监听更新事件，更新页面内容
eventSource.addEventListener('update', (event) => {
    const data = JSON.parse(event.data);
    console.log(`收到更新：${data.type} @ ${data.time}`);
    // 替换为你的页面更新逻辑，比如同步文本域内容
    document.getElementById('content-input').value = data.content;
});

// 监听心跳事件（可选，用于调试连接状态）
eventSource.addEventListener('ping', (event) => {
    const data = JSON.parse(event.data);
    console.log(`连接心跳：${data.time}`);
});

// 处理连接错误，自动重连
eventSource.addEventListener('error', (err) => {
    console.error('EventSource连接异常:', err);
    setTimeout(() => window.location.reload(), 5000);
});

// 处理表单提交
document.getElementById('submit-form').addEventListener('submit', (e) => {
    e.preventDefault();
    const content = document.getElementById('content-input').value;

    // 用AJAX提交数据到save.php
    fetch('save.php', {
        method: 'POST',
        credentials: 'include',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        },
        body: `save=1&content=${encodeURIComponent(content)}`
    })
    .then(res => res.json())
    .then(data => {
        if (data.status === 'success') {
            console.log('提交成功');
        }
    })
    .catch(err => console.error('提交失败:', err));
});

原代码问题分析

端点混淆：试图在POST提交端点返回EventSource事件，但EventSource客户端只会发起GET请求，且需要长连接，POST响应的事件无法被客户端接收
无效响应：未触发save逻辑时，PHP返回空内容，导致客户端收到不符合EventSource规范的HTTP响应，触发头部错误
无连接管理：没有维护活跃的客户端连接，无法向所有在线访客广播通知

生产环境注意事项

避免用文件存储更新信息，建议用Redis等内存数据库实现高效的事件广播
配置服务器（如Nginx）支持长连接，调整PHP-FPM进程数避免资源耗尽
添加身份认证逻辑，确保只有合法用户能接收通知

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

如何结合EventSource与Ajax实现多访客网页更新实时通知？

可行性结论 #

核心逻辑修正 #

具体实现代码 #