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

Spring WebFlux 实现 SSE 流式回复：类GPT逐字显示回复效果完整指南

news 2025/11/4 17:10:27

本节将提供基于 Spring WebFlux 和 SSE 实现类ChatGPT流式回复效果的完整代码示例，并详细说明所需的依赖和配置。

1. 项目配置

  • 构建工具: Maven 或 Gradle
  • 依赖:
<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-webflux</artifactId>
</dependency>

2. 后端代码 (Spring WebFlux)

package com.example.ssedemo;import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.http.MediaType;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import reactor.core.publisher.Flux;
import org.springframework.http.codec.ServerSentEvent;import java.time.Duration;@SpringBootApplication
@RestController
public class SseDemoApplication {public static void main(String[] args) {SpringApplication.run(SseDemoApplication.class, args);}@GetMapping(value = "/stream", produces = MediaType.TEXT_EVENT_STREAM_VALUE)public Flux<ServerSentEvent<String>> streamChatGPTReply(@RequestParam String message) {// 模拟调用 ChatGPT API 获取回复String reply = "收到消息: " + message + ". 正在思考...";return Flux.<String>create(sink -> {sink.next(reply); // 先发送初始回复// 模拟逐字生成回复for (int i = 0; i < reply.length(); i++) {try {Thread.sleep(100); // 模拟延迟sink.next(reply.substring(0, i + 1));} catch (InterruptedException e) {throw new RuntimeException(e);}}sink.complete();}).map(data -> ServerSentEvent.<String>builder().data(data).build()).delayElements(Duration.ofMillis(100)); // 每隔一段时间发送一个字符}
}

 另外一种方式：

private final WebClient webClient; // 用于调用外部 APIpublic ChatController(WebClient.Builder webClientBuilder) {this.webClient = webClientBuilder.baseUrl("http://api.example.com").build(); 
}@GetMapping(value = "/stream", produces = MediaType.TEXT_EVENT_STREAM_VALUE)
public Flux<ServerSentEvent<String>> streamChatGPTReply(@RequestParam String message) {// 使用 WebClient 异步调用外部 APIreturn webClient.post().uri("/api/external") .bodyValue(message).retrieve().bodyToFlux(String.class) // 假设 API 返回 String 类型数据.map(data -> ServerSentEvent.<String>builder().data(data) // 将 API 响应数据包装到 SSE 事件中.build()).delayElements(Duration.ofMillis(100));
}

3. 前端代码 (HTML & JavaScript)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>SSE Demo</title>
</head>
<body><h1>SSE Chat Demo</h1><div id="output"></div><input type="text" id="message"><button onclick="sendMessage()">发送</button><script>const output = document.getElementById('output');function sendMessage() {const message = document.getElementById('message').value;const eventSource = new EventSource('/stream?message=' + message);eventSource.onmessage = (event) => {output.innerHTML += event.data + '<br>';};eventSource.onerror = (error) => {console.error('SSE 连接错误:', error);eventSource.close();};}</script>
</body>
</html>

4. 代码解析

  • 后端:
    • @GetMapping(produces = MediaType.TEXT_EVENT_STREAM_VALUE): 指定响应类型为 text/event-stream，这是 SSE 的标准 MIME 类型。
    • Flux<ServerSentEvent<String>>: 使用 Spring WebFlux 的 Flux 类型返回数据流，并使用 ServerSentEvent 包装每个数据项.
    • sink.next(): 向数据流中发送数据。
    • sink.complete(): 通知数据流结束。
  • 前端:
    • new EventSource('/stream'): 创建 EventSource 对象，连接到后端 SSE 接口.
    • eventSource.onmessage: 监听 message 事件，接收后端推送的数据.
    • eventSource.onerror: 监听连接错误.

5. 运行 & 测试

  1. 启动 Spring Boot 应用.
  2. 访问 http://localhost:8080 (默认端口).
  3. 在输入框中输入消息并点击发送，观察逐字显示的效果.

总结

本文详细介绍了如何使用 Spring WebFlux 和 SSE 实现类似 ChatGPT 的流式回复效果，并提供了完整的代码示例。希望读者能够通过本文掌握该技术，并在实际项目中灵活运用。

相关文章：

Spring WebFlux 实现 SSE 流式回复：类GPT逐字显示回复效果完整指南

本节将提供基于 Spring WebFlux 和 SSE 实现类ChatGPT流式回复效果的完整代码示例&#xff0c;并详细说明所需的依赖和配置。 1. 项目配置 构建工具: Maven 或 Gradle依赖: <dependency><groupId>org.springframework.boot</groupId><artifactId>sp…...

编程日记 2024/8/13 13:53:24

成功解决7版本的数据库导入 8版本数据库脚本报错问题

我 | 在这里 ⭐ 全栈开发攻城狮、全网10W粉丝、2022博客之星后端领域Top1、专家博主。 &#x1f393;擅长 指导毕设 | 论文指导 | 系统开发 | 毕业答辩 | 系统讲解等。已指导60位同学顺利毕业 ✈️个人公众号&#xff1a;热爱技术的小郑。回复 Java全套视频教程 或 前端全套视频…...

编程日记 2024/8/13 13:52:23

如何让RStudio使用不同版本的R

下面内容摘录自&#xff1a; 专栏问答&#xff1a;管理和选择不同的R&#xff0c;如何做好R的笔记_rstudio如何在不同的r版本中进行切换-CSDN博客 欢迎订阅我们专栏 问题一&#xff1a;如何发现RStudio需要安装和使用不同版本的R。这是为什么呢&#xff1f; R允许用户在同一系统…...

编程日记 2024/8/13 13:48:18

汽车免拆诊断案例 | 2011 款进口现代新胜达车智能钥匙系统有时失效

故障现象　 一辆2011款进口现代新胜达车&#xff0c;搭载G4KE发动机&#xff0c;累计行驶里程约为26.3万km。车主进厂反映&#xff0c;有时进入车内按下起动按钮&#xff0c;发动机无法起动&#xff0c;且组合仪表黑屏。 故障诊断　 接车后试车&#xff0c;车辆使用一切正常。…...

编程日记 2024/8/13 13:47:17

Count clock

写了半天不对&#xff0c;才注意到是十六进制的 - - 另外安装了vivado 哈哈哈哈&#xff0c;可以看看写的到底对不对 之前好多程序在 hdlbits 可以正确运行 但是 vivado 编译不通过。 module clock(input clk,input reset,input ena,output reg pm,output reg[7:0] hh,output …...

编程日记 2024/8/13 13:46:15

【MySQL】1.MySQL基本操作

目录 一、MySQL数据库登陆 1、设置环境变量 2、cmd命令登陆数据库 二、基本操作语法 1、显示数据库——SHOW 2、使用/选择数据库——USE 3、删除——DROP 4、创建——CREATE 5、查看表结构——DESC 6、数据操作——增删改查 &#xff08;1&#xff09;增/插入&#…...

编程日记 2024/8/13 13:45:14

Qt .qm文件详解

Qt中的.qm文件是Qt翻译文件的一种&#xff0c;主要用于支持软件的多语言转换。在生成Qt应用程序时&#xff0c;qm文件会被包含进应用程序中&#xff0c;根据逻辑以显示对应语言的界面。 .qm文件的基本信息 格式&#xff1a;.qm文件是Qt应用程序中用于存储翻译文本的二进制文件…...

编程日记 2024/8/13 13:44:13

【计算机网络】UDP实战

其实经过这几天写的几种不同的UDP的简易客户端与服务端&#xff0c;还是很有套路的&#xff0c;起手式都是非常像的。 更多的难点对我来说反而是解耦&#xff0c;各种各样的function一用&#xff0c;回调函数一调&#xff0c;呕吼&#xff0c;就会懵一下。 对于这篇文章&#x…...

编程日记 2024/8/13 13:43:11

七、ESP32-S3上使用MicroPython点亮WS2812智能LED灯珠并通过web控制和JS颜色选择器改变灯珠颜色

本地代码集成离线iro.js库来添加一个颜色选择器控件&#xff0c;在无网络环境可以通过JavaScript将选中的颜色发送到服务器以改变LED颜色。以下是将iro.js集成到网页后的颜色图片。 Iro.js 地址API操作手册 color:change # 每当所选颜色发生变化时触发 - 无论是当用户与颜色选…...

编程日记 2024/8/13 13:41:09

Z 字形遍历二叉树

假设一个二叉树上各结点的权值互不相同。 我们就可以通过其后序遍历和中序遍历来确定唯一二叉树。 请你输出该二叉树的 ZZ 字形遍历序列----也就是说&#xff0c;从根结点开始&#xff0c;逐层遍历&#xff0c;第一层从右到左遍历&#xff0c;第二层从左到右遍历&#xff0c;…...

编程日记 2024/8/13 13:40:08

[Vue]Vue3从入门到精通-综合案例分析

一.Vue是什么&#xff1a; 概念&#xff1a;Vue是一个用于构建用户界面的渐进式的框架 以下的内容是自里向外的 声明式渲染(Vuejs核心包)组件系统(Vuejs核心包)客户端路由VueRouter大规模状态管理Vuex构建工具Webpack/Vite Vue的两种使用方式&#xff1a; Vue核心包开发-&…...

编程日记 2024/8/13 13:38:06

深度学习——神经网络（neural network）详解（二）. 带手算步骤，步骤清晰0基础可看

深度学习——神经网络&#xff08;neural network&#xff09;详解&#xff08;二&#xff09;. 手算步骤&#xff0c;步骤清晰0基础可看 前文如下&#xff1a;深度学习——神经网络&#xff08;neural network&#xff09;详解&#xff08;一&#xff09;. 带手算步骤&#x…...

编程日记 2024/8/13 13:37:05

【扒网络架构】backbone、ccff

backbone CCFF 还不知道网络连接方式&#xff0c;只是知道了每一层 backbone backbone.backbone.conv1.weight torch.Size([64, 3, 7, 7])backbone.backbone.layer1.0.conv1.weight torch.Size([64, 64, 1, 1])backbone.backbone.layer1.0.conv2.weight torch.Size([64, 64,…...

编程日记 2024/8/13 13:36:02

linux进程

exit&#xff08;&#xff09;函数正常结束进程 man ps aux 是在使用 ps 命令时常用的一个选项组合&#xff0c;用于显示系统中所有进程的详细信息。aux 不是 ps 命令的一个正式选项&#xff0c;而是三个选项的组合&#xff1a;a, u, 和 x。这三个选项分别代表不同的含义&#…...

编程日记 2024/8/13 13:35:01

PRVF-4037 : CRS is not installed on any of the nodes

描述&#xff1a;公司要求替换centos&#xff0c;重新安装ORACLE LINUX RAC的数据库做备库&#xff0c;到时候切换成主库&#xff0c;安装Linux7GRID 19C 11G Oracle&#xff0c;顺利安装grid 19c&#xff0c;安装11G数据库软件的时候检测报如题错误&#xff1a;**PRVF-4037 …...

编程日记 2024/8/13 13:34:00

整理 酷炫 Flutter 开源UI框架 FAB

flutter_villains 灵活且易于使用的页面转换。 项目地址&#xff1a;https://github.com/Norbert515/flutter_villains 项目Demo&#xff1a;https://download.csdn.net/download/qq_36040764/89631324...

编程日记 2024/8/13 13:32:59

Unity 编写自己的aar库，接收Android广播（broadcastReceiver）并传递到Unity

编写本文是因为找了很多文章&#xff0c;都比较片段&#xff0c;不容易理解&#xff0c;对于Android新手来说理解起来不友好。我这里写了一个针对比较小白的文章&#xff0c;希望有所帮助。 Android端 首先还是先来写Android端&#xff0c;我们新建一个Android空项目&#xf…...

编程日记 2024/8/13 13:29:56

Mysql cast函数、cast用法、字符串转数字、字符串转日期、数据类型转换

文章目录 一、语法二、示例2.1、复杂示例 三、cast与convert的区别 CAST 函数是 SQL 中的一种类型转换函数&#xff0c;它用于将一个数据类型转换为另一个数据类型&#xff0c;这篇文章主要介绍了Mysql中Cast()函数的用法,需要的朋友可以参考下。 Mysql提供了两种将值转换成指…...

编程日记 2024/8/13 13:28:55

微信小程序开发之组件复用机制

新建复用文件&#xff0c;另外需要注册 behavior 例如&#xff1a; 在behavior.js文件中写入方法&#xff0c;并向外暴露出去 写法一&#xff1a; module.exportsBehavior({data: {num: 1},lifetimes: {created() {console.log(1);}} })写法二&#xff1a; const behavior …...

编程日记 2024/8/13 13:27:54

数据结构--线性表

数据结构分类 集合 线性结构(一对一) 树形结构(一对多) 图结构(多对多) 数据结构三要素 1、逻辑结构 2、数据的运算 3、存储结构&#xff08;物理结构&#xff09; 线性表分类 1、顺序表 2、链表 3、栈 4、队列 5、串 线性表--顺序表 顺序表的特点 顺序表的删除和插入…...

编程日记 2024/8/13 13:25:52

【kafka】Golang实现分布式Masscan任务调度系统

要求&#xff1a; 输出两个程序&#xff0c;一个命令行程序&#xff08;命令行参数用flag&#xff09;和一个服务端程序。 命令行程序支持通过命令行参数配置下发IP或IP段、端口、扫描带宽&#xff0c;然后将消息推送到kafka里面。 服务端程序&#xff1a; 从kafka消费者接收…...

编程新知 2025/10/29 8:40:32

AI病理诊断七剑下天山，医疗未来触手可及

一、病理诊断困局&#xff1a;刀尖上的医学艺术 1.1 金标准背后的隐痛 病理诊断被誉为"诊断的诊断"&#xff0c;医生需通过显微镜观察组织切片&#xff0c;在细胞迷宫中捕捉癌变信号。某省病理质控报告显示&#xff0c;基层医院误诊率达12%-15%&#xff0c;专家会诊…...

编程新知 2025/10/24 17:48:33

Caliper 配置文件解析：fisco-bcos.json

config.yaml 文件 config.yaml 是 Caliper 的主配置文件，通常包含以下内容： test:name: fisco-bcos-test # 测试名称description: Performance test of FISCO-BCOS # 测试描述workers:type: local # 工作进程类型number: 5 # 工作进程数量monitor:type: - docker- pro…...

编程新知 2025/10/24 15:14:02

Docker拉取MySQL后数据库连接失败的解决方案

在使用Docker部署MySQL时&#xff0c;拉取并启动容器后&#xff0c;有时可能会遇到数据库连接失败的问题。这种问题可能由多种原因导致&#xff0c;包括配置错误、网络设置问题、权限问题等。本文将分析可能的原因&#xff0c;并提供解决方案。 一、确认MySQL容器的运行状态 …...

编程新知 2025/11/3 20:21:04

从零开始了解数据采集（二十八）——制造业数字孪生

近年来&#xff0c;我国的工业领域正经历一场前所未有的数字化变革&#xff0c;从“双碳目标”到工业互联网平台的推广&#xff0c;国家政策和市场需求共同推动了制造业的升级。在这场变革中&#xff0c;数字孪生技术成为备受关注的关键工具&#xff0c;它不仅让企业“看见”设…...

编程新知 2025/10/28 0:39:41

【若依】框架项目部署笔记

参考【SpringBoot】【Vue】项目部署_no main manifest attribute, in springboot-0.0.1-sn-CSDN博客 多一个redis安装 准备工作&#xff1a; 压缩包下载&#xff1a;http://download.redis.io/releases 1. 上传压缩包&#xff0c;并进入压缩包所在目录&#xff0c;解压到目标…...

编程新知 2025/10/28 12:20:04

Appium下载安装配置保姆教程（图文详解）

目录 一、Appium软件介绍 1.特点 2.工作原理 3.应用场景 二、环境准备 安装 Node.js 安装 Appium 安装 JDK 安装 Android SDK 安装Python及依赖包 三、安装教程 1.Node.js安装 1.1.下载Node 1.2.安装程序 1.3.配置npm仓储和缓存 1.4. 配置环境 1.5.测试Node.j…...

编程新知 2025/11/4 4:40:02

Ray框架：分布式AI训练与调参实践

Ray框架&#xff1a;分布式AI训练与调参实践 系统化学习人工智能网站&#xff08;收藏&#xff09;&#xff1a;https://www.captainbed.cn/flu 文章目录 Ray框架&#xff1a;分布式AI训练与调参实践摘要引言框架架构解析1. 核心组件设计2. 关键技术实现2.1 动态资源调度2.2 …...

编程新知 2025/10/28 16:07:21

2025年全国I卷数学压轴题解答

第19题第3问: b b b 使得存在 t t t, 对于任意的 x x x, 5 cos ⁡ x − cos ⁡ ( 5 x t ) < b 5\cos x-\cos(5xt)<b 5cosx−cos(5xt)<b, 求 b b b 的最小值. 解: b b b 的最小值 b m i n min ⁡ t max ⁡ x g ( x , t ) b_{min}\min_{t} \max_{x} g(x,t) bmi…...

编程新知 2025/10/16 23:39:30

如何让非 TCP/IP 协议驱动屏蔽 IPv4/IPv6 和 ARP 报文？

——从硬件过滤到协议栈隔离的完整指南 引言 在现代网络开发中，许多场景需要定制化网络协议（如工业控制、高性能计算），此时需确保驱动仅处理特定协议，避免被标准协议（如 IPv4/IPv6/ARP）干扰。本文基于 Linux 内核驱动的实现，探讨如何通过硬件过滤、驱动层拦截和协议栈…...

编程新知 2025/8/13 13:00:56