PHP 服务器端事件 (SSE)-JavaScript中文网-JavaScript教程资源分享门户

在现代的Web应用中，实时更新数据的需求变得越来越普遍。服务器发送事件（Server-Sent Events，简称SSE）是一种允许服务器向浏览器推送实时更新的技术。与WebSocket相比，SSE更为简单，只需要单向通信，并且支持自动重连机制。

什么是SSE？

服务器发送事件（SSE）是一种允许服务器将更新推送到客户端的技术。这些更新可以是文本、HTML片段或JSON数据等格式。SSE使用HTTP协议进行通信，这意味着它可以轻松地通过现有的防火墙和代理服务器。此外，SSE还具有自动重连功能，当网络连接中断时，浏览器会自动尝试重新建立连接。

如何实现SSE

要实现SSE，你需要在服务器端编写代码来生成事件流，以及在客户端编写JavaScript代码来接收这些事件。

服务器端实现

创建一个PHP文件

首先，创建一个PHP文件，例如 sse.php，这个文件将负责生成并发送事件流到客户端。

// www.javascriptcn.com code example
<?php
header("Content-Type: text/event-stream");
header("Cache-Control: no-cache");

// 设置超时时间，防止长时间运行的请求被中断
set_time_limit(0);

// 发送消息给客户端
echo "data: 欢迎使用服务器发送事件！\n\n";
flush();

while (true) {
    // 模拟从数据库或其他源获取新数据
    $newData = fetchDataFromSource();
    
    if ($newData !== false) {
        echo "data: " . json_encode($newData) . "\n\n";
    }
    
    // 每隔3秒发送一次数据
    sleep(3);
}

function fetchDataFromSource() {
    // 这里可以添加你的业务逻辑，比如从数据库查询新的数据
    return [
        'message' => '这是新的消息！',
        'timestamp' => time()
    ];
}
?>

在这个例子中，我们首先设置了响应头为 text/event-stream，这告诉浏览器这是一个服务器发送事件流。然后我们进入一个无限循环，在每次循环中检查是否有新的数据需要发送给客户端。如果有，我们将数据编码为JSON格式并通过 data: 字段发送出去。

注意事项

在实际应用中，你需要根据具体需求调整 fetchDataFromSource 函数中的逻辑。
使用 sleep() 来控制发送频率，但要注意不要设置得过长，否则可能导致用户体验不佳。
确保在发送任何数据之前调用 flush() 函数，以便立即发送缓冲区中的数据到客户端。

客户端实现

接下来，我们需要在HTML页面中添加JavaScript代码来接收来自服务器的数据。

// www.javascriptcn.com code example
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>服务器发送事件示例</title>
</head>
<body>
    <div id="events"></div>

    <script>
        // 创建一个新的EventSource对象，指定服务器端的SSE脚本路径
        const eventSource = new EventSource('sse.php');

        // 监听open事件，当连接成功打开时触发
        eventSource.onopen = function () {
            console.log('连接已建立');
        };

        // 监听message事件，当接收到服务器发送的数据时触发
        eventSource.onmessage = function (event) {
            const data = JSON.parse(event.data);
            const eventsDiv = document.getElementById('events');
            eventsDiv.innerHTML += `<p>${data.message} - ${data.timestamp}</p>`;
        };

        // 监听error事件，当发生错误时触发
        eventSource.onerror = function () {
            console.error('发生错误');
        };
    </script>
</body>
</html>

在这个示例中，我们创建了一个 EventSource 对象，并指定了服务器端的SSE脚本路径。然后我们绑定了几个事件处理器：onopen 用于处理连接成功打开的情况，onmessage 用于处理接收到的消息，onerror 则用于处理可能出现的错误情况。

总结

通过以上步骤，你可以实现一个基本的服务器发送事件应用。当然，实际项目中可能还需要考虑更多的细节，比如错误处理、安全性等问题。希望这个简单的教程能帮助你快速入门SSE技术。