当前位置：首页 > article >正文

SSE基础配置与使用

article 2024/12/1 14:45:02

什么是 Server-Sent Events (SSE)

**Server-Sent Events (SSE) **是一种轻量的服务器向客户端推送消息的机制，基于 HTTP 协议实现单向通信，适用于需要实时更新的场景。

与 WebSocket 不同，SSE 只允许服务器向客户端发送数据，因此其实现简单、开销小，特别适合应用在以下场景：

实时数据流更新
实时通知或消息推送
GPT-3/4 等 AI 模型的流式输出

SSE 的优势

简单性：基于 HTTP，使用简单。
效率：相比 WebSocket，SSE 对于服务器资源的消耗较小。
浏览器支持：现代浏览器均支持 SSE。
自动重连：SSE 有内置的自动重连机制，连接断开时，浏览器会自动尝试恢复。

如何使用 @microsoft/fetch-event-source

微软的 @microsoft/fetch-event-source 是一个库，用于通过 Fetch API 实现 SSE 的流式数据传输。它封装了请求发送、消息接收和连接恢复的逻辑，非常适合流式数据的处理。

安装库
首先，我们需要安装该库：

npm install @microsoft/fetch-event-source

基本用法
在前端项目中引入 @microsoft/fetch-event-source 后，使用它来发送 SSE 请求并处理流式数据。

import { fetchEventSource } from '@microsoft/fetch-event-source';

fetchEventSource('http://your-api-endpoint.com/stream', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
    },
    body: JSON.stringify({ query: '你的查询' }),
    onmessage(ev) {
        console.log('Received message:', ev.data);
        // 这里可以根据接收到的流式数据更新前端界面
    },
    onclose() {
        console.log('Connection closed by server');
    },
    onerror(err) {
        console.error('Error received:', err);
    },
});

主要参数

method: HTTP 方法，通常为 POST。
headers: 请求头信息，通常需要指定 Content-Type 为 application/json。
body: 请求体内容，可以根据需求传递给后端。
onmessage: 处理流式消息的回调函数，每当服务器发送一条消息时会调用。
onclose: 服务器关闭连接时的回调。
onerror: 出现错误时的回调。

GPT 流式输出的实现思路

我们将通过 SSE 来实现 GPT 模型的流式输出效果。在 GPT 模型中，生成文本时每一小段文本都会逐步返回，类似实时聊天的效果。使用 @microsoft/fetch-event-source，我们可以轻松处理这些逐步返回的数据，并实时展示在前端。

GPT 模型流式输出的步骤

客户端发送请求：发送 SSE 请求到后端。
服务端返回流式数据：GPT 模型逐步返回生成的文本，服务器将这些文本通过 SSE 推送给客户端。
前端实时更新显示：前端接收文本片段，并逐步更新界面。

完整代码示例

以下是一个完整的示例，展示如何使用 @microsoft/fetch-event-source 实现 GPT 模型的流式输出：

前端实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GPT 流式输出示例</title>
</head>
<body>

<h1>GPT 实时生成</h1>
<div id="gpt-output"></div>

<script type="module">
    import { fetchEventSource } from '@microsoft/fetch-event-source';

    const outputDiv = document.getElementById('gpt-output');

    // 发送 SSE 请求
    fetchEventSource('http://localhost:8080/gpt-stream', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({ query: '你的问题是什么？' }),
        onmessage(ev) {
            // 实时接收数据，并将其添加到页面
            outputDiv.innerText += ev.data;
        },
        onclose() {
            console.log('连接关闭');
        },
        onerror(err) {
            console.error('连接错误', err);
        }
    });
</script>

</body>
</html>

后端实现（假设使用 Java 和 Spring Boot）
在服务端，假设我们使用 Spring Boot 来实现 GPT 模型的接口。我们通过返回 SseEmitter 来实现流式输出。

@PostMapping("/gpt-stream")
public SseEmitter streamGPT(@RequestBody Map<String, String> request) {
    SseEmitter emitter = new SseEmitter();

    new Thread(() -> {
        try {
            String query = request.get("query");
            // 模拟 GPT 模型逐步生成文本
            for (int i = 0; i < query.length(); i++) {
                emitter.send(query.charAt(i));
                Thread.sleep(500);  // 模拟延迟
            }
            emitter.complete();
        } catch (Exception e) {
            emitter.completeWithError(e);
        }
    }).start();

    return emitter;
}