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

个人信息展示页面设计黑帽seo技术

wzjs 2025/7/28 21:10:24

个人信息展示页面设计,黑帽seo技术,做药物分析必须知道的网站,zblog做企业网站好吗在现代 Web 应用开发中，实时数据推送已成为许多业务场景的核心需求，例如实时通知、股票价格更新或在线聊天等。传统的轮询方式效率低下，而 SSE（Server-Sent Events，服务器推送事件）作为 HTML5 提供的一种轻…

在现代 Web 应用开发中，实时数据推送已成为许多业务场景的核心需求，例如实时通知、股票价格更新或在线聊天等。传统的轮询方式效率低下，而 SSE（Server-Sent Events，服务器推送事件）作为 HTML5 提供的一种轻量级技术，能够通过单向长连接实现服务器到客户端的实时数据推送。Spring Boot 3.4.3 结合 Spring WebFlux，为开发者提供了响应式编程能力，使得实现 SSE 功能更加简单高效。本文将详细介绍如何在 Spring Boot 3.4.3 中基于 Spring WebFlux 实现 SSE 功能，并提供完整的代码示例，助你在企业级应用中快速落地实时推送需求。

1. SSE 简介

1.1 什么是 SSE？

SSE（Server-Sent Events）是一种基于 HTTP 协议的服务器推送技术，允许服务器主动向客户端发送数据。客户端通过建立长连接接收服务器推送的事件流，适用于需要实时更新的场景。与 WebSocket 相比，SSE 是单向通信（仅服务器到客户端），实现更简单，且浏览器原生支持。

1.2 SSE 的优点

轻量级：基于 HTTP，无需额外协议支持。
简单性：实现成本低，适合单向推送场景。
自动重连：客户端断开后可自动尝试重连。
兼容性：HTML5 标准，主流浏览器均支持。

1.3 适用场景

实时通知（如消息提醒）。
数据监控（如服务器状态更新）。
单向事件流（如日志推送）。

2. Spring WebFlux 简介

Spring WebFlux 是 Spring 5 引入的响应式 Web 框架，与传统的 Spring MVC 不同，它基于 Reactor 项目，支持异步非阻塞的编程模型。Spring Boot 3.4.3 默认集成了 Spring WebFlux，使得开发者可以轻松构建高并发、事件驱动的应用。结合 SSE，WebFlux 的 Flux 数据流非常适合处理实时推送需求。

3. 项目实战

以下是基于 Spring Boot 3.4.3 和 Spring WebFlux 实现 SSE 功能的完整步骤。

3.1 添加 Maven 依赖

在 pom.xml 中添加 Spring WebFlux 的依赖：

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"><modelVersion>4.0.0</modelVersion><parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>3.4.3</version></parent><artifactId>springboot-sse</artifactId><properties><maven.compiler.source>17</maven.compiler.source><maven.compiler.target>17</maven.compiler.target><project.build.sourceEncoding>UTF-8</project.build.sourceEncoding></properties><dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-webflux</artifactId></dependency></dependencies>
</project>

说明：

spring-boot-starter-webflux 提供了 WebFlux 的核心功能和 Reactor 依赖。
Spring Boot 3.4.3 使用 JDK 17，确保编译器版本匹配。

3.2 创建 SSE 控制器

创建一个控制器，用于推送事件流：

package cn.joyous.sse.controller;import org.springframework.http.MediaType;
import org.springframework.http.codec.ServerSentEvent;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
import reactor.core.publisher.Flux;import java.time.Duration;
import java.util.concurrent.atomic.AtomicInteger;/***/
@RestController
public class SSEController {// 定义一个计数器，用于模拟数据变化private final AtomicInteger counter = new AtomicInteger(0);@GetMapping(path = "/sse", produces = MediaType.TEXT_EVENT_STREAM_VALUE)public Flux<ServerSentEvent<Integer>> streamEvents() {return Flux.interval(Duration.ofSeconds(1)).map(seq -> ServerSentEvent.<Integer>builder().id(String.valueOf(seq)).event("message").data(counter.incrementAndGet()).build());}
}

代码说明：

@GetMapping(produces = MediaType.TEXT_EVENT_STREAM_VALUE)：指定返回 SSE 事件流。
Flux.interval(Duration.ofSeconds(1))：每秒生成一个事件。
ServerSentEvent.builder()：构造 SSE 事件，包含 id（事件标识）、event（事件类型）和 data（推送数据）。

3.3 前端页面示例

创建一个简单的 HTML 页面，用于接收 SSE 数据：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>SSE Demo</title>
</head>
<body><h1>SSE 数据推送</h1><div id="result"></div><script>const eventSource = new EventSource("http://localhost:8080/sse");eventSource.onmessage = function(event) {document.getElementById("result").innerText += "收到数据: " + event.data + "\n";};eventSource.onerror = function() {console.log("SSE 连接失败");eventSource.close();};</script>
</body>
</html>

保存为 sse.html，放置在 src/main/resources/static 目录下。

3.4 启动与测试

启动 Spring Boot 应用。
在浏览器中访问 http://localhost:8080/sse.html，你将看到页面每秒更新一次计数器数据。
或者直接访问 http://localhost:8080/sse，查看原始事件流：
```
id: 0
event: message
data: 1id: 1
event: message
data: 2
```

4. 进阶功能（可选）

自定义事件类型
修改控制器支持多种事件：

@GetMapping(path = "/sse", produces = MediaType.TEXT_EVENT_STREAM_VALUE)
public Flux<ServerSentEvent<String>> streamEvents() {return Flux.interval(Duration.ofSeconds(1)).map(seq -> ServerSentEvent.<String>builder().id(String.valueOf(seq)).event(seq % 2 == 0 ? "even" : "odd").data("Count: " + counter.incrementAndGet()).build());
}

动态推送特定用户
使用 Map 存储用户连接：

private final Map<String, Sinks.Many<String>> userSinks = new ConcurrentHashMap<>();@GetMapping("/sse/{userId}")
public Flux<ServerSentEvent<String>> userStream(@PathVariable String userId) {Sinks.Many<String> sink = userSinks.computeIfAbsent(userId, k -> Sinks.many().multicast().onBackpressureBuffer());return sink.asFlux().map(data -> ServerSentEvent.builder().data(data).build());
}

异常处理
添加错误重连逻辑：

return Flux.interval(Duration.ofSeconds(1)).map(seq -> ServerSentEvent.<Integer>builder().data(counter.incrementAndGet()).build()).onErrorResume(e -> Flux.just(ServerSentEvent.builder().data("Error: " + e.getMessage()).build()));