前端打字展示效果是现在AI生成方案的一种比较吸引用户的实现方案，下面我们就来看看，如何通过Spring Boot和Spring WebFlux结合前端通信技术Server-Sent Events（SSE）来逐字发送数据给客户端实现前端打字效果的输出。

添加依赖配置

创建一个SpringBoot项目，并且在其中引入webflux的依赖配置，如下所示。

<dependencies>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-webflux</artifactId>
    </dependency>
</dependencies>

实现服务端逻辑

接下来就是创建一个内部的处理器来接收SSE请求处理，如下所示。

package com.example.demo;

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 TypingEffectController {

    @GetMapping(value = "/type", produces = MediaType.TEXT_EVENT_STREAM_VALUE)
    public Flux<String> type() {
        String message = "Hello, this is a typing effect!";
        return Flux.range(0, message.length())
                .delayElements(Duration.ofMillis(300))
                .map(i -> String.valueOf(message.charAt(i)));
    }
}

在上面的实现中，我们通过Flux.range生成一个从0到消息长度的整数流。然后通过delayElements(Duration.ofMillis(300))用于模拟打字的间隔，每300毫秒发送一个字符，最终实现与前端的打字交互效果的数据传输。接下来就来看看前端如何进行交互。

前端实现

在前端，使用JavaScript来接收SSE事件并显示打字效果展示，如下所示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Typing Effect</title>
</head>
<body>
    <div id="typing"></div>
    <script>
        const typingDiv = document.getElementById('typing');
        const eventSource = new EventSource('/type');

        eventSource.onmessage = function(event) {
            typingDiv.textContent += event.data;
        };
    </script>
</body>
</html>

在上面的代码中，我们通过EventSource来接收来自服务器端的SSE事件，然后当接收到到一个新数据的时候，将其内容添加到typingDiv中进行展示。当然我们也可以在前端展示的时候添加其他的炫酷效果实现。

总结

当然，除了上面的这种方式之外，我们还可以通过WebSocket、Reactive Streams（响应式流）、Chunked Transfer Encoding（分块传输编码）等操作来实现打字交互效果。通过几种方式的比较，我们发现SSE是最简单有效的实现方式，但WebSocket提供了更强大的双向通信能力，而分块传输编码也提供了一种逐字发送数据的有效方式。根据具体需求选择合适的实现方案即可。

桓楠百科网

编程知识、经典语录与百科知识分享平台

Spring Boot+Spring WebFlux响应式开发，实现打字效果?

添加依赖配置

实现服务端逻辑

前端实现

总结