使用Java调用SSE流式接口，实现前端打字输出效果
SSE（Server-Sent Events）是一种服务器推送技术，可以让Web服务器发送实时事件到浏览器，让用户能够实时获取更新数据。在本节中，我们将探讨如何在Java中调用SSE流式接口，并将数据实时返回给前端，模拟打字输出效果。
一、设置项目环境
首先，我们使用Spring Boot构建一个简单的Web应用。在pom.xml中添加必要的依赖：
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
二、实现SSE接口
接下来，我们实现一个SSE接口，向前端推送文本数据。创建一个新的Controller类，例如SseController：
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.mvc.method.annotation.SseEmitter;
import java.io.IOException;
import java.util.concurrent.Executors;
import java.util.concurrent.ScheduledExecutorService;
import java.util.concurrent.TimeUnit;
@RestController
public class SseController {
@GetMapping("/sse")
public SseEmitter handleSse() {
SseEmitter emitter = new SseEmitter();
ScheduledExecutorService executor = Executors.newSingleThreadScheduledExecutor();
executor.scheduleAtFixedRate(() -> {
try {
String message = "Hello, this is a message from SSE!";
emitter.send(message);
} catch (IOException e) {
emitter.completeWithError(e);
executor.shutdown();
}
}, 0, 1, TimeUnit.SECONDS);
emitter.onCompletion(() -> executor.shutdown());
emitter.onTimeout(() -> emitter.complete());
return emitter;
}
}
在上述代码中，我们使用SseEmitter类来发送数据流。在每秒钟的间隔中，我们向客户端发送一条消息。emitter.onCompletion()和emitter.onTimeout()用于处理连接结束和超时的情况。
三、创建前端页面
接下来，我们需要在前端实现一个简单的HTML页面，来接收并处理来自SSE的消息。以下是一个基本的HTML文件示例：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SSE 示例</title>
<style>
#output {
font-size: 24px;
line-height: 1.5;
}
</style>
</head>
<body>
<h1>SSE 打字输出效果</h1>
<div id="output"></div>
<script>
const outputDiv = document.getElementById('output');
const eventSource = new EventSource('/sse');
eventSource.onmessage = function(event) {
const message = event.data;
typeWriter(message, outputDiv);
};
function typeWriter(text, element) {
let index = 0;
element.innerHTML = ""; // 清空之前的内容
function type() {
if (index < text.length) {
element.innerHTML += text.charAt(index);
index++;
setTimeout(type, 100); // 控制打字的速度
}
}
type();
}
</script>
</body>
</html>
在上述HTML代码中，我们使用JavaScript的EventSource对象来连接到我们的SSE接口。当收到消息时，我们调用typeWriter函数来模拟打字效果，逐字输出文本内容。
四、启动应用
现在，我们可以启动我们的Spring Boot应用。访问我们创建的HTML页面，查看实时的打字输出效果。当你打开页面时，文本将会每秒钟调用一次SSE接口，并逐字显示。
总结
通过上述步骤，我们实现了一个简单的示例，演示了如何在Java中使用SSE流式接口，并在前端实现打字输出效果。这个技术可以用于实时聊天、通知、更新等功能，能够提升用户体验。
