📄 common-sse 模块使用

Server-Sent Events (SSE) 是一种服务器推送技术，允许服务器向客户端推送实时数据。PigX 中的 common-sse 模块提供了简单的 SSE 集成方案。

前端配置

1. 开启 SSE 功能

在项目根目录的 .env 文件中配置：

VITE_SSE_ENABLE=true

2. 使用 SSE 组件

在需要接收服务器推送的页面中引入并使用 SSE 组件, 推荐放在前端的 main.vue 全局组件中

• uri属性: SSE 服务端接口地址，格式为 /xxx/sse/info（xxx 为实际微服务路由前缀）

<template>
  <sse :uri="/admin/sse/info"/>
</template>

<script setup>
// 异步加载 SSE 组件
const Sse = defineAsyncComponent(() => 
  import("/@/components/SSE/index.vue")
)
</script>

后端配置

1. 添加依赖

在目标微服务的 pom.xml 中添加 SSE 依赖：

<dependency>
  <groupId>com.pig4cloud</groupId>
  <artifactId>pigx-common-sse</artifactId>
</dependency>

2. 发送消息

public void sendMessage(Long userId, String message) {
    try {
        SseEmitter sseEmitter = SseEmitterHolder.getSseEmitter(userId.toString());
        if (sseEmitter != null) {
            sseEmitter.send(message);
        }
    } catch (Exception e) {
        log.error("发送 SSE 消息失败", e);
    }
}

消息展示

组件默认会在页面右上角以通知形式展示接收到的消息, 如下图

如需自定义消息展示效果，可以修改 /@/components/SSE/index.vue 组件的实现