SSE 架构中的应用场景与实现方式-JavaScript中文网-JavaScript教程资源分享门户

什么是 SSE？

SSE（Server-Sent Events）是一种基于 HTTP 的服务器推送技术，它可以实现服务器向客户端推送事件的功能。相比于传统的 AJAX 轮询方式，SSE 可以更加实时地向客户端推送数据，而且不需要客户端不停地向服务器发送请求，减轻了服务器的压力。

SSE 的应用场景

SSE 可以用于很多实时推送的场景，比如：

股票行情实时更新
即时聊天消息推送
多人协同编辑实时同步
竞技游戏实时数据更新

SSE 的实现方式

服务端实现

服务端需要发送 SSE 事件，事件包含一个或多个字段，每个字段都是由字段名和字段值组成的键值对，字段之间用换行符分隔。

以下是一个简单的 PHP 服务端示例代码：

// javascriptcn.com 代码示例
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

while (true) {
    $data = array(
        'time' => date('r'),
        'message' => 'Hello, world!'
    );

    echo "data: " . json_encode($data) . "\n\n";
    ob_flush();
    flush();

    sleep(1);
}

首先，需要设置响应头，告诉浏览器返回的是 SSE 数据。然后，使用一个无限循环来不断发送 SSE 事件。在每次循环中，构造一个包含时间和消息的数组，并使用 json_encode 将其转换为 JSON 格式的字符串。最后，使用 echo 输出 SSE 事件，并使用 ob_flush 和 flush 刷新输出缓冲区，确保数据能够及时发送到客户端。最后，使用 sleep 函数暂停一段时间，等待下一次循环。

客户端实现

客户端需要使用 JavaScript 来接收 SSE 事件，可以使用 EventSource 对象来处理 SSE 事件。

以下是一个简单的 JavaScript 客户端示例代码：

const eventSource = new EventSource('/sse.php');

eventSource.addEventListener('message', function(event) {
    const data = JSON.parse(event.data);
    console.log(data.time, data.message);
});

首先，创建一个 EventSource 对象，并指定 SSE 事件的来源地址。然后，使用 addEventListener 方法来监听 message 事件，当收到 SSE 事件时，解析事件数据，并将其输出到控制台。

总结

SSE 架构可以实现实时推送数据的功能，相比于传统的 AJAX 轮询方式，具有更高的实时性和更低的服务器压力。在实际开发中，可以使用 SSE 架构来实现多种实时推送的场景。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/657195cdd2f5e1655da45e21