SSE流式模式示例

创作时间:

作者:

@小白创作中心

SSE流式模式示例

引用

来源

https://cloud.tencent.com/developer/article/2466070

在现代Web应用开发中，用户体验的优化是一个非常重要的目标，尤其是在涉及到实时数据更新的场景下。流式模式（Streaming Mode）作为一种高效的数据传输方式，能够让用户以打字机输出的形式获得流式返回的效果。这种方式通过Server-Sent Events (SSE)技术实现，带来了独特的用户体验。

什么是流式模式？

流式模式，顾名思义，即通过流的方式持续发送数据而不是一次性全部返回。与传统的HTTP请求模式不同，流式模式的特点在于服务器可以在连接打开后持续地向客户端发送数据。这种实时传输方式不仅可以加快数据的响应速度，还可以减少带宽占用，使得应用的运行更加流畅。

以打字机输出为例，假设我们在Web页面上输入一个查询请求，传统模式下，页面会等待服务器返回完整的结果才会显示。而在流式模式下，服务器会逐步发送数据，客户端可以立即将接收到的数据呈现在用户面前，产生一种“打字机”式的输出效果。这种方式显著提升了用户的等待体验，并让应用表现更加动态化和富有生命力。

SSE：流式模式的核心技术

流式模式的实现离不开Server-Sent Events (SSE)技术的支持。SSE是一种在Web页面中从服务器向客户端推送实时更新的技术，属于HTML5标准之一。它允许服务器不断发送数据到客户端，而不需要客户端持续发起请求。在流式模式中，SSE被广泛用于实现打字机输出的流式返回效果。

SSE的工作原理

SSE基于HTTP协议，通过简单的GET请求即可开启一个持久连接。服务器会使用
Content-Type: text/event-stream
来标记返回的数据流，随后可以通过定期发送数据保持连接。当数据到达客户端时，浏览器会自动触发
message
事件进行处理。SSE支持的数据流格式较为简单，每条数据都以事件块的形式发送，并以双换行符结束。

SSE的基本事件块格式如下：

event: 事件名称
data: 数据内容

每条事件都以
event
和
data
两个字段组成，其中
data
是实际的传输内容，而
event
则用于标记事件的类型。客户端可以根据
event
的类型进行不同的处理，比如显示不同的内容或触发特定的交互效果。

SSE的优势

SSE与WebSocket都是常用于实时数据推送的技术，但相比WebSocket，SSE的优势在于实现简单、数据流控制更稳定且具有自动重连机制。对于需要单向数据流（即服务器向客户端推送）的场景，SSE是一种轻量级而高效的选择。此外，SSE还具有较好的兼容性，能够在主流浏览器中良好运行。

实现基于SSE的流式模式

在基于流式模式的Web应用中，我们可以使用JavaScript和服务器端的SSE支持来实现打字机输出效果。以下是一个简单的实现示例，展示了如何通过SSE在客户端实现流式数据接收和展示。

服务端的实现

我们假设服务器使用FastAPI框架，以下是一个简单的服务端代码示例：

from fastapi import FastAPI
from fastapi.responses import StreamingResponse
import time

app = FastAPI()

def generate_stream():
    for i in range(1, 11):
        yield f"data: Message {i}\n\n"
        time.sleep(1)

@app.get("/stream")
async def stream():
    return StreamingResponse(generate_stream(), media_type="text/event-stream")

在这个例子中，我们定义了一个
generate_stream
函数用于生成数据流，使用
yield
逐步发送消息内容。
StreamingResponse
类用于将数据流作为响应发送给客户端，并指定
media_type="text/event-stream"
来标识这是一个SSE流。

客户端的实现

在客户端，我们可以使用JavaScript的
EventSource
API来接收数据流并实时展示：

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <title>SSE流式模式示例</title>
  </head>
  <body>
    <h1>实时消息流</h1>
    <div id="messages"></div>
    <script>
      const messagesDiv = document.getElementById("messages");
      const eventSource = new EventSource("/stream");

      eventSource.onmessage = (event) => {
        const newMessage = document.createElement("p");
        newMessage.textContent = event.data;
        messagesDiv.appendChild(newMessage);
      };

      eventSource.onerror = () => {
        console.log("连接出错，正在重新连接...");
      };
    </script>
  </body>
</html>

在客户端HTML页面中，我们创建了一个
EventSource
对象用于连接服务端的SSE流。
onmessage
事件处理器会在收到每条消息时将内容添加到页面中，从而产生实时更新的效果。这种实现方式简单而高效，让用户体验到类似打字机的逐行显示效果。

应用场景与流式模式的优势

流式模式的应用场景非常广泛，尤其适合需要快速响应和实时更新的应用程序：

实时数据监控：在金融交易、传感器数据监控等场景下，流式模式能够让用户实时获取数据，做出快速响应。
聊天应用：在即时通讯应用中，流式模式使得聊天消息可以即时到达，提升了聊天体验。
新闻推送：对于新闻网站或信息流应用，SSE能够即时向用户推送最新内容，提升用户粘性。
流式问答系统：在智能问答系统中，流式模式可用于模拟回答生成的过程，提升交互的真实性和自然性。

流式模式与WebSocket的对比

尽管流式模式和SSE具有诸多优点，但在一些双向通信需求较高的场景中，WebSocket可能会是更好的选择。与SSE的单向通信不同，WebSocket支持客户端和服务器之间的双向通信，因此在一些聊天系统或在线游戏等需要双向互动的应用中更为适用。然而，对于纯粹的服务器到客户端的数据推送需求，SSE更加轻量和高效。