Spring Boot 集成 WebFlux 实现“打字机”流式响应效果
在现代 Web 应用程序中，实时数据更新和流式响应变得越来越重要。Spring Boot 为我们提供了 WebFlux，一个支持反应式编程的框架，能够帮助我们实现高效的流式响应。本文将介绍如何使用 Spring Boot 和 WebFlux 实现一个“打字机”效果的流式响应。
1. 环境准备
首先，确保你的开发环境已经安装了 JDK 11 或更高版本，并且已经在你的项目中引入了 Spring Boot 和 WebFlux 的相关依赖。以下是使用 Maven 的基本依赖示例：
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-webflux</artifactId>
</dependency>
2. 创建 Controller
接下来，我们需要创建一个控制器 TypeWriterController，负责处理客户端的请求，并生成流式响应。这里我们将模拟将一段文本以打字机效果逐字发送给客户端。
import org.springframework.http.MediaType;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
import reactor.core.publisher.Flux;
import java.time.Duration;
@RestController
public class TypeWriterController {
@GetMapping(value = "/typewriter", produces = MediaType.TEXT_EVENT_STREAM_VALUE)
public Flux<String> typewriter() {
String text = "你好，欢迎使用 Spring WebFlux！";
return Flux.fromArray(text.split(""))
.delayElements(Duration.ofMillis(500)) // 每个字符之间延迟 500 毫秒
.map(this::formatCharacter);
}
private String formatCharacter(String character) {
return character.equals(" ") ? " " : character; // 保留空格字符
}
}
在上面的代码中，我们使用 Flux.fromArray 将输入的字符串分割成字符数组，并使用 delayElements 方法设置每个字符之间的延迟。这使得服务器能够以流的形式逐渐发送字符，并产生“打字机”的效果。
3. 启动应用
确保已经创建了一个主应用程序类来启动你的 Spring Boot 应用。通常，该类放在与其他 Java 文件相同的包中。示例如下：
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
@SpringBootApplication
public class TypewriterApplication {
public static void main(String[] args) {
SpringApplication.run(TypewriterApplication.class, args);
}
}
4. 测试服务
启动应用后可以使用浏览器或 Postman 测试 /typewriter 接口。当你访问该接口时，应该能够看到每个字符都以打字机的效果逐个呈现。
5. 前端实现
为了增强用户体验，我们可以使用简单的前端代码来展示流式响应。在这个示例中，我们将使用 JavaScript 的 EventSource 来接收服务器发送的事件。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>打字机效果</title>
</head>
<body>
<h1>打字机效果页面</h1>
<div id="output"></div>
<script>
const output = document.getElementById('output');
const eventSource = new EventSource('/typewriter');
eventSource.onmessage = function(event) {
output.innerHTML += event.data; // 逐字添加字符
};
eventSource.onerror = function(event) {
console.error("Error occurred:", event);
eventSource.close(); // 关闭连接
};
</script>
</body>
</html>
在这个 HTML 文件中，我们使用 EventSource 对象连接到 Spring Boot 提供的 /typewriter 接口，并在 onmessage 事件中逐字显示来自服务器的字符。
总结
通过 Spring Boot 和 WebFlux，我们实现了一个简单的打字机效果的流式响应服务。这个示例展示了如何将反应式编程应用于真实场景，同时通过流的方式高效地处理数据。这类技术在聊天应用、实时通知等场景中将会具有很大的应用潜力。
